CSS Menü zentrieren

sascha-graf1 · 16.07.2011, 17:33

Hallo,

ich habe mir in HTML/CSS ein wertikales aufklappemnü gemacht.
nun soll das zentriert werden.
leider ohne erfolg. ich kann es nur mit padding-left einrücken, aber ich wil es zentrieren.
kann mir jemand weiter helfen?

HTML:

PHP-Code:

        <div class="menu">

        <ul>

          <li><a href="index.php?page=home">Home</a>

            <ul>

              <li><a href="index.php?page=profil_bearbeiten">

                           Profil bearbeiten</a></li>

                   <li><a href="index.php?page=nachrichten">

                           Nachrichten</a></li>

              <li><a href="index.php?page=geblockte_benutzer">

                          Geblockte Benutzer</a></li>

                     </ul>

          </li>

        </ul>

      </div>

CSS:

PHP-Code:

  .menu { 

  margin:-19; 

  padding-left:450px;

  }

 
.menu ul {

  padding:0; 

  list-style:none; 

  white-space:nowrap; 

  border:0.2px solid #ddd;

  }

  

.menu > ul {

  float: left;

  }

 
.menu ul ul {

  position:absolute; 

  left:-9999px;

  }

.menu > ul > li { 

  position: relative;

  }

 
.menu ul ul {

  background:#fff; 

  padding:0px 0; 

  border:2px solid #ddd;

  -moz-border-radius: 5px;

  -webkit-border-radius: 522px;

  -ms-border-radius: 522px;

  border-radius: 522px;

  }

 
.menu > ul > li > ul {

  border-top:0;

  -moz-border-radius: 0 0 5px 5px;

  -webkit-border-radius: 0 0 5px 5px;

  -ms-border-radius: 0 0 5px 5px;

  border-radius: 0 0 5px 5px;

  }

 
.menu a {

  display:block; font:normal 12px verdana, arial, sans-serif; 

  color:#666; 

  line-height:48px; 

  text-decoration:none;

  padding:0 35px 0 25px;

  }

  

.menu > ul > li > a {

  color:#000; 

  font-weight:bold;

  }

  

.menu ul ul li a {

  line-height:22px;

  }

 
.menu ul li:hover > ul {

  left:0; 

  top:48px;

  }

 
.menu > ul li:hover > a {

  background-color:white;

  }

  

.menu ul ul li:hover > a,

 
.menu ul ul li:hover > a.fly {

  background-color:silver; 

  color:white;

  }

 
.menu > ul > li.close {

  display:none; 

  position:absolute; 

  left:0; 

  top:-25px; 

  width:100%; 

  height:25px; 

  background:none;

  }

  

.menu > ul > li.close a {

  width:100%; 

  padding:0; 

  text-indent:15px; 

  background:#036; 

  color:#fff;

  -moz-border-radius: 5px 5px 0 0;

  -webkit-border-radius: 5px 5px 0 0;

  -ms-border-radius: 5px 5px 0 0;

  border-radius: 5px 5px 0 0;

  }

ChrisB · 16.07.2011, 17:36

Zentrierung und Floating schließen sich aus.

Verzichte auf Floating. Gebe entweder dem Menü eine feste Breite, oder lasse es als inline-block darstellen. Zentrierung dann über die bekannten Vorgehensweisen.

Btw., validiere bitte dein CSS, um Fehler wie margin:-19 zu vermeiden.
Und entsorge das höchstvermutlich überflüssige DIV-Element.

sascha-graf1 · 16.07.2011, 17:47

Hallo,

vielen Dank. Es so funktioniert:

PHP-Code:

  .menu { 
  margin:-19; 
  text-align:center;
  }

.menu > ul {
    display:inline-block;
  }

was meinen Sie damit:
Btw., validiere bitte dein CSS, um Fehler wie margin:-19 zu vermeiden.

sascha-graf1 · 16.07.2011, 17:48

Das Margin -19 benötige ich, damit das menü ganz oben anfängt

ChrisB · 16.07.2011, 17:51

Zitat:

Zitat von sascha-graf1

Btw., validiere bitte dein CSS, um Fehler wie margin:-19 zu vermeiden.

Dass du dein CSS mit dem offiziellen Validator auf Fehler überprüfen lassen sollst: http://jigsaw.w3.org/css-validator/

Dass margin:-19 ein Fehler ist, sollte doch offensichtlich sein - -19 was? Elefantenrüssellängen?

sascha-graf1 · 16.07.2011, 18:38

danke, ich habe es mal validiert und en paar fehler entdeckt
und wie kann ich dann sagen, dass er das menü von obene beinnen soll?
danke

ChrisB · 16.07.2011, 18:40

Zitat:

Zitat von sascha-graf1

und wie kann ich dann sagen, dass er das menü von obene beinnen soll?

Bitte stelle Fragen, die auch nachvollziehbar sind - und keine Einzeiler, bei deinen man raten muss, was dein Problem ist.

sascha-graf1 · 16.07.2011, 18:43

ich habe vorher in meiner CSS-Datei margin:-19; gehabt.
Dies hat besagt, dass mein Menü entwas weiter oben beginnt als normal.
Mit was kann ich das noch machen aueßr margin?

ChrisB · 16.07.2011, 18:46

Gebe doch einfach das margin korrekt an ...

sascha-graf1 · 16.07.2011, 18:53

