verticaal centreren naast een plaatje

[julesees]

Hallo allemaal.

ik heb een vraag over de vertical alignment.

Ik heb het onderstaande geplaatst dmv van afbeeldingen te maken van de bulletpoints die ik in een mail heb ontvangen:






zoals je kunt zien staat de tekst ernaast niet in het midden maar onderaan. Ik zou dit graag willen aanpassen zodat de tekst in het midden van de bulletpoints komt te staan.

anyone?

 

[csshunter]

Hoi julesees,
Welkom op het forum!

Uit je plaatje valt niet op te maken welke html- en css-code je gebruikt hebt om het zo te krijgen.
En die html- en css-code is nodig om je probleem op te lossen.

• Heb je een link naar een test-pagina, waarop het zo staat als in het plaatje?

Met vriendelijke groet,
CSShunter

 

[julesees]

dankjewel voor je snelle reactie.

ik heb binnen een software om mailings te maken een plaatje toegevoegd wat ik nu gebruik als bulletpoint, daarvoor heb ik de onderstaande code gebruikt. De tekst krijg ik er alleen op geen mogelijkheid op dezelfde hoogte naast.

<style type="text/css">
ul { list-style-image: url(https://6edd68304d-custmedia.vresp.com/library/1347027979/86e9fa39e4/2012-09-07_162539.JPG ); }

 

[csshunter]

Hoi julesees,
Ja, het stylen van aangepaste list-style-images is ... crimineel moeilijk, zegge onmogelijk: (a) vanwege browserverschillen en ook (b) vanwege extra problemen bij vergroting van het letterformaat door de bezoeker. Het kan alleen lukken bij hele kleine images, niet (veel) groter dan de normale bullets; je zit namelijk gauw in de puree met de regelhoogte als het img hoger is dan de normale regelhoogte.

Ik gebruik daarom nooit de list-style-images, maar werk met een background-image:

• Eerst wordt de list-style uitgezet (geen gewone bullets), en de list-item regels worden links uitgelijnd.
• Dan wordt het img er in gezet als background-image: aan de linkerkant, zonder herhaling, en via de background-positie op 50% verticaal.
• Om de regel nu naast het img te laten beginnen, komt er een padding-left voor het list-item bij.
• Verder mag bij een klein letterformaat het background-img niet aan de onderkant afgesneden worden als het niet binnen de regelhoogte past. Daarom wordt de regelhoogte bepaald op 2em. Dat gaat goed bij kleine letters, en ook bij font-vergroting door de bezoeker (een vaste px-maat mag hier dus niet).
• Tenslotte nog een kleine correctie omdat het img hier hoger is dan de normale regelhoogte: een ietsiepietsie padding-top erbij.

Al met al wordt het dan aan css:

ul { 
	margin: 0; 
	padding: 0; 
	list-style: none;
	} 
li { 
	margin: 0;
	padding: .1em 0 0 35px;
	line-height: 2em;
	background: url(images/lsi-vinkje.jpg) no-repeat 0 50%;
	}

• Test 1: alternatief-list-style-image-1.htm
• Dit gaat prachtig als het steeds één regel is die naast het vinkje moet komen.

=======
Meerdere regels?
Als je echter dit model gaat gebruiken als je meer regels bij een vinkje hebt staan (of als je dat niet tevoren weet), dan gebeurt er dit:

• Test 2: alternatief-list-style-image-2.htm
• Dat gaat dus vreselijk de mist in!

=======
Toch meerdere regels!

Hiervoor moet het anders aangepakt worden:

• Het vinkje mag niet halverwege de hoogte van de gezamenlijke regels komen, maar moet bovenaan staan. De 50% verticale positie moet er dus van af.
• Er mag niet meer met de regelhoogte van 2em (= dubbele hoogte van normaal) gewerkt worden, want per list-item moeten de verschillende regels zelf op gewone afstand van elkaar staan.
• Om het goed te laten gaan als er een list-item van 1 regel bij zit, wordt wel een minimale regelhoogte vastgelegd! Dat kan nu in px, want hangt alleen van de hoogte van het img af. Om de blokjes van list-items op gelijke afstand van elkaar te krijgen, wordt een margin-top toegevoegd, relatief t.o.v. het letterformaat (dus weer in em-eenheid).
• En ook hier een (andere) beginhoogte-correctie voor de eerste regel.

Al met al wordt het dan aan css:

ul { 
	margin: 0; 
	padding: 0; 
	list-style: none;
	} 
li { 
	margin: .5em 0 0 0;
	padding: .2em 0 0 35px;
	min-height: 30px;
	background: url(images/lsi-vinkje.jpg) no-repeat;
	}

• Test 3: alternatief-list-style-image-3.htm
• Dit is iets minder mooi dan nummer 1, maar is wel altijd inzetbaar.

Met vriendelijke groet,
CSShunter
____________
PS
Hier nog een ander voorbeeld: test-graphical-bullets.htm
Ook hier: flink spelen met margins en paddings en tienden van em's.

 

[julesees]

Gelukt! super fijn dankjewel!!!!!!!!!!!