Archief - CSS: Positioneren van background image bij een list

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
A

Arcko_Drazen

Legacy Member
Beste webdesigners

Ik ben nu al een dagje aan het prutsen aan het volgende probleem: ik probeer aan een list item een background image te hangen (wat lukt), maar het achtergrond prentje bevindt zich recht onder te actuele tekst van het list item terwijl ik meer beoogde van het achtergrond prentje onder het hele list item te plaatsen.

Ik heb al even zitten zoeken op google maar weet niet goed wat ik dien in te typen. Ik wil best wel zaken opzoeken maar zou niet weten hoe ik dit aanpak.

Mijn huidige CSS:
Code: 
ul.menu li.collapsed, ul.menu li.leaf, ul.menu li.expanded  {
	background-position:top left;
	background-repeat:no-repeat;
	background-image: url(images/gui/menu-button-lvl1.jpg);
	
	margin-left: 0px;
	padding-left: 0px;
}

NOOT: het weghalen van het list-item prentje werkt niet en is ook niet echt een optie aangezien ik deze prentjes wil laten variëren wanneer een menu uitgevouwen is of niet. Bovendien zorgt de property: list-style:none; ervoor dat de prentjes van de lijst-items weg wordt gehaald maar de breedte van het lijst item blijft even groot en komt het achtergrond prentje nog steeds niet op de goede plaats.

Enige hints?

Alvast bedankt
Arcko D
S

Skarr

Legacy Member
je moet een left margin opgeven dan zodat de tekst niet over de image wordt gedrukt.

de grootte is afhankelijk van de breedte van uw image + paar pixels spacing
A

Arcko_Drazen

Legacy Member
Ik ben erin geslaagd om het op te lossen.
(denkik)
Enkel nog maar getest in FF.

Code: 
ul.menu li {
	list-style-position: inside;
}

Die inside zorgde ervoor dat zowel list-image'ke (disc, ...) als de tekst over het achtergrond prentje ging staan.

Arcko D
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan