[CSS] List probleempje

[Blue-eagle]

Wat ik wil is het volgende:



Let niet op de opmaak, 't is gewoon een snel photoshop creatie'tje om uit te leggen wat het probleem is.

Zoals je misschien al ziet wil ik een list-icoon voor een <li> hebben die groter (hoger) is dan de <li> of <a> waar de tekst in staat. Het betreft hier een "active" status, dus als men daadwerkelijk op dat onderdeel geklikt heeft. Dit is dus geen mouse-over (a:hover) status, wat weer meer problemen zou meebrengen.

Hoe kan ik dit het beste oplossen? Het liefst gebruik ik gewoon een list waar ik de <li> tag de class "active" mee geef. Helaas kom ik nu niet verder dan een halve "list icoon" te projecteren

Voorbeelden hoeft niet, een duidelijke how-to is voldoende Ik zit 'n beetje vast

[Suffie]

heb je in css niet ook een a:active gedeelte? of heb ik dat zelf verzonnen en werkt het toevallig bij mij

[Blue-eagle]

Ja dat heb je wel maar da's het probleem niet, het probleem is dat het icoon met de pijl erin hoger is dan de <li> of <a> waar hij in staat, en dus afgekapt wordt. Dit is op te lossen door meer ruimte tussen de list items te plaatsen, maar da's lelijk.

Dus: hoe krijg ik hem passend?

[coubertin119]

Je kan doormiddel van CSS3 de elementen erboven en eronder de rest van de afbeelding geven, en het niet-afgekapte deel bij de #active zetten, maar dan werkt het niet in een hele hoop browsers, als het al geïmplementeerd is.
Je kan ook doormiddel van JS een divje met de afbeelding absoluut daar positioneren, alhoewel dat een érg ranzige oplossing is. Ik zou dan eigenlijk opteren voor ofwel een oplossing met een kleine dynamische stylesheet, waarbij je per pagina opgeeft wat de background-position is van die kleine afbeelding in de UL of waarbij je dat met Javascript oplost.

[Blue-eagle]

Het probleem is wel dat de site in IE5 moet werken Dus helaas geen geavanceerde CSS Javascript is wel een oplossing natuurlijk maar gezien het grote publiek van de site wil ik liever geen Javascript gebruiken voor de layout. Het is me teveel werk en het gaat gewoon niet werken bij een erg klein percentage van de bezoekers.

[DJ Buzzz]

Misschien anders de elementen boven de active en eronder een aparte klasse geven en daar het bovenste en onderste deel van het rondje inzetten? Nadeel is wel dat je boven en onder je lijst een dummy element nodig hebt (maar deze hoeft dan natuurlijk ook minder hoog te zijn)

[Blue-eagle]

Da's niet verkeerd, niet helemaal logische HTML, maar wel slim.

code:

<ul>
  <li><a href="#">test</a></li>
  <li class="active_top"><a href="#">test</a></li>
  <li class="active"><a href="#">test</a></li>
  <li class="active_bottom><a href="#">test</a></li>
  <li><a href="#">test</a></li>
  <li><a href="#">test</a></li>
</ul>

Ach, als 't werkt Bedankt alvast, ga nu even wat lopen mixen met m'n CSS.

[BtM909]

Waarom zo moeilijk doen

Als je je li nou position: relative meegeeft, dan kan je je image absoluut positioneren met left: -20px oid

[Blue-eagle]

Het betreft een background, geen image. Zelf met een image lukt het me niet Dan neemt de image weer teveel ruimte in de hoogte in beslag.

[Zoefff]

Wat BtM909 bedoelt is dat je een image gebruikt alsof het een background is. Als je het plaatje absoluut positioneert dan kan je hem gewoon wat naar links schuiven.

HTML:

<ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>[img]'stip.gif'[/img]Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
</ul>

Cascading Stylesheet:

li {
    list-style-type:none;
    position:relative;
}
li .img_active {
    position:absolute;
    left:-25px;
    top:-3px;
}

Zie http://zoefff.gotdns.com/got/list_image.htm

Het is natuurlijk nog niet de netste oplossing (die pas met ondersteuning van CSS3 mogelijk is), maar in ieder geval beter dan je plaatje in 3-en knippen.

[ Voor 26% gewijzigd door Zoefff op 07-07-2005 12:33 ]

[Blue-eagle]

Ah op die manier, werkt fantastisch! Mijn dank is groot!

[SillyJW]

Is deze oplossing dan niet logischer?

Cascading Stylesheet:

li {
    list-style-type: none;
    line-height: 14px;
}
li.active {
    list-style-image: url(stip.gif);
    vertical-align: middle;
}

[ Voor 5% gewijzigd door SillyJW op 07-07-2005 16:24 . Reden: typ-o ]

[Zoefff]

Nee, want dan word de list in FF weer uitgerekt. In IE werkt dit wel "goed".

[SillyJW]

Oeps, had ik idd niet gechecked in FF. Maar ik heb een vergelijkbare oplossing welles eerder gebruikt, die het wel crossbrowser deed.. eens zoeken..