nicht angemeldet
Menü zentrieren
Liebe/-r wer-weiss-was Experte/-in,
ich habe ein css-Problem. Und zar habe ich ein Kopfbild und darunter ein Drop-Downmenü. Und dieses Menü bekomme ich einfach nicht zentriert.
habe versucht das Ganze in ein Div zupacken und mit text-align. Dann hatte ich aber die Inhalte centriert, nicht das Menü.
Dann habe ich margin:0px auto genommen. Dies wird ignoriert.
margin 0px 10px; dagegen wird genommen.
Doctypes habe ich dreiverschiedene probiert. Alles ohne Erfolg.
##############################################
Der entscheine Code (html):
~~~html
<div class="bildmitte">
<img src="./pix/olivereikel_top_old_1.jpg" alt="olivereikel.de" width="1024px">
</div>
<!--********************************************************************************************-->
<ul class="prodrop4">
<li class="top"><a href="../index.html" class="top_link"><span>home</span></a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li class="top"><a href="links.html" class="top_link"><span>Links</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub1">
<li><a href="html/links_friends.html">Freunde</a></li>
<li><a href="html/links_fun.html">Fun</a></li>
<li><a href="html/links_kino.html">Kino</a></li>
<li><a href="html/links_music.html">Musik</a></li>
<li><a href="html/links_nuetzliches.html">Nützliches</a></li>
<li><a href="html/links_software.html">Software</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#" class="top_link"><span>Diverses</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub2">
<li><a href="html/dsl.html">DSL</a></li>
<li><a href="html/email_knigge.html">Email Knigge</a></li>
<li><a href="html/guestbook.html">Gästebuch</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li class="top"><a href="html/programming.html" class="top_link"><span>Programmierung</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub3">
<li><a href="html/programming_glossar.html">Glossar</a></li>
<li><a href="html/programming_installation.html">Installation</a></li>
<li><a href="html/programming_html.html">html</a></li>
<li><a href="html/programming_css.html">css</a></li>
<li><a href="html/programming_php.html">php</a></li>
<li><a href="html/programming_mysql.php">mysql</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="contact_form.html" class="top_link"><span>Kontakt</span></a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li class="top"><a href="html/impressum.html" class="floatbox" rev="height:600 height:600 scrolling:yes"><span>Impressum</span><!--[if gte IE 7]><!--></a></li>
</ul>
###############################
Und das css:
~~~css
div.bildmitte
{
height:95px;
text-align:middle;
}
.prodrop4 {padding:0 0 0 0px; margin:0px auto; list-style:none; height:25px; background:#3982C4; position:absolute; top:95px; width:1024px;z-index:10; font-family:Verdana, Arial, Helvetica, sans-serif;}
.prodrop4 li.top {display:block; float:left;}
.prodrop4 li a.top_link {display:block; float:left; height:25px; line-height:25px; color:#FFFFFF; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 10px; cursor:pointer;}
.prodrop4 li a.top_link span {
float:left;
display:block;
padding:0 20px 0 0px;
height:25px;
}
.prodrop4 li a.top_link:hover {color:#FFFFFF; line-height:25px;}
.prodrop4 li a.top_link:hover span {}
.prodrop4 li:hover > a.top_link {color:#FFFFFF; line-height:25px;}
.prodrop4 li:hover > a.top_link span {}
.prodrop4 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
.prodrop4 a:hover {visibility:visible; position:relative; z-index:200;}
.prodrop4 li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
.prodrop4 ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.prodrop4 ul.sub1 {width:110px;}
.prodrop4 ul.sub2 {width:110px;}
.prodrop4 ul.sub3 {width:110px;}
.prodrop4 ul.sub4 {width:110px;}
.prodrop4 ul.sub5 {width:110px;}
.prodrop4 :hover ul {left:0; top:25px; background: #D6E2ED; padding:0px; white-space:nowrap; height:auto; z-index:300;}
.prodrop4 :hover ul li {display:block; height:20px; position:relative; font-weight:bold; width:auto;}
.prodrop4 :hover ul li a {display:block; font-size:10px; height:20px; line-height:20px; width:auto; padding:0 10px; color:#000; text-decoration:none;}
.prodrop4 :hover ul li a:hover {
background:#EDF2F8;
color:#000000;
font-weight: bold;
}
ul.autocomplete li a.selected
{
border : 1px solid #444;
/*
background-color : #fcbdb6;
color : #fff;
*/
background-color : #0d94df;
color : #fff;
background-color: #f00;
background-image: url( ../i/conf.gif );
background-position: center right;
background-repeat: no-repeat;
}
ul.autocomplete li a:hover.selected
{
border : 1px solid #e0e0e0;
color : white;
background-color : #f00;
background-image: none;
}
#####################################################
Danke im vorraus für eure Hilfe. olivereikel.de enthält alte Seiten.
Gruß
Ollie
-
Geschmackloser Alias, den du da wählst!