Hackerboard Wiki HaboBlog
Hackerboard bei Facebook Hackerboard bei Google+ Hackerboard bei Twitter

[HaBo]

 
(Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI...

Menu zentrieren?

Diskussion: Menu zentrieren? im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Anzeige Ich bastel grad an ner HP ( bestehend aus drei Teilen, oben: Titel - Mitte: Menü - Unten: Inhalt ...

Antwort
Alt 24.10.11, 18:53   #1 (permalink)
 
Registriert seit: 24.07.05
ghost Leistung: Z3
Likes: 3
Standard Menu zentrieren?

Anzeige

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-Code:
#menu{
/*float: left;
width: 13em;*/
height35px;
border1px 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-Code:
  <div id="menu">

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

 </div>
ghost ist offline   Mit Zitat antworten
Alt 24.10.11, 19:03   #2 (permalink)
 
Benutzerbild von she3p
 
Registriert seit: 07.05.07
she3p Leistung: 8086
Likes: 19
Standard

Code:
#pmenu {
    margin:auto
}
__________________
she3p ist offline   Mit Zitat antworten
   
HaBOT
 
- Anzeige -

Werbung ist gerade online    
Alt 24.10.11, 19:19   #3 (permalink)
Themenstarter
 
Registriert seit: 24.07.05
ghost Leistung: Z3
Likes: 3
Standard

Ist eingefügt aber jetzt ist das Menü linksbündig und klebt oben am darüberliegenden div, ist also nicht mehr vertikal zentriert.
ghost ist offline   Mit Zitat antworten
Alt 24.10.11, 19:54   #4 (permalink)
 
Benutzerbild von she3p
 
Registriert seit: 07.05.07
she3p Leistung: 8086
Likes: 19
Standard

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?
__________________

Geändert von she3p (24.10.11 um 19:57 Uhr)
she3p ist offline   Mit Zitat antworten
Alt 24.10.11, 20:45   #5 (permalink)
Themenstarter
 
Registriert seit: 24.07.05
ghost Leistung: Z3
Likes: 3
Standard

Menüteil bei der endgültigen Ausgabe im Browser:
PHP-Code:
  <div id="menu">    <ul id="pmenu"> <li><a href="index.php">Home</a></li> <li><a href="project.php">Projekte &#187;</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&auml;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-Code:
  <ul id="pmenu">
<
li><a href="index.php">Home</a></li>
<
li><a href="project.php">Projekte &#187;</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 &#187;</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 &#187;</a>
    
<ul>
    <
li><a href="bstaemme.php">Die St&auml;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
ghost ist offline   Mit Zitat antworten
Alt 24.10.11, 21:42   #6 (permalink)
 
Registriert seit: 20.01.03
Zwirni Leistung: Z3
Likes: 0
Standard

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.
Zwirni ist offline   Mit Zitat antworten
Alt 24.10.11, 23:29   #7 (permalink)
 
Registriert seit: 17.01.06
Oi!Alex Leistung: 8086
Likes: 7
Standard

Oder man vergibt für #pmenu eine feste Breite, width:800px; (geschätzter Wert)
Oi!Alex ist offline   Mit Zitat antworten
Alt 25.10.11, 10:51   #8 (permalink)
Themenstarter
 
Registriert seit: 24.07.05
ghost Leistung: Z3
Likes: 3
Standard

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.
ghost ist offline   Mit Zitat antworten
Alt 25.10.11, 12:51   #9 (permalink)
 
Benutzerbild von she3p
 
Registriert seit: 07.05.07
she3p Leistung: 8086
Likes: 19
Standard

Zitat:
Zitat von ghost Beitrag anzeigen
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.
Na dann füg doch einfach noch einen Abstand ein?

Code:
#pmenu {
    margin-top:15px;
}
__________________
she3p ist offline   Mit Zitat antworten
Antwort
   
- Anzeige -

Werbung ist gerade online    

[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » Menu zentrieren?
Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind aus
Pingbacks sind aus
Refbacks sind aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Div zentrieren IE8/IE7 Dawen (Web-) Design und webbasierte Sprachen 5 12.07.10 08:15
CSS CSS Menu weau (Web-) Design und webbasierte Sprachen 5 27.05.10 10:41
Quirks: Div Zentrieren THRALL (Web-) Design und webbasierte Sprachen 8 07.10.08 14:49
Avenger (Web-) Design und webbasierte Sprachen 11 13.07.08 21:49
[xhtml 1.0] standardkonformes zentrieren sieben (Web-) Design und webbasierte Sprachen 1 18.03.03 14:22


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61