CSS Menü zentrieren

[TH5000]

Hallo ihr User. Ich baue immer noch an meiner Homepage und wollte noch wissen wie ich meine vertikale Menüleiste zuverlässig mit CSS zentrieren kann.
Ich danke euch schon im voraus.

Lg TH5000

 

[SpiceLab]

wollte noch wissen wie ich meine vertikale Menüleiste zuverlässig mit CSS zentrieren kann.

Von einem <ul>-Element ausgehend:

ul {text-align:center}

 

[TH5000]

Sorry, aber ich meinte das ganze Menü, so mit ´dem, was um die Schrift herum ist. Der CSS Code meines Menüs ist wie folgt:

#menu {
    background-color:#4169E1;
    border:2px solid #000000;
    border-radius:10px;
    padding:0.2em;
    position:absolute;
    width:99%;
}

ul {text-align:center}

#menu ul {
    list-style-type:none;
    list-style-image:none;
    margin:0px;
    padding:0px;
}

#menu li.topmenu {
    float:left;
}

.topmenu a {
    float:left;
    text-align:center;
    width:10em;
}

.topmenu ul{
    display:none;
}

.topmenu a, .submenu a{
    background-color:#4169E1;
    border:1px solid #000000;
    border-collapse:collapse;
    color:#000000;
    font-weight:bold;
    margin-top:5%;
    margin-bottom:5%;
    text-decoration:none;
}

.submenu a{
    clear:both; /* special IE6 */
    position:relative;
    width:10em;
}

#menu a:hover, .topmenu.on a {
    background-color:#778899 !important;
    color:#000000;
}

.topmenu:hover ul {
    display:block;
    z-index:500;
}

 

[SpiceLab]

Da für <li> und <a> eine float:left-Regel exisitiert, handelt es sich wohl eher um ein horizontales Menü.

Daher CSS Tip : How to center floating elements

 

[TH5000]

Da hast du recht, das <li> und <a> die float: left-Regel enthalten, aber ohne die würde es nicht vertikal dargestellt. Und das Menü sollte sich ausklappen.

 

[SpiceLab]

In diesem Fall wird position:absolute entfernt, und margin:auto für die horizontale Zentrierung deklariert:

#menu {
  background-color:#4169E1;
  border:2px solid #000000;
  border-radius:10px;
  padding:0.2em;
  /*position:absolute; */ /* auskommentiert = deaktiviert */
  width:99%;
  margin:auto
}

 

[TH5000]

In diesem Fall wird position:absolute entfernt, und margin:auto für die horizontale Zentrierung deklariert:

#menu {
  background-color:#4169E1;
  border:2px solid #000000;
  border-radius:10px;
  padding:0.2em;
  /*position:absolute; */ /* auskommentiert = deaktiviert */
  width:99%;
  margin:auto
}

Das klappt bei mir irgendwie nicht.

 

[SpiceLab]

Das klappt bei mir irgendwie nicht.

Bei mir schon.

 

[TH5000]

Bei mir ist der blaue Streifen da und darunter auf der linken Seite die Menüpunkte.

 

[SpiceLab]

Bei mir ist der blaue Streifen da und darunter auf der linken Seite die Menüpunkte.

Dieses Fehlverhalten, was mit der Zentrierung nichts zu tun hat, resultiert daraus, dass die Floatumgebung abschließend nicht gecleart wird.

http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

 

[Tronjer]

/* special IE6 */

Wo hast du denn das ausgegraben?

 

[SpiceLab]

Wo hast du denn das ausgegraben?

Kurz nach li.topmenu gegoogelt

http://www.silent-fran.de/css/tutorial/aufklappmenue.html