ich habe es mit margin-top probiert, dass ist der dr Abstand nach oben.
aber das geht nicht mehr höhrer, nur wenn ich mit - (minus) arbeite.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Menüleiste mit CSS erstellen	monty.x	HTML, Usability und Barrierefreiheit	9	16.05.2011 08:55
[Erledigt] Textdatenbank zeilenweise alphabetisch sortieren - Drop Down Menü alphabet	UdoDirk	PHP Tipps 2010	1	24.07.2010 10:45
Drop Down Menü aus text-Datenbank - andere Möglichkeit für erste Zeile?	UdoDirk	PHP Tipps 2010	7	21.07.2010 22:25
Menü mittels php automatisch an Inhalt von text-Datenbank anpassen - Lösung	UdoDirk	PHP Tipps 2010	0	15.07.2010 14:31
[Erledigt] css menü zentrieren	Green_of_Dutch	HTML, Usability und Barrierefreiheit	9	11.06.2010 13:34
[Erledigt] IE Quirks Modus und Menu	chunky	HTML, Usability und Barrierefreiheit	9	10.02.2010 16:27
menu in einer xhtml seite	stripes	PHP Tipps 2009	31	04.01.2009 14:26
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
wie gehts schöner/besser?	AliceD	HTML, Usability und Barrierefreiheit	1	06.09.2005 08:59
Menü aus MySQL Datenbank ausgelesen		PHP Tipps 2005	9	02.06.2005 17:11
PHP Menu mit 2 untermenus		PHP Tipps 2005	3	23.05.2005 00:04
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
[Erledigt] drop down menü werte weitergeben		PHP Tipps 2004	3	24.08.2004 15:08
[Erledigt] PopDown Menü fast fertig!!		HTML, Usability und Barrierefreiheit	3	27.07.2004 00:11

16.07.2011, 17:33
sascha-graf1 Neuer Benutzer Registriert seit: 29.08.2010 Beiträge: 27 PHP-Kenntnisse: Anfänger	CSS Menü zentrieren Hallo, ich habe mir in HTML/CSS ein wertikales aufklappemnü gemacht. nun soll das zentriert werden. leider ohne erfolg. ich kann es nur mit padding-left einrücken, aber ich wil es zentrieren. kann mir jemand weiter helfen? HTML: PHP-Code: <div class="menu"> <ul> <li><a href="index.php?page=home">Home</a> <ul> <li><a href="index.php?page=profil_bearbeiten"> Profil bearbeiten</a></li> <li><a href="index.php?page=nachrichten"> Nachrichten</a></li> <li><a href="index.php?page=geblockte_benutzer"> Geblockte Benutzer</a></li> </ul> </li> </ul> </div> CSS: PHP-Code: .menu { margin:-19; padding-left:450px; } .menu ul { padding:0; list-style:none; white-space:nowrap; border:0.2px solid #ddd; } .menu > ul { float: left; } .menu ul ul { position:absolute; left:-9999px; } .menu > ul > li { position: relative; } .menu ul ul { background:#fff; padding:0px 0; border:2px solid #ddd; -moz-border-radius: 5px; -webkit-border-radius: 522px; -ms-border-radius: 522px; border-radius: 522px; } .menu > ul > li > ul { border-top:0; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -ms-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .menu a { display:block; font:normal 12px verdana, arial, sans-serif; color:#666; line-height:48px; text-decoration:none; padding:0 35px 0 25px; } .menu > ul > li > a { color:#000; font-weight:bold; } .menu ul ul li a { line-height:22px; } .menu ul li:hover > ul { left:0; top:48px; } .menu > ul li:hover > a { background-color:white; } .menu ul ul li:hover > a, .menu ul ul li:hover > a.fly { background-color:silver; color:white; } .menu > ul > li.close { display:none; position:absolute; left:0; top:-25px; width:100%; height:25px; background:none; } .menu > ul > li.close a { width:100%; padding:0; text-indent:15px; background:#036; color:#fff; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.07.2011, 17:36
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Zentrierung und Floating schließen sich aus. Verzichte auf Floating. Gebe entweder dem Menü eine feste Breite, oder lasse es als inline-block darstellen. Zentrierung dann über die bekannten Vorgehensweisen. Btw., validiere bitte dein CSS, um Fehler wie margin:-19 zu vermeiden. Und entsorge das höchstvermutlich überflüssige DIV-Element. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

16.07.2011, 17:47
sascha-graf1 Neuer Benutzer Registriert seit: 29.08.2010 Beiträge: 27 PHP-Kenntnisse: Anfänger	Hallo, vielen Dank. Es so funktioniert: PHP-Code: `.menu { margin:-19; text-align:center; } .menu > ul { display:inline-block; }` was meinen Sie damit: Btw., validiere bitte dein CSS, um Fehler wie margin:-19 zu vermeiden.

16.07.2011, 17:48
sascha-graf1 Neuer Benutzer Registriert seit: 29.08.2010 Beiträge: 27 PHP-Kenntnisse: Anfänger	Das Margin -19 benötige ich, damit das menü ganz oben anfängt

16.07.2011, 18:38
sascha-graf1 Neuer Benutzer Registriert seit: 29.08.2010 Beiträge: 27 PHP-Kenntnisse: Anfänger	danke, ich habe es mal validiert und en paar fehler entdeckt und wie kann ich dann sagen, dass er das menü von obene beinnen soll? danke

16.07.2011, 18:43
sascha-graf1 Neuer Benutzer Registriert seit: 29.08.2010 Beiträge: 27 PHP-Kenntnisse: Anfänger	ich habe vorher in meiner CSS-Datei margin:-19; gehabt. Dies hat besagt, dass mein Menü entwas weiter oben beginnt als normal. Mit was kann ich das noch machen aueßr margin?

16.07.2011, 18:46
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Gebe doch einfach das margin korrekt an ... __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

16.07.2011, 18:53
sascha-graf1 Neuer Benutzer Registriert seit: 29.08.2010 Beiträge: 27 PHP-Kenntnisse: Anfänger	ich habe es mit margin-top probiert, dass ist der dr Abstand nach oben. aber das geht nicht mehr höhrer, nur wenn ich mit - (minus) arbeite.