Menu zentrieren?

G

ghost

0
Ich bastel grad an ner HP ( bestehend aus drei Teilen, oben: Titel - Mitte: Menü - Unten: Inhalt < jeweils ein div ). Das Menü hätte ich nun gern zentriert, allerdings sind meine bisherigen Versuche ( align/text-align/div über dem Menü-div und margin/... ) nicht so ganz das ware gewesen.

Nun wollt ich mal euch fragen ob Ihr ne Idee habt was ich machen könnte!?

Style-CSS des Menüteils
PHP: 
#menu{
/*float: left;
width: 13em;*/
height: 35px;
border: 1px solid red;
}

#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
#pmenu {margin:5px 0 200px 15px;}
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a{background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu > li:hover > ul {left:0; top:24px;}

Einbau des Menüs in der HTML-Datei:
PHP: 
  <div id="menu">

<?php
include ("menue.html"); <<< menue.html kann ich nachreichen wenn benötigt
?>

 </div>
 
Ist eingefügt aber jetzt ist das Menü linksbündig und klebt oben am darüberliegenden div, ist also nicht mehr vertikal zentriert.
 
Kannst du mal den resultierenden HTML-Code posten? Ohne kann ich nur mutmassen ob #pmenu oder #menu dein Menu ist. :)

Edit: Vertikal zentriert ist es schon? Und du willst eine horizontale Zentrierung?
 
Zuletzt bearbeitet:
Menüteil bei der endgültigen Ausgabe im Browser:
PHP: 
  <div id="menu">    <ul id="pmenu"> <li><a href="index.php">Home</a></li> <li><a href="project.php">Projekte »</a> 	<ul> 	<li><a href="peuler.php">Projecteuler.net</a></li> 	<li><a href="pprog.php">Programmieren</a></li> 	</ul> 	</li> <li><a href="chili.php">Chilis</a></li> <li><a href="ahnen.php">Ahnenforschung</a></li> <li><a href="sprachen.php">Sprachen »</a> 	<ul> 	<li><a href="senglisch.php">Englisch</a></li> 	<li><a href="sspanisch.php">Spanisch</a></li> 	</ul> 	</li> <li><a href="bg.php">Browsergames »</a> 	<ul> 	<li><a href="bstaemme.php">Die Stämme</a></li> 	<li><a href="bfreewar.php">Freewar</a></li> 	<li><a href="bgespielt.php">gespielte BGs</a></li> 	</ul> 	</li> <li><a href="links.php">Links</a></li> </ul>  </div>

menue.html das includet wird:
PHP: 
  <ul id="pmenu">
<li><a href="index.php">Home</a></li>
<li><a href="project.php">Projekte »</a>
	<ul>
	<li><a href="peuler.php">Projecteuler.net</a></li>
	<li><a href="pprog.php">Programmieren</a></li>
	</ul>
	</li>
<li><a href="chili.php">Chilis</a></li>
<li><a href="ahnen.php">Ahnenforschung</a></li>
<li><a href="sprachen.php">Sprachen »</a>
	<ul>
	<li><a href="senglisch.php">Englisch</a></li>
	<li><a href="sspanisch.php">Spanisch</a></li>
	</ul>
	</li>
<li><a href="bg.php">Browsergames »</a>
	<ul>
	<li><a href="bstaemme.php">Die Stämme</a></li>
	<li><a href="bfreewar.php">Freewar</a></li>
	<li><a href="bgespielt.php">gespielte BGs</a></li>
	</ul>
	</li>
<li><a href="links.php">Links</a></li>
<li><a href="blog.php">Blog/News</a></li>
</ul>

Gh0st-squad << habs mal schnell in meine ProbierHP eingebaut
 
Da Du die Inhalte von #menu floatest, kannst Du #menu nicht auf dem üblichen Weg zentrieren. Du musst dafür sorgen, dass das floaten wieder gecleart wird, dann wirkt auch "margin: auto;".

Eine vertikale Zentrierung wirst Du so jedoch nicht erreichen, nur eine horizontale.
 
Das "clear"en hab ich jetzt noch nicht porbiert, nur schnell mal width auf 800 gesetzt ( gleich den Wert genommen *g* ) - Nun ist das Menü mittig klebt aber immer noch am oberen DivRand.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben