centreer probleem met floating volgende|vorige links

[hilarisch]

Ik heb onderaan mijn pagina's een menuutje staan met links naar volgende en vorige pagina's plus een numeriek lijstje van de beschikbaar pagina's.

vb

code:

<< vorige                  pagina: 1 2 3 4 5                volgende >>

Onderdeel van de code:

HTML:

<div id="navigation">
    <p class="prev"><< <a href="">vorige</a></p>
    <p class="next"><< <a href="">vorige</a></p>
    <ul><li>1</li></ul>
</div>

Bijbehorend stylesheet:

Cascading Stylesheet:

#navigation {
    text-align: center;
}

#navigation p, #navigation ul {
    display: inline;
}

#navigation p.prev {
    border-top: 1px solid #780176;
    float: left;
    text-align: left;
    width: 30%;
}

#navigation p.next {
    border-top: 1px solid #780176;
    float: right;
    text-align: right;
    width: 30%;
}


#navigation ul {
    text-align: center;
}


#navigation ul li {
    display:inline;
    list-style-type:none;
}

Dit werkt prima op het moment dat beide pointers (zowel vorige als volgende) aanwezig zijn. Beide pointers staan uiterst links en uiterste rechts. En de list staat gecentreerd.

Het probleem ontstaat op het moment dat er maar 1 pointer beschikbaar is. Dan staat de list niet in het midden maar naar de kant waar geen pointer staat.

code:

               pagina: 1 2 3 4 5                        volgende >>

Ik ben al een tijdje aan het klooien geweest met verschillende display types (display:block) e.d. maar ik heb nog geen oplossing gevonden.

Het toevoegen van een lege <p class=""></p> is helaas geen optie doordat de links automatisch worden gecreeerd.

Heeft iemand een suggestie??

[ Voor 12% gewijzigd door hilarisch op 13-07-2005 23:50 ]

[crisp]

waarom positioneer je die pointers dan niet absoluut binnen #navigation? Een eventuele overlap met je pagina-links kan je voorkomen met wat padding/margin op je UL

[hilarisch]

heb het volgende geprobeerd

Cascading Stylesheet:

#navigation {
    text-align: center;
}

#navigation p, #navigation ul {
    display: inline;
}

#navigation p.prev {
    border-top: 1px solid #780176;
    text-align: left;
    position: absolute;             <--
    left: 0px;                       <--
}

#navigation ul {
    text-align: center;
}

#navigation p.next {
    border-top: 1px solid #780176;
    position: absolute;             <--
    right: 0px;                     <--
    text-align: right;
}

Dit werkt ook niet. De list is nu wel in alle gevallen netjes gecentreerd. Maar de pointers blijven niet binnen de <div id="navigation"></div> maar gaan helemaal naar de uitersten van het browser venster.

Ik heb de #navigation geen hard coded width mee gegeven want die wordt hem wel opgelegd door de hogere structuur van de site. Als ik #navigation een border geef dan zie ik dat dit wel goed gaat.

Hoe kan ik er voor zorgen dat de absolute waarde vanuit de div#navigation wordt gepakt.

Ik test overigens met FireFox

[thomaske]

hilarisch schreef op donderdag 14 juli 2005 @ 00:18:

Dit werkt ook niet. De list is nu wel in alle gevallen netjes gecentreerd. Maar de pointers blijven niet binnen de <div id="navigation"></div> maar gaan helemaal naar de uitersten van het browser venster.

Dan moet je zorgen dat je #navigation position:relative meegeeft, dat zorgt ervoor dat de onderliggende absoluut gepositioneerde elementen gepositioneerd worden obv de afmetingen en positie van #navigation

[ Voor 23% gewijzigd door thomaske op 14-07-2005 00:53 ]

[hilarisch]

thanks, dit werkt.

Weer wat geleerd. Nooit geweten dat position: relative invloed had op onderliggende elementen. Dacht dat het alleen invloed had op de positie van het eigen element