Beste,

ik heb zo lang geprobeerd om de menu te centreren met fload:left..

zie script..

PHP Code:

#headermenu {
        margin-left:25px;
        width:815px;
        height:30px;
        text-align:center;
        border-bottom:1px #350d00 solid;}
        
        #headermenu ul {
            margin:0 auto;
            list-style:none;
            text-align:center;}
            
            #headermenu ul li {
                padding-right:20px;
                padding-top:10px;
                float:left;
                font-weight:bold;
                font-size:10px;
                color:#350d00;
                cursor:pointer;}
            #headermenu ul li a {
                color:#350d00;
                text-decoration:none;}
            #headermenu ul li a:hover {
                color:#72240b;
                text-decoration:none;} 


PHP Code:

<div id="headermenu">
    
        <ul>
        
            <li><a href="" target="_blank">Home</a></li>
            <li><a href="" target="_blank">Agenda</a></li>
            <li><a href="" target="_blank">Nieuws</a></li>
            <li><a href="" target="_blank">Mediatheek</a></li>
            <li><a href="" target="_blank">Bibliotheek</a></li>
            <li><a href="" target="_blank">Kinderboek</a></li>
            <li><a href="" target="_blank">Moslima</a></li>
            <li><a href="" target="_blank">Vraag &amp; antwoord</a></li>
            <li><a href="" target="_blank">Contact</a></li>
            
        </ul>
        
    </div> 


<div align="center" id="headermenu">?

Waarom geen margin: 0 auto; in de headermenu div?

Moet de float:left; niet in de bovenste ID staan?

#headermenu {
float:left;
margin-left:25px;
width:815px;
height:30px;
text-align:center;
border-bottom:1px #350d00 solid;}

float: left is om iets links uit te lijnen.

Doe het als volgt:

Code:

#element {
   margin-left: auto;
   margin-right: auto;
}

Succes ermee ;)

Mvg,
Ton Smets

Origineel gepost door Ton Smets

float: left is om iets links uit te lijnen.

Doe het als volgt:

Code:

#element {
   margin-left: auto;
   margin-right: auto;
}

Succes ermee ;)

Mvg,
Ton Smets

Wat u zegt is hetzelfde als marging: 0px auto;

Origineel gepost door Ferdy de Groot

<div align="center" id="headermenu">?

werkt niet..
Aanvullend bericht:

Origineel gepost door Marc Vleugels

Moet de float:left; niet in de bovenste ID staan?

#headermenu {
float:left;
margin-left:25px;
width:815px;
height:30px;
text-align:center;
border-bottom:1px #350d00 solid;}

neej omdat id niet herhaalt word.. wel li
Aanvullend bericht:

Origineel gepost door Freek G

Waarom geen margin: 0 auto; in de headermenu div?

heb ik geprobeerd maar werkt niet..
Aanvullend bericht:

Origineel gepost door Freek G

Wat u zegt is hetzelfde als marging: 0px auto;

Klopt.. is het zelfde maar hij werkt dus niet..

Gek hoor dat het niet werkt, zoals de code hieronder staat zou het moeten werken.

PHP Code:

#headermenu {
   margin-right: auto;
   margin-left: auto;
   width: 815px;
   height: 30px;
   text-align: center;
   border-bottom: 1px #350d00 solid;
} 


Origineel gepost door Ton Smets

Gek hoor dat het niet werkt, zoals de code hieronder staat zou het moeten werken.

PHP Code:

#headermenu {
   margin-right: auto;
   margin-left: auto;
   width: 815px;
   height: 30px;
   text-align: center;
   border-bottom: 1px #350d00 solid;
} 


werkt ook niet..

link:

Origineel gepost door Redouan Balila

werkt ook niet..

link: http://wajow.com/Ansaar/

De width van je UL staat op 100%.. gaat ook niet werken zo. Geef het eens een fixed width van 'zoveel'px.

Origineel gepost door J. Buitenhuis

De width van je UL staat op 100%.. gaat ook niet werken zo. Geef het eens een fixed width van 'zoveel'px.

jah had het geplaats om te kijken of het dan werkte.. maar helaas is het nog steeds niet gelukt..

Verwijder sowieso de float: left; en zet daar voor in de plaats display: inline;

Pas de css die je in je beginpost hebt staan aan naar dit en het zou moeten werken:

PHP Code:

#headermenu {
    width: 815px;
    height: 30px;
    border-bottom: 1px #350d00 solid;
    margin-left: 25px;
}
        
#headermenu ul {
    float: right;
    position: relative;
    right: 50%;
    list-style: none;
}
            
#headermenu ul li {
    float: left;
    position: relative;
    left: 50%;
    font-weight: bold;
    font-size: 10px;
    color: #350d00;
    cursor: pointer;
    padding-right: 20px;
    padding-top: 10px;
}

#headermenu ul li a {
    color: #350d00;
    text-decoration: none;
}

#headermenu ul li a:hover {
    color: #72240b;
    text-decoration: none;
} 


Een element kun je normaal centreren door het een breedte te geven van een aantal pixels en de linker en rechter margin op "auto" te zetten. In dit geval werkt dat alleen niet, omdat de items in het menu samen geen vaste breedte hebben.

Met een iets ingewikkeldere methode kan het alsnog, en daar heb ik je css op aangepast.
Uitleg over die methode kun je hier vinden.

http://kubes.nl/test.html

Origineel gepost door S. van Laere

Verwijder sowieso de float: left; en zet daar voor in de plaats display: inline;

Thanks het is gefixt..

Oplossing:

PHP Code:

#headermenu {
        margin-left:25px;
        width:815px;
        height:30px;
        text-align:center;
        border-bottom:1px #350d00 solid;}
        
        #headermenu ul {
            margin:0 auto;
            --->>  padding-top:10px;
            list-style:none;
            width: 790px;
            text-align:center;}
            
            #headermenu ul li {
                padding-right:20px;
                --->>  display: inline;
                font-weight:bold;
                font-size:10px;
                color:#350d00;
                cursor:pointer;}
            #headermenu ul li a {
                color:#350d00;
                text-decoration:none;}
            #headermenu ul li a:hover {
                color:#72240b;
                text-decoration:none;}