Hilfe bein Menü

s123i

Hallihallo ich bräuchte im Moment etwas Hilfe beim erstellen des Menüs. Ich bin noch Anfänger, hab aber soweit erstmal alles an seinem Platz, jetzt gehts mit dem Menü weiter, aber ich bekomme es einfach nicht hin, hab schon einiges ausprobiert, aber irgendwie hängts bei mir. Vielleicht kann mir ja jemand von euch helfen, ich erkläre mal kurz was ich vor habe.
Das Menü soll position: fixed sein, oben am Rand und zentriert und sich beim verkleinern und vergrößern des Browsers parallel mit vergrößern.
Die Menübuttons habe ich als PNG, die Schrift ist in den Bildern schon eingebettet.
Ich habe 3 verschidene Bilder
1x weiße Schrift= nicht offene Seiten
1x gelbe Schrift = gerade offene Seite
1x Schrift weiß+ gelbe Umrandung = Hover

Mein Problem, ich weiß nicht wie ich das Menü erstellen muss bzw. wie html und css dazu aussehen müssen.
Sollte man alle buttons einzeln machen oder kann man alle buttons als eine grafik einfügen und dann den jeweiligen Button irgendwie markieren?
Wäre über Hilfe sehr dankbar

s123i

Das Menü hab ich jezt erstmal irgendwie hin bekommen, sodas es zumindest zu sehen ist.

1. Ich weiß aber nicht wo ich die Angaben machen muss um die Grafiken zu verkleinern, da die Buttons noch viel zu groß sind und
2. ich habe keinen Plan wo ich was ändern oder hinzufügen muss um Abstände zwischen den Buttons zu bekommen und
3. wenn ich die seite minimiere oder maximiere bleibt das menü nicht zentriert, liegt warscheinlich daran, das ich margin-left: 130px; habe, aber wie bekomm ich nun das ganze ding zentriert?
weiß einer rat?
Und Bitte nicht meckern, ich bin echt noch Anfänger und google mir schon die Finger wund, aber irgendwie klappt das alles nicht oder ich steh aufm Schlauch.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<title>Hier name der Seite</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content="suchbegriffe..............................."/>
<meta name="content-language" content="de"/>
<meta name="robots" content="index, follow"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="..."></script>
<style type="text/css">.auto-style2 { margin-left: 0px; } </style>


</head>






<body>


    
    <div id="nav">
    <ul id="navigation">
        <li id="aktuell"><a class="home" href="index.html"></a></li>
        <li ><a class="about" href="about.html"></a></li>
        <li ><a class="shop" href="shop.html"></a></li>
        <li ><a class="blog" href="blog.html"></a></li>
    </ul>
    </div>      

    <div id="footer"></div>


    <div id="text_middle_eckig">orem ipsum dolor sit amet, consectetuer adipiscing elit.
        Integer tempus malesuada pede. Aliquam vel nibh.Donec rutrum venenatis dui. Pellentesque et arcu. Suspendisse lectus. 
        Aliquam metus. Morbi turpis arcu,egestas congue, condimentum quis, tristique cursus, leo.
        Praesent aliquet, neque pretium congue mattis, ipsum
        nibh.Donec rutrum venenatis dui. Pellentesque et arcu. Suspendisse lectus. 
        Aliquam metus. Morbi turpis arcu,egestas congue, condimentum quis, tristique cursus, leo.
        Praesent aliquet, neque pretium congue mattis, ipsum laoooolaaa
        blsjrjd ejjerjke dkek ekkeme ekek dekd ekeker e jsksd ö äqiwi d<br/ >
        <hr></hr>
        <b>Steffi Krause</b>
      </div>

 
</body>    




</html>

Alles anzeigen

Code

html, body {

    height: 100%;
    background-color: #000000;
    background-image: url('img/background2.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;

    font-family: 'Arial';
    color: #000000;
    font-size: 13px;
    text-align: justify;
}






/* NAVIGATION POSITION */


#navigation {


    margin-left: 130px;
    position: fixed;
    text-align: center;
}
 
#navigation li {


    float: left;
}


#navigation li a {


    background-image: url('img/nav_sprites.png');
    display: block;

}


.home {

    background-position: 0px 0px;
    width: 243px;
    height: 70px;
}
 
