Navigation

N

neunauge

Aktives Mitglied
Hallo,

ich habe Probleme mit einer Navigation. Im IE werden bei Einträgen der zweiten Ebene Bullets vor den Einträgen angezeigt, Fire fox hat kein Problem. Leider kann ich den Fehler nicht finden.
Kann mir jemand einen Tipp geben?

Gruss Bernd

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
<head>
<style type="text/css">
/* CSS Tabs */
#navcontainer {
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}

ul#navlist {
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}

ul#navlist li {
display: block;
margin: 0;
padding: 0;
}


ul#navlist li a {
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a {
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
-->
</style>
</head>

<body>

<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li><a href="Home.html">Home</a></li>
<li id="active"><a id="current" href="Services.html">Services</a></li>
<ul> <li><a href="Products.html">Products</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
</ul> <li><a href="About.html">About</a></li>

</ul>
</div>
</body>
</html>
 
wink.gif


ein ganz kleiner fehler....




CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
<head>
<style type="text/css">
/* CSS Tabs */
#navcontainer
{
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}

/* die ableitung der ul's auf muss auch gemacht werden*/
ul,
ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}

ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}


ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a
{
width: auto;
}

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
-->
</style>
</head>

<body>

<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li><a href="Home.html">Home</a></li>
<li id="active"><a id="current" href="Services.html">Services</a></li>
<ul> <li><a href="Products.html">Products</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
</ul> <li><a href="About.html">About</a></li>

</ul>
</div>
</body>
</html>



persönlich würde ich jedoch das css anders aufbauen... nicht so:

ul#navlist

sondern so:

#navcontainer ul
{
.....
}

#navcontainer li
{
.....
}

so sprichst du alle ul, resp. li tags innerhalb des containers navcontainer an.

ist ein bisschen einfacher

gruss

spaceman007
 
Hallo Spaceman,

besten Dank für die schnelle Hilfe. Ich hatte hier schon etliche Zeit verbrannt. Leider habe ich die Tücken der Navigation und vor allem die Fallen der unterschiedlichen Browser noch nicht richtig verstanden. Ich hatte auch versucht, den Weg zu gehen, den du vorschlägst, konnte mir aber den Unterschied nicht recht erklären.

Ich habe schon viel im Netz gesucht, aber eine verständliche Abhandlung zu dem Thema hab ich noch nicht gefunden.

Jetzt bin ich aber einen Schritt weiter. Nachmals Danke und Gruss.

Bernd
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben