Wegzooming Problem

[Gesichte]

Wenn man aus der Website wegzoomt versetzt sich die Letzte Kategorie in der Navigation nach unten links. Kann mir jemand helfen?

Website http://www.dj-sansire.ch

Code: Alles auswählen

<ul id="navig">
    <li><a href="../index.php" title="Zur Startseite">Startseite</a></li><!--
    --><li><a href="../biographie.php" title="Zur Biografie">Biografie</a></li><!--
    --><li><a href="../sanelectro.html" title="Lable SAN ELECTRO">SAN ELECTRO</a></li><!--
    --><li><a href="../events1.html" title="Zu den Events">Events</a></li><!--
    --><li><a href="../galerie.html" title="Zur Galerie">Galerie</a></li><!--
    --><li><a href="../community/gb/gb.php" title="Zum Gästebuch">Gästebuch</a></li><!--
    --><li><a href="../community/kontakt/kontakt.php" title="Zum Kontaktformular">Kontakt</a></li>
    </ul>

Code: Alles auswählen

#navig { /* Navigation */
margin-bottom: 36px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000;
}

#navig li { /* Navigation - Listeneinträge */
display: inline;

}
#navig li a{ /* Navigation - Listeneinträge Links */
text-transform: uppercase;
color: #FFF;
text-decoration: none;
background-repeat: repeat-x;



font-size: 1
.,5;
padding-top: 11px;
padding-bottom: 10px;
float: left;
width: 135px;
text-align: center;
height: 15px;
background-image: url(../images/navig_normal.gif);
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
font-size: 14px;
}
#navig li a:hover{ /* Navigation - Listeneinträge Links Mausüber-Effekt */
background-image: url(../images/navig_over.gif);
}
#navig li a:visited{ /* Navigation - Listeneinträge Links Besucht-Effekt */
color: #E0E0E0;
}

[ThomaZ]

Code: Alles auswählen

#navig { /* Navigation */
position: relative;
left: 0;
right: 0;
}
#navig li { /* Navigation - Listeneinträge */
display: inline-block;
width: 135px;
margin: 0;
padding:0;
margin-left: 1px;
background-image: url(../images/navig_normal.gif);
}
#navig li a{ /* Navigation - Listeneinträge Links */
   text-transform: uppercase;
   color: #FFF;
   text-decoration: none;
        font-size: 15pt;
   padding-top: 11px;
   padding-bottom: 10px;
   float: left;
   width: 135px;
   text-align: center;
   height: 15px;
   font-size: 14px;
}
#navig li a:hover{ /* Navigation - Listeneinträge Links Mausüber-Effekt */
   background-image: url(../images/navig_over.gif);
}
#navig li a:visited{ /* Navigation - Listeneinträge Links Besucht-Effekt */
   color: #E0E0E0;
}


Ich hab dein CSS mal ein wenig überarbeitet. Vielleicht kannst du damit was anfangen.
Damit ist der negative Seiteneffekt verschwunden.
Du solltest dynamischer arbeiten, der ganze Code ist etwas unsauber aufgebaut. Das alles näher zu erläutern ist hier aber zu viel ^^

Und ganz nebenbei, du schließt dein Kopf-Bild in eine H1 ein. Hier wäre ein Div besser am Platz.


MfG

ThomaZ

[Gesichte]

Vielen Dank, mit deiner Technik klapp es!

DIVs dienen ja nur um Elemente zu gruppieren. Der Header h1 beinhaltet nur ein Bild, also vermeide ich eine unnötige DIV-Suppe.

[Gesichte]

Ich habe gemerkt dass es im IE nun geht. Aber im Safari immernoch nicht.