Li's zijn gefloat maar geheel moet ook gecentreerd

[Verwijderd]

Ey,

Laatst had ik al een klein probleempje met mijn tv gids waar ik op T.net goed mee ben geholpen maar nu dus weer een: ik heb bovenaan in de code, voor het gemak hieronder nog even gequote, een lijstje staan die je terugziet op de website in de vorm van een balk bovenaan de pagina. Ik wil echter de items horizontaal naast elkaar weergeven. Dat lukt prima, de tekst was echter eerst netjes gecentreerd en nu wil dat niet meer lukken, blijkbaar werken text-align en float elkaar tegen.

Weet iemand hoe ik wat ik nu heb in het midden kan zetten?

De HTML:

<div id="linkbalk">
<ul>
<li><a href="http://www.ikhebje.nl">Vanavond.tv wordt makkelijk gevonden via Ikhebje.nl</a></li>
<li><a href="http://www.kevinkeene.nl">Scripter vanavond.tv</a></li>

</ul>
</div>

De CSS:

#linkbalk {
height: 21px;
width: 100%;
background-image: url(images/linkbalk.png);
} #linkbalk ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
float: middle;
} #linkbalk li {
margin: 0 10px 0 10px;
padding: 4px 0 0 0;
float: left;
}

Hopelijk kan iemand me helpen!

Michiel.

[Kiphaas7]

Je hebt google zeker nog niet geprobeerd?

Een van mijn eerste hits....

http://css.maxdesign.com.au/listamatic/

[RobIII]

Als je code (HTML/CSS is ook code) post, gebruik dan code tags

[H004]

Geef #linkbalk ul eens een vaste width...

En float: middle? Middle wordt gebruikt om iets verticaal te centreren, dus dan zou het nog float: center; moeten zijn, maar ook dat bestaat niet...

[ Voor 72% gewijzigd door H004 op 30-09-2007 10:03 ]

[glashio]

HTML:

<style type="text/css">
    #linkbalk {
        background-image: url(images/linkbalk.png);
        overflow : hidden;
        padding-top : 4px;
        text-align : center;
        width: 100%;
        height : 21px;
    }
    #linkbalk UL {
        list-style-type: none;
        padding : 0px;
        margin : 0px;
    }
    #linkbalk LI {
        display : inline;
        margin : 0px 10px 0px 10px;
    }
</style>

<div id="linkbalk">
    <ul>
        <li><a href="http://www.ikhebje.nl">Vanavond.tv wordt makkelijk gevonden via Ikhebje.nl</a></li>
        <li><a href="http://www.kevinkeene.nl">Scripter vanavond.tv</a></li>
    </ul>
</div>

Om je linkbalk altijd een hoogte van 21pixels te laten behouden tijdens het resizen van je wijdte, is een overflow:hidden; nodig. Het float'en i.c.m. met margin-left : auto is mij niet gelukt

[Verwijderd]

H004 schreef op zondag 30 september 2007 @ 10:00:
Geef #linkbalk ul eens een vaste width...

En float: middle? Middle wordt gebruikt om iets verticaal te centreren, dus dan zou het nog float: center; moeten zijn, maar ook dat bestaat niet...

Werkte allebei niet correct...

Kiphaas7 schreef op zondag 30 september 2007 @ 01:13:
Je hebt google zeker nog niet geprobeerd?

Een van mijn eerste hits....

http://css.maxdesign.com.au/listamatic/

http://css.maxdesign.com.au/listamatic/horizontal01.htm

Die heeft het opgelost! Bedankt!

[H004]

Verwijderd schreef op zondag 30 september 2007 @ 11:03:
Werkte allebei niet correct...

Hoezo "allebei"? Ik zeg toch dat float: middle of center niet bestaat?

en

Cascading Stylesheet:

 #linkbalk {
    height: 21px;
    width: 100%;
    background-image: url(images/linkbalk.png);
    } 
    #linkbalk ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0px;
    width:  800px; // Vaste waarde!!
    } 
    #linkbalk li {
    margin: 0 10px 0 10px;
    padding: 4px 0 0 0;
    float: left;
    }

werkt perfect.

[Verwijderd]

Is het niet gewoon het makkelijkst om de LI's display:inline te geven (i.p.v. de float:left natuurlijk) en de UL text-align:center?

[ Voor 14% gewijzigd door Verwijderd op 30-09-2007 17:22 ]

[Kiphaas7]

Verwijderd schreef op zondag 30 september 2007 @ 17:21:
Is het niet gewoon het makkelijkst om de LI's display:inline te geven (i.p.v. de float:left natuurlijk) en de UL text-align:center?

display inline houdt volgens mij expliciet in dat de hoogte wordt bepaald door de text, wat me een ongewenste situatie lijkt aangezien hij 21px als hoogte opgeeft.

[crisp]

line-height?

[Kiphaas7]

crisp schreef op maandag 01 oktober 2007 @ 02:13:
line-height?

Wat niet ze lekker werkt als height. Tenminste, als ik er mee speel.