Forum für CMS/made simple

noober

kennt CMS/ms

Registriert: 26. April 2011

Beiträge: 151

[GELÖST] Ausklappmenü 1te Ebene zentriert ausrichten

Hallo,

ich habe ein Menü mit folgendem Stylesheet auf meiner Seite. Das gesamte Menü steht linksbündig, wie kann ich das Menü (die Menüpunkte der ersten Ebene) zentriert ausrichten? Der Ausklapper soll linksbündig bleiben.
 

.............................................. CSS

#menu {
width : 920px;
height : auto;
}

............................................seperates CSS

#menu_vert {
    margin: 0;
    padding: 0;
}

.clearb {
    clear: both;
}

#menuwrapper {
    background-color: #ffffff;
    width: 920px;
        height: auto;
    border-top: 1px solid #c2a7a7;
    border-bottom: 1px solid #c2a7a7;
        margin: 0;
    padding: 0;
/* IE6 Hack */
    height: 1%;
    width: auto;
}

ul#primary-nav, ul#primary-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul#primary-nav {
    padding-top: 0px;
    padding-left: 0px;
}

ul#primary-nav ul {
    position: absolute;
    top: auto;
    display: none;
}

ul#primary-nav ul ul {
    margin-top: 0px;
    margin-left: -1px;
    left: 100%;
    top: 0px;
}

ul#primary-nav li {
    float: left;
    margin: 0px;
    padding: 0px;
}

#primary-nav li li {
    width: 240px;
    margin-left: 0px;
    margin-top: -1px;
    padding: 0px;
    float: none;
    position: relative;
}

ul#primary-nav li a {
    font-size : 11px;
        text-transform : uppercase;
        color : #4a4a4a;
        letter-spacing : 0.12em;
    padding: 6px 16px 4px 16px;
    display: block;
    text-decoration: none;
}

ul#primary-nav li a:hover {
        color:white;
    background-color: #9d5e5e;
}

ul#primary-nav li li a:hover {
        color:white;
background-image:url(/uploads/images/advisory_menu-bg_hell.png);
}

ul#primary-nav li a.menuactive {
    color: white;
    background-color: #662222;
}

ul#primary-nav li a.menuactive:hover {
    color: white;
    background-color: #9d5e5e;
}

#primary-nav li li a.menuparent span {
    display: block;
}

/* gif for IE6, as it can't handle transparent png */
* html #primary-nav li li a.menuparent span {
/* set your image here, right arrow, 98% over from the left, 100% or 'right' puts it to far */
    background:  url([[root_url]]/uploads/ngrey/parent.gif) no-repeat 98% center;
}

ul#primary-nav li ul a {
    text-align: left;
    margin: 0px;
    position: relative;
    padding: 10px 0px 8px 20px;
    font-weight: normal;
    color: white;
    border-bottom: 1px solid #c2a7a7;
        text-transform : none;
        letter-spacing : 0.025em;
    font-size : 12px;
background-image:url(/uploads/images/advisory_menu-bg_dunkel.png);
}

ul#primary-nav li ul {
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: auto;
    height: auto;
    display: none;
    position: absolute;
    z-index: 999;
}

ul#primary-nav li ul ul {
/*Info: The opacity property is  CSS3, however, will be valid just in CSS 3.1) http://jigsaw.w3.org/css-validator2) More Options chose CSS3 3) is full validate;)*/
    opacity: 95;
/* CSS 3 */
}

/* Styling the appearance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
/* set your image here, dark grey image */
    color: white;
    background-color: #9d5e5e;
}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
    display: none;
}

/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
    display: block;
}

/* IE6 Hacks */
#primary-nav li li {
    float: left;
    clear: both;
}
#primary-nav li li a {
    height: 1%;
}

.................................................................................................

Beitrag geändert von noober (07. September 2011 19:37)

mike-r

arbeitet mit CMS/ms

Registriert: 21. Dezember 2010

Beiträge: 898

Webseite

Re: [GELÖST] Ausklappmenü 1te Ebene zentriert ausrichten

Das wird schwierig (bzw. unmöglich), solange Du die Elemente floatest. Im Groben brauchst Du:

 Hier klicken, um den Code zum Kopieren zu markieren

ul {text-align: center;}
li {display:inline}

Zusätzlich für die Links noch display:inline-block. (IE=Probleme)

wahrscheinlich wird Dir das zu allem Überfluss in Deine Hover-geschichte reinfunken.

Einfachste Alternative: dem #menu links ein halbwegs angemessenes padding verpassen und vom Zentrieren Abstand nehmen.

Beitrag geändert von mike-r (07. September 2011 11:32)

---

Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

noober

kennt CMS/ms

Registriert: 26. April 2011

Beiträge: 151

Re: [GELÖST] Ausklappmenü 1te Ebene zentriert ausrichten

danke, mit dem padding geht.