10
CSS Navigation
Morgen zusammen,
ich habe eine Navigation mit UL und LI gemacht und leider Anzeigeprobleme zwischen FF und IE.
Im FF sieht alles soweit wie gewünscht aus. Leider stellt der IE es mir komplett falsch dar.
Kann mir bitte jmd Helfen?
Hier die Seite um die es geht
http://typolight.ottscho.de
Danke
Gruß ottscho
ich habe eine Navigation mit UL und LI gemacht und leider Anzeigeprobleme zwischen FF und IE.
Im FF sieht alles soweit wie gewünscht aus. Leider stellt der IE es mir komplett falsch dar.
Kann mir bitte jmd Helfen?
Hier die Seite um die es geht
http://typolight.ottscho.de
Danke
Gruß ottscho
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 98949
Url: https://administrator.de/contentid/98949
Printed on: April 25, 2024 at 15:04 o'clock
10 Comments
Latest comment
Hallo ottscho.
Ich weiß jetzt nicht welchen FF du verwendest. Also mein FF stellt die Navigation auch nicht ganz richtig dar. Im FF2 sieht es so aus wie im IE und im FF3 ist es fast richtig.
Hm, deine CSS Formatieren habe ich mir jetzt aber nicht genauer angesehen aber vielleicht hilft dir dies schon weiter.
CSS
und die Navigation
Viele Grüße Fritzchen
Ich weiß jetzt nicht welchen FF du verwendest. Also mein FF stellt die Navigation auch nicht ganz richtig dar. Im FF2 sieht es so aus wie im IE und im FF3 ist es fast richtig.
Hm, deine CSS Formatieren habe ich mir jetzt aber nicht genauer angesehen aber vielleicht hilft dir dies schon weiter.
CSS
ul#naviliste
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#naviliste li
{
display: inline;
list-style-type: none;
}
#naviliste a {padding: 3px 10px; }
#naviliste a:link, #naviliste a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#naviliste a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}und die Navigation
<ul id="naviliste">
<li><a href="#">Navi eins</a></li>
<li><a href="#">Navi zwei</a></li>
<li><a href="#">Navi drei</a></li>
<li><a href="#">Navi vier</a></li>
<li><a href="#">Navi fuenf</a></li>
</ul>Viele Grüße Fritzchen
danke für die antwort. also jetzt sieht es soweit fast gut aus. habe nur noch zwei geringe probleme:
1. Wenn ich bei der MainNavi, die nicht aktiven Buttons etwas kleiner machen will, bekomme ich unten einen weißen Streifen. Wie kann ich das ändern? SIeht so aus, als wären die Listen-Objekt nach Oben ausgerichtet, würde diese aber gerne nach unten ausrichten...
2. Und wenn ich auf einen MainButton klicke und danach auf einen SubButton so ändert sich der markierte MainButton minimal. Woran liegt das?
Danke Gruß ottscho
1. Wenn ich bei der MainNavi, die nicht aktiven Buttons etwas kleiner machen will, bekomme ich unten einen weißen Streifen. Wie kann ich das ändern? SIeht so aus, als wären die Listen-Objekt nach Oben ausgerichtet, würde diese aber gerne nach unten ausrichten...
2. Und wenn ich auf einen MainButton klicke und danach auf einen SubButton so ändert sich der markierte MainButton minimal. Woran liegt das?
Danke Gruß ottscho
Hallo ottscho.
Zu 1.
Das CSS um das hier erweitern:
in HTML sieht es dann so aus
Zu 2.
Ja, die Schrift verschiebt sich nach unten, deshalb sieht es so aus als wenn sich der Butten verändert.
Mußt du bei deinen Formatierungen nochmal nachschauen.
Viele Grüße Fritzchen
Zu 1.
Das CSS um das hier erweitern:
#naviliste li a#aktive
{
background-color:#369;
padding:13px 10px 3px 10px;
}in HTML sieht es dann so aus
<ul id="naviliste">
<li><a href="#" id="aktive">Navi eins</a></li>
<li><a href="#">Navi zwei</a></li>
<li><a href="#">Navi drei</a></li>
<li><a href="#">Navi vier</a></li>
<li><a href="#">Navi fuenf</a></li>
</ul>Zu 2.
Ja, die Schrift verschiebt sich nach unten, deshalb sieht es so aus als wenn sich der Butten verändert.
Mußt du bei deinen Formatierungen nochmal nachschauen.
Viele Grüße Fritzchen
danke für den tipp, aber leider hat es keine änderung gebracht.
Hallo ottscho.
danke für den tipp, aber leider hat es keine änderung gebracht.
Hm, wie soll ich das jetzt verstehen?
Viele Grüße Fritzchen
danke für den tipp, aber leider hat es keine änderung gebracht.
Hm, wie soll ich das jetzt verstehen?
Viele Grüße Fritzchen
so sieht mein html code aus:
nun habe ich den Code von dir in die css hineingetan, aber ich hatte keine änderung:
<div id="logo">
<ul class="level_1">
<li class="first"><a href="index.php/ueber-uns.html" title="Unternehmen" class="first" onclick="this.blur();">Unternehmen</a></li>
<li class="active"><p class="active">Produktion</p></li>
<li><a href="index.php/ansprechpartner.html" title="Vertrieb" onclick="this.blur();">Vertrieb</a></li>
<li class="last"><a href="index.php/allgemein.html" title="Qualität" class="last" onclick="this.blur();">Qualität</a></li>
</ul>
</div>nun habe ich den Code von dir in die css hineingetan, aber ich hatte keine änderung:
#logo li a#aktive
{
background-color:#369;
padding:13px 10px 3px 10px;
}
Hallo ottscho.
Ja, aber ich finde in deinem Code keine id aktive.
So kann es auch keine Änderungen geben.
Im HTML Code sollte dann auch so etwas auftauchen.
Übrigens die Werte sind nur Beispiele die mußt du natürlich auch noch anpassen .
Siehe nochmal weiter oben.
Viele Grüße Fritzchen
Ja, aber ich finde in deinem Code keine id aktive.
So kann es auch keine Änderungen geben.
Im HTML Code sollte dann auch so etwas auftauchen.
Übrigens die Werte sind nur Beispiele die mußt du natürlich auch noch anpassen .
<li><a href="#" id="aktive">Navi eins</a></li> Siehe nochmal weiter oben.
Viele Grüße Fritzchen
das aktiv steht auch im LI teil und nicht im A ;)
5. Zeile in meinem HTML Code, siehe oben.
5. Zeile in meinem HTML Code, siehe oben.
Hallo ottscho.
Meinst du das hier in Zeile 5?
Da sehe ich zwei Unterschiede.
1. active ist nicht gleich aktive
2. active ist ein Klasseelement und aktive (siehe unten) ist ein id Element
Viele Grüße Fritzchen
Meinst du das hier in Zeile 5?
<li class="active"><p Da sehe ich zwei Unterschiede.
1. active ist nicht gleich aktive
2. active ist ein Klasseelement und aktive (siehe unten) ist ein id Element
#logo li a#aktiveViele Grüße Fritzchen
stimmt, aber habe es nun hinbekommen. aber muss es noch mal überarbeiten. ich möchte den hover effekt nicht bei aktiven elementen haben...
danke dir
Gruß ottscho
danke dir
Gruß ottscho
