css pad div / class bepalen

Status
Niet open voor verdere reacties.

vacances2000

Gebruiker
Lid geworden
28 jan 2013
Berichten
113
Beste,
Ik wil een afbeelding plaatsen voor de list items maar dit lukt steeds maar niet bij het volgende:
HTML:
<div id="fitness">
<h3>Fitness and wellness</h3>
<div id="box2" class="features" >    
<ul class="leaf">
<li>Aerobics</li>
<li>Aerobics</li>
<li>Aerobics</li>
</div>
</div>

mijn css:
HTML:
.features{
    position:relative;
    float:left;
	width: 90%;
	height: auto;
    margin: 1% 0 0 2%;
    border-radius:5px;
	padding: 0% 1% 0% 1%;
	font-size: 12px;
	border: solid 1px #D41717;
	-webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4;
}

.features li {
    display: block;
    padding-bottom: 10px;
}

.features ul.leaf img{width: 100%; height: 100%;}
.features ul .leaf{list-style-image:url('images/v-list.png');}

Hoe kan ik de v-list afbeelding voor de <li> items krijgen?

Dank.

Jonathan
 
Verschil

Ik zie twee opeenvolgende regels, regel 21 en regel 22
met een verschil tussen de ene regel en de andere
Code:
.features ul.leaf [.....]
.features ul .leaf [.....]
 
Oh ja,

Als je een afbeelding voor elk list-item wil krijgen,
is het misschien handig om die afbeelding te koppelen aan een <li>-element in plaats van aan een <ul>-element
 
Dag Tecsman,
Dank voor je hulp.

Sorry idd. het hoort ul.leaf te zijn.. maar toch, wanneer ik het pad naar .features li wijzig, dan werkt het nog steeds niet. Ook heb ik de naam van de class gewijzigd...toch geen resultaat.

Zoals je kunt zien, is er 2x een class in 1 div. Dit zou toch niet uit moeten maken?

Bij een andere div is m'n code als volgt, maar het werkt wel:
HTML:
ul.leaf{
list-style-image:url('images/v-list.png');
 }

ul.leaf img{width: 50%; height: 50%;}

HTML:
<div id="distance" class="collection">
	  <h2>Distance and transport services</h2>
	  <ul class="leaf">
	    <li>Distance</li>
	    <li>Distance</li>
	    <li>Distance</li>
	    <li>Distance</li>
	    <li>Distance</li>
      </ul>
		</div>

Ik hoor het wel.

VG

Jon
 
Ik vermoed dat andere css de ul en/of li beïnvloedt.
De beste manier is alles terugzetten in standaard waardes.
Code:
/* padding getest met image 15x15 */
#distance ul {
  margin: 0;
  padding: 0 0 0 25px;
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: url('sqpurple.gif');
}
#distance ul li {
  margin: 0;
  padding: 3px 0;
}
Heb je geen resultaat wijzig dan in ul.leaf {} en in ul.leaf li {}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan