Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Lists

Status
Not open for further replies.
solhan

solhan

Programmer
Mar 4, 2008
2
US
I was wondering, is there an easy way to modify the ol tag so list elements are displayed in the following matter:

Article I
Section I
A
i
ii
B
C
Section 2
Section 3
Article 2

It seems like it would be a routine operation that could be performed with CSS easily using nested <ol> tags. I just need a way of adding a text prefix to the characters used for the list and I'll be all set.
 
Sort by date Sort by votes
It seems like you're out of luck. The structure could easily be done with nested ordered lists, so would ABC and roman numeral numbering, but AFAIK, there is no way of prepending arbitrary text to numbering. The only way you could do it is by making the "Section" or "Article" into a background image and use normal numbering on those. Here's a list of options you have for different numbering:


CSS3 will be able to accomplish what you want via the ::marker pseudo class.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
You might try playing with the "content" CSS property, although I'm not sure how good the cross-browser support is. Something like:

Code: 
ol:before {
	content: "Section 1";
}

I've not tried this, but have a read, have a play, and see what comes out.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Did you have any luck? I tried, and works in Firefox, Safari and Opera. It doesn't work in IE6, although I didn't try IE7.

Code: 
<html>
<head>
	<style type="text/css">
		ol.s1:before {
			content: "Section 1";
		}
		ol.s2:before {
			content: "Section 2";
		}
	</style>
</head>

<body>
	<ol class="s1">
		<li>Item 1</li>
		<li>
			Item 2
			<ol class="s2">
				<li>Sub-Item 1</li>
				<li>Sub-Item 2</li>
				<li>Sub-Item 3</li>
			</ol>
		</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ol>
</body>
</html>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I'm sorry, more pressing issues have arisen since. I havn't had a chance to try this yet - I was manually typing it out and figured there must be a shortcut to it, and thus I asked for future reference. Once I get the chance to and things calm down on my site (or things work the way they should), I'll give it a try.

Just fyi, I'm using a CMS called Drupal, and am facing some difficulties with certain modules. Nothing relating directly to HTML, XHTML or CSS, so I won't bring it here.
 
Upvote 0 Downvote
This is the same method to use if one needed a structure such as this?:

1. The Beginning
1.1. The House
1.2. The Garden
1.3. The Garage
1.3.1. The Car
1.3.2. The Lawnmower
1.3.3. Leftover Ant Poison
2. The Middle
2.1. The Sad Song
2.2. The Happy Song
3. The End
3.1. The Sad Song (refrain)
3.2. The Stabbing of the Eyes



[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
In Fx1.5+ at least, you have "counter-increment" and "counter-reset" styles you could apply to some DIV elements:


But these aren't widely supported, AFAIK.

However, the most cross-browser way would probably be to use a UL and add your own numbering scheme.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
822
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
652
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
705
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
234
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top