Frage stellen
ich habe einen navigationsbereich welcher mit listenelementen arbeitet.
die erste <ul> <li> <a> navigationsebene wird in einer zeile dargestellt.
quasi in der art
link1_1 : link1_2 : link1_3 : link1_4 usw.
wenn ich mich in der zweiten navigationsebene <ul> <ul> <li> <a> befinde möchte ich, dass die links (sofern überhaupt vorhanden) in einer neuen zeile unterhalb der ersten ebene stehen, jedoch ganz am anfang quasi unterhalb von link1_1 und dann nach rechts hin aufgefüllt werden.
für 3 unterlinks von 1_4 sehe das ganze wie folgt aus.
quasi in der art: (wobei zwischen den zeilen jedoch später ein größerer vertikaler abstand als hier dargestellt sein soll):
link1_1 : link1_2 : link1_3 : link1_4
link2_4_1 : link2_4_2 : link2_4_3
hierzu habe ich verschiedenes ausprobiert und das ganze klappt schon mal ansatzweise.
zuerst hatte ich die 2. ebene per position:absolute usw. dort hinbewegt, das hat mir jedoch das ganze nachfolgende design zerschossen, da der content bereich immer durch den 2. navigationsbereich überlappt wurde. ein festes margin von der navi nach unten bzw. vom content nach oben möchte ich auch nicht verwenden, da sich sonst ein zu großer leerraum (im falle das keine 2. navigationsebene vorhanden ist) ergibt.
mittlerweile habe ich es für ein beispiel geschafft, das ganze (den <ul> <ul> div) in der gewünschten art und weise zu positionieren, so dass im falle das keine 2. navigationsebene vorhanden ist, das nachfolgende design passt. hierzu habe die zweite ebene per margin-left: -468px; an die gewünschte position gebracht habe.
da jedoch nicht immer die -468px die richtigen sind, möchte ich es irgendwie dynamisch hinbekommen, habe aber keinen plan wie es gehen könnte. soetwas wie -100% funktioniert auch nicht, da sich die 100% auf die weite des listen elements welches 117px groß ist beziehen. sofern ich also das ganze bei 3 unterlinks entsprechend verschieben will muss ich entweder das ganze -400% verschieben oder -(4*117px).
zum besseren verständnis habe ich euch meinen code beigelegt:
- Code: Alles auswählen
<html>
<head>
<style>
body {
font: 10pt "verdana, arial, sans-serif";
background-color: #e4e4e4;
margin: 0 auto 0;
margin-top: 10px;
z-index: 0;
}
#container {
width: 800px;
margin: 0 auto 0;
background-color: #ffffff;
z-index: 1;
}
.clearer {
clear: both;
}
#headerNav {
margin: 0 auto 0;
padding: 0;
width: 585px;
background-color: #000000;
}
#navcontainer {
background-color: #999999;
min-height: 38px;
height: 38px;
width: 585px;
z-index: 3;
}
#navcontainer #current {
background-color: #ffcc23;
height: 28px;
color: #fff;
}
#navcontainer #current:hover {
}
#navcontainer .currentAncestor {
}
/* Parent - Level 0 */
#navcontainer ul{
list-style: none;
margin: 0;
padding: 0px;
z-index: 5;
}
#navcontainer li {
float: left;
width: 117px;
}
#navcontainer a {
float: left;
text-align: center;
height: 28px;
background-color: #D4EEF7;
width: 117px;
padding-top: 12px;
text-decoration: none;
color: #292929;
font-size: 12px;
}
#navcontainer a:hover {
background-color: #0af;
color: #fff;
}
#navcontainer a:active {
background-color: #D18031;
}
#navcontainer ul ul {
clear: left;
position: relative;
margin: 70 -468 0; /* <------ passt nur für das eine beispiel*/
width: 580px;
height: 38px;
}
#navcontainer ul ul li {
}
#navcontainer ul ul a {
}
#contentContainer {
margin: 0 auto 0;
min-height: 200px;
width: 520px;
z-index: 9;
background-color: #ff0043;
float: left;
}
#contentContainer #content {
background-color: #ffcc23;
width: 500px;
height: 180px;
margin: 10px;
}
#sidebarContainer {
margin-top: 0px;
width: 280px;
min-height: 200px;
background-color: #999999;
float: right;
}
#sidebarContainer #sidebar {
width: 260px;
height: 180px;
margin: 10px;
background-color: #cccccc;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="headerNav">
<div id="navcontainer">
<ul>
<li><a href="#"
rel="self">Link1_1</a></li>
<li><a href="#"
rel="self">Link1_2</a></li>
<li><a href="#"
rel="self">Link1_3</a></li>
<li><a href="#"
rel="self">Link1_4</a></li>
<li>
<a href="#"
rel="self" id="current"
name="current">Link1_5</a>
<ul>
<li><a href="#"
rel="self">Link2_5_1</a></li>
<li><a href="#"
rel="self">Link2_5_2</a></li>
<li><a href="#"
rel="self">Link2_5_3</a></li>
</ul>
</li>
</ul>
</div><!-- end navcontainer -->
</div><!-- end navHeader -->
<div class="clearer"></div>
<div id="contentContainer">
<div id="content">
content
</div><!-- end content -->
</div><!-- end contentContainer -->
<div id="sidebarContainer">
<div id="sidebar">
sidebar
</div> <!-- end sidebar -->
</div> <!-- end sidebarContainer -->
</div><!-- end container --></body>
</html>
ihr könnt ja mal ausprobieren. vielleicht habt ihr ja eine idee?
vielen dank im voraus.
gruß
cssRookie