Centreren Dynamisch menu

**Harings Rob** · 30-09-2010, 13:09

Hallo,

Voor een layout waar ik mee bezig ben probeer ik mijn menu (dynamisch) te centreren.

Dit lukt niet...

Hier is mijn html code (voorbeeld menutexten):

PHP Code:


        <div id="menu">
            <ul>
                <li class="button"><a class="" href="#">Home</a></li>
                <li class="button"><a class="" href="#">Nieuws</a></li>
                <li class="button"><a class="" href="#">Activiteiten</a></li>
                <li class="button"><a class="" href="#">Referenties</a></li>
                <li class="button"><a class="" href="#">Vacatures</a></li>
                <li class="button"><a class="" href="#">Media</a></li>
                <li class="button"><a class="" href="#">Contact</a></li>
            </ul>
        </div>

En mijn stukje CSS:

PHP Code:


/**************/
/*   MENU     */
/**************/

#menu {
    background: #e7f8ff
                url(esdeel_03.gif)

    }
    
#menu ul{
    text-align: center;
    margin: 0 auto;
        }
    
#menu li.button {
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    height: 45px;
    list-style-type: none;
    color: white;
}
#menu li.button a {
    margin-left: 10px;
    margin-top: 15px;
    margin-right: 10px;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

#menu li.button a:hover {
    margin-left: 10px;
    margin-top: 15px;
    margin-right: 10px;
    color: white;
    font-weight: bold;
    text-decoration: underline;
}

#menu .button:hover {
    padding-left: 10px;
    padding-right: 10px;
    height: 45px;
    list-style-type: none;
    color: white;
    background: grey
                url(esdeel_03.png);

}

#menu ul { display: inline-block }
#menu li { display: inline }
#menu a { display: inline-block }

Alvast bedankt moest iemand kunnen helpen!.

Mvg
Rob

**Harmen Vogel** · 30-09-2010, 13:11

voorbeeld/linkje zou erg handig zijn:)

**Jacco van der Plaat** · 30-09-2010, 13:18

<ul class="menu"> in html
ul.menu {
margin: 0 auto;
}
In de css

**Harings Rob** · 30-09-2010, 13:21

Het is lokaal gehost.

in firefox heb ik het aan de praat gekregen maar dan weer IE die moeilijk doet
hier is een afbeelding:

**S. van Laere** · 30-09-2010, 13:24

width: 100%; voor #menu?

**Harings Rob** · 30-09-2010, 13:25

Origineel gepost door Jacco van der Plaat

<ul class="menu"> in html
ul.menu {
margin: 0 auto;
}
In de css

Heb het even geprobeert maar dit is ook niet wat ik zoek, hij zet het wel meer naar midden maar niet in het midden.

Als ik dan

ul.menu {
margin: 0 auto;
padding: 0;
}

doe staat het weer links

**J. Haan** · 30-09-2010, 13:29

Beetje spelen met je margin-right (of padding-right) , dan komt er meer ruimte tussen de knoppen.

**Harings Rob** · 30-09-2010, 13:35

Origineel gepost door J. Haan

Beetje spelen met je margin-right (of padding-right) , dan komt er meer ruimte tussen de knoppen.

ik kan mijn margins wel instellen dat alles mooi centraal staat, maar de teksten kunnen groter of kleiner worden

**rickv** · 30-09-2010, 15:35

Zodra ik "#menu ul { display: inline-block }" weg haal, en "padding: 0;" toe voeg aan "#menu ul{" staat het menu bij mij gewoon netjes in het midden?

Centreren Dynamisch menu