Wegzooming Problem

Wegzooming Problem

Beitragvon Gesichte » 25.02.2010, 09:24

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;
}
Gesichte
neu hier
 
Beiträge: 3
Registriert: 25.02.2010, 09:19

Re: Wegzooming Problem

Beitragvon ThomaZ » 25.02.2010, 20:42

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
Freier Typo3 Entwickler;
Designumsetzer in HTML & CSS;
ThomaZ
Gelegenheitsleser
 
Beiträge: 22
Registriert: 25.02.2010, 20:10

Re: Wegzooming Problem

Beitragvon Gesichte » 26.02.2010, 12:13

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
neu hier
 
Beiträge: 3
Registriert: 25.02.2010, 09:19

Re: Wegzooming Problem

Beitragvon Gesichte » 26.02.2010, 12:26

Ich habe gemerkt dass es im IE nun geht. Aber im Safari immernoch nicht.
Gesichte
neu hier
 
Beiträge: 3
Registriert: 25.02.2010, 09:19


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Wegzooming Problem"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast