• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontale Navigationsleiste mit CSS

Furtano

Neues Mitglied
Hallo,
ich habe grade eine horizontale Navigationsleiste mit CSS vor.
Leider bekomme ich ein komisches versetzes Ergebnis, die Buttons sollten eigentlich in einer Linie sein und die Punkte auch weg.
http://www.abload.de/img/ergebnisimhz.jpg

style.css
Code:
body
{
    margin: 0px, 0px, 0px, 0px;
    background-color:#FFF;

}

#wrapper
{
    width:962px;
    margin:0px;
}

#header
{
    float:left;
    width:962px;
    height:305px;
    background-image:url(../Bilder/solar_05.jpg);
    background-repeat:no-repeat;
    margin: 0;
    padding: 0px 0px 0px 0px;    
}

#logo
{
    float:left;
    width:255px;
    height:33px;
    background-image:url(../Bilder/solar_03.jpg);
    background-repeat:no-repeat;
    margin: 0;
    padding: 0px 0px 0px 0px;    
}

ul.nav1 a
{
    float:left;
    margin: 0px 0px 0px 0px;
    padding-top:6px;
    padding-bottom:5px;
    padding-left:15px;
    background-image:url(../Bilder/button.jpg);
    background-repeat:no-repeat;
    width:183px;
    heigth:33px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:19px;
    list-style:none;
    display:inline;
    color:#000;
}
ul.nav1 a:hover
{
    color:#FF0;
    background-image:url(../Bilder/button_hover.jpg);
}
index.html
Code:
<html>
<head>
<title>solar2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    
    <div id="wrapper">
        <div id="logo">
        <!-- LOGO CONTENT -->
        </div>
        
            <ul class="nav1">
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            </ul>
       
        <div id="header">
        <!-- HEADER CONTENT -->
        </div>
    </div>


</body>
</html>
 

Anhänge

  • ergebnisimhz.jpg
    ergebnisimhz.jpg
    71,7 KB · Aufrufe: 7
füge in der CSS noch dies hinzu:
Code:
.nav1 li {
list-style: none;
float: left;
}

ul.nav1 a kannst du entsprechend reduzieren, ggf. bei li noch margin setzen.
 
Für so eine Liste lohnt es sich <li> auf inline zu setzen und das Floating per Links zu machen.

Code:
.nav1 li {
    [COLOR="red"]display: inline;[/COLOR]
    list-style: none;
    float: left;
}

ul.nav1 a
{
    float:left;
    margin: 0px 0px 0px 0px;
    padding-top:6px;
    padding-bottom:5px;
    padding-left:15px;
    background-image:url(../Bilder/button.jpg);
    background-repeat:no-repeat;
    width:183px;
    heigth:33px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:19px;
    list-style:none;
    display: [COLOR="red"]block[/COLOR];
    color:#000;
}

Die roten Markierungen sind meine Änderungen.

Das float bei dem Listenpunkt ist nur für die IEs noch nötig, die anderen Browser stört das nicht weiter.
 
Zurück
Oben