Frage stellen
ich bin nahe der Verzweiflung sämtliches googlen und nach Fragen bisher blieb erfolglos... .
Ich hoffe somit nun hier um Hilfe. Folgendes Problem:
Ich möchte den Inhalt eines Div Kontainers gerne Mittig von der Seite haben... . Klappt auch ohne weitere Inhalte im Container selbst Prima sprich:
- Code: Alles auswählen
<div class="balken_menue"><img src="images/menue.png" border="0" /></div>
Mit den Parametern:
- Code: Alles auswählen
.balken_menue{
width: 100%;
height: 70px;
position: relative;
top: 360px;
background-image: url(images/bg_menue.png);
background-repeat: repeat-x;
text-align: center;
}
kein Problem. Jedoch kommt nun ein Kalppmenü mit dazu. Und schon bringt es mir das Menü ganz an den linken Rand.
Der ganze Container sieht nun so aus:
- Code: Alles auswählen
<div class="balken_menue">
<div id="navcontainer">
<ul id="navi">
<li style="width:88px;"><a href="#"><img src="images/menue/home.png" border="0" /></a>
<ul>
<li class="li_children"><a href="#">News aktuell</a></li>
<li class="li_children"><a href="#">News archiv</a></li>
</ul>
</li>
<li><a href="#"><img src="images/menue/termine.png" border="0" /></a></li>
<li style="width:60px;"><a href="#"><img src="images/menue/f2.png" border="0" /></a>
<ul>
<li class="li_children"><a href="#">Fahrer</a></li>
<li class="li_children"><a href="#">Team</a></li>
<li class="li_children"><a href="#">Technik</a></li>
<li class="li_children"><a href="#">Boot</a></li>
</ul>
</li>
<li style="width:60px;"><a href="#"><img src="images/menue/f4.png" border="0" /></a>
<ul>
<li class="li_children"><a href="#">Fahrer</a></li>
<li class="li_children"><a href="#">Team</a></li>
<li class="li_children"><a href="#">Technik</a></li>
<li class="li_children"><a href="#">Boot</a></li>
</ul>
</li>
<li style="width:102px;"><a href="#"><img src="images/menue/history.png" border="0" /></a>
<ul>
<li class="li_children"><a href="#">Statistik</a></li>
<li class="li_children"><a href="#">Geschichte</a></li>
</ul>
</li>
<li><a href="#"><img src="images/menue/promotion.png" border="0" /></a></li>
<li><a href="#"><img src="images/menue/kontakt.png" border="0" /></a></li>
</ul>
</div>
<!---<br /><img src="images/menue.png" border="0" />--->
</div>
Der dazu gehörige CSS Code so:
- Code: Alles auswählen
.clear {
clear:both;
}
/*###################*/
/* Beginn Navigation */
/*###################*/
#navi, #navi ul {
list-style-type:none;
margin:0;
padding:0;
} /* Style-Reset */
#navi li {
float:left;
} /* Horizontale Anordnung */
#navi li ul {
display:none;
} /* Normalzustand eingeklappt */
#navi li:hover ul {
display:block;
} /* Ausgeklappt */
/*##################*/
/* Navigation Style */
/*##################*/
#navcontainer {
position:relative;
z-index:1000;
//left:23%;
}
#navi {
position:absolute;
}
#navi li {
background-color:#000;
}
#navi ul li {
}
#navi a {
font-weight:bold;
text-align:center;
}
#navi a:link, #navi a:visited {
color:#B2A06B;
text-decoration:none;
}
#navi a:active, #navi a:hover {
color:#FFF;
text-decoration:none;
}
.li_children{
width: 100%;
border-bottom: 1px solid #B2A06B;
border-right: 1px solid #B2A06B;
border-left: 1px solid #B2A06B;
}
Wie bekomme ich den Inhalt von balken_menue mittig?
Bisherige Lösungsversuche von margin-left: auto; margin-right: auto; und margin: 0 auto; blieben erfolglos.
Kann mir wer helfen oder ist mir nicht zu Helfen?
Grüße
