list-style:url werkt niet met de counter

[leuthrick]

Hallo,

Ik probeer dmv een counter in css een plaatje ophalen dat door php gemaakt word.

ik heb de volgende code:

css:

.list_left li {
	list-style:url("http://localhost/aircreations/layout/images/get_arrow.php?c=" counter(section));
	text-indent:-4px;
	counter-increment:section;
}

html:

<ul class="list_left">
                        	<li><a href="#">zakelijk</a></li>
                            <li><a href="#">webshop</a></li>
                            <li><a href="#">sport</a></li>
                            <li><a href="#">nieuws</a></li>
</ul>

nu laat de webpagina alleen maar bollentjes voor de li zien.

Alvast bedankt.

 

[csshunter]

Hoi leuthrick,
De code:

.list_left li {
	list-style:url("http://localhost/aircreations/layout/images/get_arrow.php?c=" counter(section));
	text-indent:-4px;
	counter-increment:section;
}

kan niet kloppen (en komt ook niet door de css-validator): tussen de haakjes van de url moet alles binnen de aanhalingstekens staan.
Hoort counter(section) wel in de url? of is dat de waarde van de c?

 

[leuthrick]

Hallo

counter(section) is de waarde van c.

Ik wil dat de css de li tags telt, en dan bij het php script het plaatje op haalt met de waarde die hij steeds telt.
Alvast bedankt

 

[csshunter]

Aha, maar css is voor opmaak, en niet voor functionaliteit. Je zal daarom geen waarde van de css-counter kunnen gebruiken als variabele.

Je kan het wel doen met javascript: dat kan de list-items tellen en met een variabele het wenselijke img als inline-style toevoegen.
Verder zou ik geen list-style-image gebruiken, maar het img er in zetten als gewoon background-image voor elke <li>. Dat is meestal beter te stylen dan een list-style-image, omdat de positie daarvan niet altijd gelijk is bij de verschillende browsers.

Dan kan het dit worden:

<ul id="list-1" class="list_left">
   <li><a href="#">zakelijk</a></li>
   <li><a href="#">webshop</a></li>
   <li><a href="#">sport</a></li>
   <li><a href="#">nieuws</a></li>
</ul>

met:
[JS]<script type="text/javascript">
// <![CDATA[
var allLi=document.getElementById('list-1').getElementsByTagName('li');
for (var i=0; i<allLi.length; i++){
var j=i+1;
allLi.style.backgroundImage='url(http://localhost/aircreations/layout/images/get_arrow.php?c='+j+')';
}
// ]]>
</script>[/JS]
(javascript te plaatsen vlak voor de </body>)

De met javascript gegenereerde broncode wordt dan dit:

<ul id="list-1" class="list_left">
   <li style="background-image: url(http://localhost/aircreations/layout/images/get_arrow.php?c=1)"><a href="#">zakelijk</a></li> 
   <li style="background-image: url(http://localhost/aircreations/layout/images/get_arrow.php?c=2)"><a href="#">webshop</a></li>
   <li style="background-image: url(http://localhost/aircreations/layout/images/get_arrow.php?c=3)"><a href="#">sport</a></li>
   <li style="background-image: url(http://localhost/aircreations/layout/images/get_arrow.php?c=4)"><a href="#">nieuws</a></li>
</ul>

Met vriendelijke groet,
CSShunter

 

[leuthrick]

ahh oke daar ligt het dus aan. Ik dach dat zo iets simpels met css wel ging.

Bedankt
Mvg Leuthrick

 

[That Guy]

Maar! In CSS3 (volgens mij) zijn er selectors waarmee je dit kan doen: nth-child (of wat minder technisch, hiero)

#list-1:nth-child(0)
{
   background-image: url('...c=1');
}

#list-1:nth-child(1)
{
   background-image: url('...c=2');
}

oid!

 

[csshunter]

Ja: ik vergeet steeds dat css3 er een serie "pseudo-scripts" in heeft zitten, waarbij wel variabelen gebruikt kunnen worden.
Bv.:

#list-1:nth-child(2n+1) {...} /* hier zonder spatie tussen #list-1 en :nth-child ? */

Edoch:

• Misschien is het vanwege de dynamica (of bij het toevoegen van een nieuwe <li> in de html) niet altijd mogelijk een css-formule te hanteren (resp.: dan moet bij een html-aanpassing ook de css aangepast worden). Maar doorslaggevender voor mij:
• Deze css3 is niet cross-browser, zegt quirksmode: IE7 en IE8 doen het niet *), en Opera schijnt er soms ook moeite mee te hebben.

