nicht angemeldet
hi zusammen,
jetzt hat alles super gefunzt (das mit der Linie) und dennoch habe ich leider einen punkt immer noch nicht zum Laufen gebracht. Im aktuellen IE (7) und firefox (3) läuft das teil genauso wie ich es brauche nur in den älteren ieS geht es immer noch nicht - und zwar´sind die abstände zwischen den Menüpunkten Ebene1 viel zu groß. Vielleicht hab ich sie auch falsch definiert mit paddig-top...
Anbei der ganze code - es ist ein Derivat von den selfhtml Navleisten und ich fummle schon den ganzen Tag daran herum - das ganze soll mein erstes großes Projekt mit reiner css Formatierung werden.
Tausend Dank für die Hilfe falls es dafür überhaupt eine Lösung gibt - oder muß ich alles ganz anders coden?
viele grüße aus dem süden...
bebbi
und hier nun das gute stück:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit mehreren Ebenen</title>
<style type="text/css">
body {
font-size: 11px;
font-family: Verdana, Arial;
color: #C1D3E6;
background-color: #999999;
}
ul#mainnav {
width: 171px;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
}
ul#mainnav li {
list-style: none;
margin: 0px;
padding-top: 3px;
}
ul#mainnav li ul {
margin: 0 0 0 0px;
padding: 0px;
}
ul#mainnav li ul li {
margin: 0px 0px;
padding-top: 0px;
}
ul#mainnav li a, ul#mainnav li span {
font-size: 11px;
font-family: Verdana, Arial;
color: #054E98;
display:block;
padding: 8px 14px 8px 0px;
text-decoration: none;
background-color: #EBEBEB;
text-align: right;
font-weight: bold;
}
ul#mainnav li a:hover, ul#mainnav li span {
background-color: #09519D;
color: #FFFFFF;
}
ul#mainnav li ul li a, ul#mainnav li ul li span {
color: #09519D;
display: block;
padding: 8px 14px 8px 0px;
text-decoration: none;
background-color: #E2EAF4;
font-weight: normal;
}
ul#mainnav li ul li a:hover, ul#mainnav li ul li span {
background-color: #F6F9FC;
color: #061C34;
border-width: 5px 9px;
border-style: solid;
border-color: #E2EAF4;
padding: 3px 5px 3px 0px;
}
.hr1 {
height: 1px;
background-image: url(img/bkg_mainnav_sub1x.png);
overflow: hidden;
}
</style>
</head>
<body>
<h1>Mehrere Navigationsebenen</h1>
<ul id="mainnav">
<li><a href="#Beispiel">Ebene 1 - A</a></li>
<li><span>Ebene 1 - B - aktiv</span>
<ul>
<li><a href="#Beispiel">Ebene 2 - A</a><div class="hr1"></div></li>
<li><span>Ebene 2 - B - aktiv</span><div class="hr1"></div></li>
<li><a href="#Beispiel">Ebene 2 - C<br>zweizeilig</a></li>
</ul>
</li>
<li><a href="#Beispiel">Ebene 1 - C</a></li>
<li><a href="#Beispiel">Ebene 1 - D</a></li>
</ul>
</body>
</html>
Gunnar Bittersmann