Zebra-stripe Ordered list using CSS

Ricki

Ricki

Ricki

Associate
Joined
23 Oct 2003
Posts
413
Location
Cornwall
I have tried to develop my own code snippet style, and below is an example screenshot of what I have obtained so far:
ff33ps.jpg


This was achieved using the following CSS rules for the ordered list:
Code: 
ol.codeSnip {
	color: #555;
	background-color: #edd;
	font-family: Consolas, Lucida Console, Monaco, monospace;
	font-size: 1em;
	border: 1px solid #bbb;
	border-left: 4px solid #ac6;
	margin: 0em 0em 0em 2em;
	padding: 0em 0em 0em 5em;
	letter-spacing: 0em;
}

.codeSnip p.odd, .codeSnip p.even {
	font-family: Consolas, Lucida Console, Monaco, monospace;
	margin: 0em;
	padding-left: 1em;
	border-left: 1px solid #bbb;
	letter-spacing: 0.1em;
}

.codeSnip p.odd {
	background-color: #eee;
}

.codeSnip p.even {
	background-color: #f5f5f5;
}

And this html code is a mix of ordered lists and paragraph styles (please ignore the span classes):
Code: 
<ol class="codeSnip">
	<li><p class="odd">  
		<span class="commentTag">&lt;!-- this is a comment --&gt; /*  hello  */</span>  
	</p></li>
			
	<li><p class="even">
		some text
	</p></li>
	
	<li><p class="odd">
		<span class="normalTag">&lt;html&gt;</span>
	</p></li>
	
	<li><p class="even">
		<span class="propertyTag"> $port = </span>
		<span class="valueTag">	22px</span>
	</p></li>
</ol>

Now, visually I am quite happy with it, but code wise it sucks - it seems a little hacky and I'm sure there must be a more elegant, shorter way of achieving the same results.

Basically, I'm looking at utilising li:nth-child(odd) (and the even equivalent) but no matter what I try I can't seem to get it to work. Ideally I want to get rid of the <p class="..."> altogether, if not, at least reduced down to <p>.

So from this:
Code: 
<ol class="codeSnip">
	<li><p class="odd">...</p></li>		
	<li><p class="even">...</p></li>
</ol>

To this:
Code: 
<ol class="codeSnip">
	<li>...</li>
	<li>...</li>
</ol>

But no matter what I try, I just can't seem to get it to work. One of the biggest problems seems to be getting the line-number gutter a separate colour and getting the zebra-stripe line. Can anyone suggest fixes to the code to get what I'm after? Also, any major problems with my CSS?

Many thanks in advance.
 
Last edited:
suarve said:
Personally if I had to do it though, I'd just set two css classes (odd row/even row) and output it using a loop using php.
Click to expand...

That's what I will be doing eventually, it's just that I prefer to have minimalistic code and so want to 'perfect' the list now. Once that is done it will be implemented within php, but trying to do both at the same time is just making myself extra work in my opinion.
 
Two small things that'll neaten up your code:

1. Unless there's a knock-on reason that I can't see, you don't need paragraph elements inside the list elements, as they're both block-level. Just style the <li>s.

2. You don't need to specify a unit for "0" measurements in your CSS. "0em" is the same as "0px", "0in" or "0lightyears" for that matter. So just use "0". Yeah, I know, but it's one of those things I get all OCD about :D
 
simisker said:
1. Unless there's a knock-on reason that I can't see, you don't need paragraph elements inside the list elements, as they're both block-level. Just style the <li>s.
Click to expand...

This is where I was having most of the problems. I've just had a go again at styling the <li> and now it works! Sod's law really. Now I will see if I can get it to work without having to define a class in the text.


simisker said:
2. You don't need to specify a unit for "0" measurements in your CSS. "0em" is the same as "0px", "0in" or "0lightyears" for that matter. So just use "0". Yeah, I know, but it's one of those things I get all OCD about :D
Click to expand...

lol, for the last 5 years of uni I've had the fact I must always state units on all measurements beaten into me by all my lecturers (I'm an engineer), it's finally taken effect! I also have a bit of OCD when it comes to not omitting zeros before the decimal point - I must write 0.6em not .6em; I just need to become lazy again :p
 
Ricki said:
[...] lol, for the last 5 years of uni I've had the fact I must always state units on all measurements beaten into me by all my lecturers (I'm an engineer), it's finally taken effect! I also have a bit of OCD when it comes to not omitting zeros before the decimal point - I must write 0.6em not .6em; I just need to become lazy again :p
Click to expand...
Ah, makes sense - I've had it beaten into me from another direction: designing/coding HTML emails, where bytes wasted can equate to megabytes in extra bandwidth.

Don't think of it as laziness, think of it as streamlining ;)
 
cotton31 said:
Got a bit of code that does this? (the PHP part?) :D
Click to expand...

There are a few things out there already, look at perhaps this link where there is an easy JavaScript method. Alternatively suarve provides a good link (see the 2nd post).

If you can wait a while I'll be creating my own code for this entire thing really soon.
 
<?php
for($i=0; $i<number of links; $i++){
?>
/** Your html for links goes in here.
<?php
}
?>

This will loop over the html as many times as you tell it to in the for loop. You will need to create the links html using some sort of php variable to change the link on each pass through the loop.

If you use mod 2 on variable $i that will tell you if its an odd or ever number for $i and the class will change so that you have a striped effect.
 
Last edited:
simisker said:
Ah, makes sense - I've had it beaten into me from another direction: designing/coding HTML emails, where bytes wasted can equate to megabytes in extra bandwidth.

Don't think of it as laziness, think of it as streamlining ;)
Click to expand...
I've always been told some browsers won't scale properly (ctrl+mousewheel) unless you specify a fluid unit (em/pt) and omitting the unit reverts to static (px) in some browsers. :)
 
Dj_Jestar said:
I've always been told some browsers won't scale properly (ctrl+mousewheel) unless you specify a fluid unit (em/pt) and omitting the unit reverts to static (px) in some browsers. :)
Click to expand...
But zero multiplied by anything is still zero ;)

If you deliberately specify two block-level elements to abut with "margin: 0", for example, then the last thing you want when scaling [font-only or full viewport] is for that value to suddenly not become 0. This would mean that the layout would begin to drift apart, if enlarging/zooming-in.

As another example: does a browser assume that a block-level element's unspecified border-width is zero? Yes it does [well, except images within hyperlinks, in a legacy nod to usability convention]. But what unit does the browser use for these unspecified zero borders? Should it be ems? Px? Answer: it doesn't matter. You'd hope it was always going to be zero irrespective of zoom level anyway ;)

In case I wasn't clear enough [always possible with my wordy way of writing!], I'm ONLY advocating the dropping of units for a value of 0. Everything else clearly requires a unit :)

[EDIT: And I guess in this day and age of ubiqituous broadband, a few extra characters here and there for a website aren't going to make a difference, so by all means keep 'em in [christ, no pun intended!]. But if it's good enough for Zeldman, Cederholm, Meyer et al, it'll do for me!]
 
Last edited:
Yes, but if the element does not scale (zoom) because you've not put "em" or "pt" after it, it's a problem. Regardless of 0 * x = 0. ;)
 
Dj_Jestar said:
Yes, but if the element does not scale (zoom) because you've not put "em" or "pt" after it, it's a problem. Regardless of 0 * x = 0. ;)
Click to expand...
If you're giving elements dimensions of 0, you've got bigger problems to worry about than "should I specify a unit?" :D

The proportional distance between elements, however, is a different thing entirely. There is a need for elements to abut no matter what level of scale/zoom, and that need is addressed by "0" - or more specifically, "0" staying "0". Which negates the need for unit specification.
 
Last edited:
and the point, which you are missing, is that some elements do not scale if any attribute has a static property, which when not specifying a dynamic unit, can resort to using.
 
Dj_Jestar said:
and the point, which you are missing, is that some elements do not scale if any attribute has a static property, which when not specifying a dynamic unit, can resort to using.
Click to expand...
I suspect we're talking about two different things here, Mr Dj_J.

My argument is [and always was] about "0" unit omission only; a little thing which I and many others - including those of some repute - agree on.

Your initial response, where you quoted me, led me to believe that you were directly contending my argument, but subsequent posts suggest otherwise.

Correct me if I'm wrong. Hell, I know you will :D

[sorry, Ricki!]
 
You must log in or register to reply here.
Back
Top Bottom