login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Verschillende afbeeldingen in een lijst ( list-style) toepassen

Offline dennissites - 21/09/2013 20:11 (laatste wijziging 24/09/2013 16:49)
Avatar van dennissitesNieuw lid Weet iemand misschien waarom het volgende niet werkt ? Het is natuurlijk de bedoeling dat bij het 1e punt in de lijst "afbeelding2.png" wordt weergegeven!

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="head">
  2.     <div class="h4">Voorbeeld</div>
  3. </div>
  4. <div class="content">
  5.     <div class="intro-right">
  6.         <ul id="intrsp">
  7.             <li id="1">Veilig betalen</li>
  8.             <li id="2">Maatwerk mogelijk</li>
  9.             <li id="3">Installatie service</li>
  10.             <li id="4">Bezorg service</li>
  11.             <li id="5">10 jaar ervaring</li>
  12.             <li id="6">De laatste trends</li>
  13.         </ul>
  14.     </div>
  15. </div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. .intro-right li { 
  2.     list-style-position: inside;
  3.     list-style-image: url(afbeelding.png);	
  4. }
  5.  
  6. #intrsp li#1 {
  7.     list-style-image: url(afbeelding2.png);     
  8. }

7 antwoorden

Gesponsorde links
Offline UpLink - 21/09/2013 21:48 (laatste wijziging 21/09/2013 21:50)
Avatar van UpLink ... En wat is dan exact je bedoeling ?
Bij elk "id" een andere afbeelding of enkel bij de eerste ?

die #1 is voor zover ik weet niet geldig bij CSS(3)...
Offline dennissites - 21/09/2013 22:15
Avatar van dennissites Nieuw lid Ik wil inderdaad bij elke id een andere afbeelding. Maar als ik alleen classes gebruik i.p.v. id's werkt het ook niet.
Offline UpLink - 21/09/2013 22:24 (laatste wijziging 21/09/2013 22:25)
Avatar van UpLink ... Is dit enkel voor deze lijst of voor meerdere?

Different List Item Markers zou een oplossing kunnen zijn vermoed ik voor wat jij wil, maar het vraagt wel wat werk natuurlijk als je meerdere lijsten hebt die dit moeten ondersteunen...
Offline Pieter - 25/09/2013 08:18
Avatar van Pieter Gouden medaille

SEO guru		 Of je gebruikt, nog beter... een sprite. Dan heb je niet meer 6 maar 1 afbeelding die laadt. En kan je CSS weer korter maken en de boel minder complex.
Offline Jointjeff - 30/09/2013 00:05 (laatste wijziging 30/09/2013 00:08)
Avatar van Jointjeff HTML interesse Is het probleem niet dat de DIV's niet numeriek mogen beginnen(zie hier). Probeer b.v. eens listitem-1 (of iets anders) als naam, en dan het liefst met classes ipv id's.

Mocht het dat nou helemaal niet zijn,... het is al laat... ;)

Sprite is inderdaad een goede tip!
Offline WouterJ - 30/09/2013 08:00
Avatar van WouterJ HTML gevorderde Id en classes mogen volgens de CSS specificaties inderdaad niet numeric beginnen, in Html en Js mag dit wel. Zie ook http://mothereffingcssescapes.com
Offline Thomas - 08/10/2013 17:15
Avatar van Thomas Moderator Of gewoon de css-selector :first-child?

Dus in jouw geval zoiets als

css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul#intrsp li:first-child { list-style-image: url(afbeelding2.png); }


(niet getest)

En mja, id's in css... tenzij je iets met JavaScript wilt doen kun je dit misschien beter vermijden.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s