Met vriendelijke groet,
CSShunter
___________
*) Nu weet ik wel dat That Guy een voorstander is van de laatste browser-versies (IE9 kan het wel), maar IE9 kan mij niet verlokken om centjes voor Windows7 neer te gaan leggen: m'n XPpro doet het nog prima!
- Volgens de laatste tellingen van StatCounter heeft ruim 25% van alle Nederlandse surfers (= ca. de helft van de Nederlandse IE-surfers) nog IE7 of IE8: daar moet je toch rekening mee houden?

 

[That Guy]

Pauzeren in de berm:

daar moet je toch rekening mee houden?

Deze css3 is niet cross-browser

Ik zie het liever van de andere kant af: CSS is stijl, en niet content. Ofwel, in principe zou de site ook prima moeten zijn zonder! Vooral met kleine dingetjes zoals ronde hoekjes of, zoals hier, icoontjes bij bepaalde list-items. Zelf geef ik wel wat fallback support; bijvoorbeeld op mijn site (regel 78 en 79, body > div); de background-color is een rgba(), maar daar kunnen oudere browsers niet mee omgaan. Dat is echter geen probleem, want eerder in de stijl heb ik al een 'normale' witte achtergrond opgegeven (#fff). Oudere browsers negeren de rgba nu en geven gewoon een witte achtergrond weer; veel makkelijker dan geklooi met plaatjes enzovoorts!

Trouwens, m'n website heb ik alleen IE getest via zo'n screenshot website, browsershots.org of iets in die richting, en het zag er bruikbaar uit in IE < 9. Ondertussen de stijl al weer 2x herschreven, dus niet 100% zeker of het nog werkt.






Terug de weg op:

Op het icoontjes probleem hier zou ik zeggen: geef een default icoontje weer voor alle items in de lijst, en stijl dan met :nth-child de individuele list items. Uiteraard zijn de andere oplossingen (CSS in HTML en Javascript-magie) ook prima, maar zoals hierboven uitgelegd vind ik dat persoonlijk de verkeerde kant op denken.

Het blijft altijd een afweging natuurlijk; is de toevoeging van plaatjes in de lijst echt zo belangrijk, of kan het ook zonder en is het puur voor de 'leuk'?




:thumb:



[edit]

hier zonder spatie tussen #list-1 en :nth-child

Ach, ja, als ik CSS typ heb ik nog wel eens de neiging om spaties neer te zetten waar ze eigenlijk niet moeten... met spaties pakt 'ie natuurlijk de nth-child IN de li's. Heb m'n eerdere bericht aangepast voor de duidelijkheid. [/edit]

 

[csshunter]

Vanachter de thermoskan in de berm:

"CSS is stijl, en niet content." > Klopt 100%, moet ook zonder kunnen. Zelf hecht ik nogal aan de eenheid van vorm en inhoud, maar stijlloze text-browsers moeten natuurlijk ook een bruikbaar resultaat geven. En zoals je ook al op de snelweg zegt: "Het blijft altijd een afweging natuurlijk; is de toevoeging van plaatjes in de lijst echt zo belangrijk, of kan het ook zonder en is het puur voor de 'leuk'?".
- Ik kon van hieruit niet zien hoe wel/niet essentieel het voor de (gebruiksvriendelijkheid van de) pagina van leuthrick is, dus ben er maar van uit gegaan dat het erg belangrijk is.
- Zo mogelijk probeer ik te vermijden dat mensen met verschillende browser(versie)s een andere gedaante van de site zien; zodat als Jantje bij Pietje komt, hij de site nog steeds herkent, tenminste op de hoofdlijnen, en liefst ook qua minder belangrijke details. Ook een kwestie van voorkeur natuurlijk (en de hoeveelheid perfectionisme cq tijd van de webbouwer).
- Terzijde naast het klapstoeltje: de Webrichtlijnen (verplicht nummer voor overheidswebsites, tevens voor behalen van de meeste sterren voor het Waarmerk Drempelvrij) vinden dat je met css3 erg voorzichtig moet zijn, en schrijven css2.1 voor als het om belangrijke dingen gaat.

=======
En ook vanachter de zonnebril:

... het zag er bruikbaar uit in IE < 9. Ondertussen de stijl al weer 2x herschreven, dus niet 100% zeker of het nog werkt.

Helaassie! In IE7 en IE8 is de vormgeving en positie van de tabs naar de filistijnen (de html5 <nav> tag wordt door 7&8 niet herkend, en ook niet de aangehangen styles). In IE7 doet daarnaast de fallback naar de witte background het niet. Zie Netrenderer (vrijwel realtime, itt de lange wachttijden bij Browsershots).

Gegroet!
CSShunter