Snabb fråga ang. <ol> och "bulleted lists" med bilder

2010-10-06 01:54

Medlem

Plats: Stockholm
Registrerad: Sep 2002

●

Snabb fråga ang. <ol> och "bulleted lists" med bilder

har en ordered list (<ol>) på min sida men istället för bullets så vill jag ha ikoner. Enda problemet är att dessa ikoner är lite stora (30px) så texten som bara är 12px hamnar väldigt långt ner. Finns det något sätt att alignea texten till mitten?

koden ser ut såhär:

<h2>Qualities</h2>
<p>
	<ol>
		<li>Coffee</li>
		<li>Milk</li>
	</ol>
</p>

och mitt stylesheet ser ut såhär:

#fac-q ol 	{list-style-image: url(images/q.png);}

Såhär ser det ut på sidan:

Några bra idéer?

Visa signatur

Triphys Blog - Send me a mail - Website

Rapportera Redigera

Citera flera Citera

2010-10-06 02:15

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Om du vill ha en bulleted list så ska du använda en unordered (<ul>) lista. I övrigt så kan du styra texthöjden (förutsatt att det bara en en rad text, annars går det inte) genom att sätta line-height till rätt höjd, dvs 30px.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2010-10-06 09:59

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Bullets som är så stora orsakar lätt lite problem. Jag skulle lagt en bakgrundsbild istället till en unordered list som You skriver.

ul li {
background: url(images/q.png) left center no-repeat;
display: block;
list-style: none outside;
margin-left: 0;
padding-bottom: 5px;
padding-left: 35px;
}

Senast redigerat 2010-10-06 10:07

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-10-06 14:02

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Skrivet av save:

Bullets som är så stora orsakar lätt lite problem. Jag skulle lagt en bakgrundsbild istället till en unordered list som You skriver.

ul li {
background: url(images/q.png) left center no-repeat;
display: block;
list-style: none outside;
margin-left: 0;
padding-bottom: 5px;
padding-left: 35px;
}

Gå till inlägget

Fast, nu har vi ju ett CSS-attribut som finns just för det här syftet (list-style-image). Det TS har problem med är egentligen vertikalcentrering.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2010-10-06 15:19

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Skrivet av You:

Fast, nu har vi ju ett CSS-attribut som finns just för det här syftet (list-style-image). Det TS har problem med är egentligen vertikalcentrering.

Gå till inlägget

Semantiskt inte det snyggaste, i know. Problemet uppstår främst i IE6 och till viss mån IE7 vid för stora bullets. Anser att det är enklaste lösningen dock, speciellt om radbrytning uppstår i listan.

Visa signatur

Rapportera Redigera

Citera flera Citera

Snabb fråga ang. <ol> och "bulleted lists" med bilder

Snabb fråga ang. <ol> och "bulleted lists" med bilder

Externa nyheter

Spelnyheter från FZ