.about {

    background-position: -243px 0px;
    width: 243px;
    height: 70px
}
 
.shop {


    background-position: -486px 0px;
    width: 243px;
    height: 70px
}
 
.blog {


    background-position: -729px 0px;
    width: 243px;
    height: 70px
}






/* NAVIGATION HOVER */


#navigation a hover {

    background: url('img/nav_sprites.png') no-repeat;
    display: block;
}

#navigation a.home:hover {

    background-position: -0px -70px;
}


#navigation a.about:hover{

    background-position: -243px -70px;
}

#navigation a.shop:hover {

    background-position: -486px -70px;
}

#navigation a.blog:hover {

    background-position: -729px -70px;
}





/* NAVIGATION ACTIVE */  


#navigation a active {

    background: url('img/nav_sprites.png') no-repeat;
    display: block;
}

#navigation a.home:active {

    background-position: -0px -140px;
}


#navigation a.about:active {

    background-position: -243px -140px;
}


#navigation a.shop:active {

    background-position: -486px -140px;
}

#navigation a.blog:active {

    background-position: -729px -140px;
}





/* NAVIGATION AKTUELL OFFENE SEITE (in jeder einzelner HTML abändern*/


#navigation #aktuell a {

    background: url('img/nav_sprites.png') no-repeat;
    display: block;
}

#navigation #aktuell a.home {

    background-position: -0px -140px;
}


#navigation #aktuell a.about {

    background-position: -243px -140px;
}


#navigation #aktuell a.shop {

    background-position: -486px -140px;
}


#navigation #aktuell a.blog {

    background-position: -729px -140px;
}






/* FOOTER */

#footer {


    background-image: url('img/footer.png');
    background-repeat: no-repeat;
     background-position: center;
     background-size: auto 100%;
     position: fixed;
     float: none;
     bottom: 0px;
     left: 0px;
      width: 100%;
     height: 222px;
     z-index: 3;
}






/* TEXT MITTE AUF HOME/INDEX SEITE */


#text_middle_eckig {

    position: relative;
    margin: 0 auto;
    padding-top: 11px;
    padding-left: 11px;
    padding-right: 11px;
    padding-bottom: 13px;
    top: 120px;
    width: 710px;
    height: 126px;
    background-color: rgb(243, 231, 200);
    z-index: 2;

    -moz-border-radius: 0px 15px; /* Firefox */
    -webkit-border-radius: 0px 15px; /* Chrome, Safari */
    khtml-border-radius: 0px 15px; /* Konqueror */
    border-radius: 0px 15px; /* CSS3 */
    behavior: url(border-radius.htc); /* Internet Explorer */ 

    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-rule: 1px dotted #999;
    -webkit-column-rule: 1px solid #999;
    column-rule: 1px solid #999;
}

Alles anzeigen

Bandit

Poste bitte einen Link zur Seite, damit man sich das ansehen kann. Da uns die erforderlichen Images fehlen, kann man das nicht nachvollziehen.

s123i

Die ist noch nicht online

djheke

Mal so als Beispiel.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>Hover</title>
<meta charset="UTF-8">
<style>


* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 outline:none;
 box-sizing:border-box;
}
header {
 position:fixed;
 height:70px;
 width:80%;
 top:0;
 left:0;
 right:0;
 margin:auto;
 background: #aaa;
}


nav ul {
 position:relative;
 float:left;
 width:100%;
}


nav li {
 float: left;   
 width:25%;
}


nav li a {
 background:url(deinbild.jpg) no-repeat center #ada;
 height:70px;
 display: block;
 text-align:center;
}


#text_middle_eckig {
 background:#ada;
 width:80%;
 margin:100px auto 0 auto;
}
</style>
</head>
<body>
 <header>   
    <nav>
    <ul>
        <li><a class="home" href="index.html">Home</a></li>
        <li><a class="about" href="about.html">Ich</a></li>
        <li><a class="shop" href="shop.html">Shop</a></li>
        <li><a class="blog" href="blog.html">Blog</a></li>
    </ul>
    </nav>      
 </header>                     
<div id="text_middle_eckig">Lorem ipsum dolor sit amet, .....
</div>
</body>
</html>

Alles anzeigen

Tags