Stylesheets - Progress bar: Cool design, but what is the best possible markup?

Author

Progress bar: Cool design, but what is the best possible markup?

Jesper Rønn-Jensen

2007-10-12, 6:16 am

I'm currently HTML'ifying a cool design for a progress bar. Have a
look at the graphic:
http://justaddwater.dk/wp-content/u...07/10/train.png
HTML version: http://justaddwater.dk/wp-content/u...10/train_css_d=
..html

This vertical progress bar is very good looking and very intuitive to
understand. Now, the challenge for me is that I want it implemented
with the simplest possible HTML and CSS.

My thoughts until now is:
* use an ordered list with numbers inline.
* class the "done", "current" and "undone" list items for light-blue,
orange and dark blue gradient backgrounds.
* The small "tip" below each list item must be in front of the next
list item.
* The small "tip" must not occur on the last list item, thus it must
have added css class "final"

There are two things that cause me a problem so far:
The "tip" will add an extra element in the html, so for now I add an
empty "b" element with class=3D"tip" at the end of each li-element. Now,
this tip must overlap the following list item, but strangely it gets
behind. I tried fiddling with setting z-index, but that did not help
me. I'm blank on what to do here. Thats problem number 1.

For the tip to be properly positioned, I place it absolutely 8 px
below the bottom of the li element. Therefore I set position:relative
on the li element, but this causes IE7 to add extra whitespace around
the element, ignoring any top margin or top border. That's problem
number two.

Ideally, I would prefer doing this without an extra element in the
HTML, but since the gradients are bottom-aligned, I can't really see
how I can place a top-aligned tip in that element.
Also, having not looked further into browser compatibility, there may
also be some problems with other browsers: IE6, Safari

Please give any feedback or suggestions on how to implement this.

=3D=3D=3D=3D=3DHTML CODE: =3D=3D=3D=3D
<ol class=3D"train">
<li class=3D"done">f=F8rste step </li>
<li class=3D"done">andet step </li>
<li class=3D"current">tredie step
This one has extra text that can only be seen when selected

</li>
<li class=3D"undone next">fjerde step </li>
<li class=3D"undone">femte step </li>
<li class=3D"undone final">sidste step </li>
</ol>

=3D=3D=3D=3D=3DCSS CODE: =3D=3D=3D=3D=3D=3D
ol.train{
width: 208px;
margin:0;
padding:0;

}
ol.train li{
list-style-position:inside;
margin:1px 0px 0px 0px;
padding:9px 0 5px 10px;
position: relative;
bottom:10px;
z-index: 1;
}
ol.train li p{
margin:0;
padding:0;
font-weight: normal;
}

..train .done{
background: url(images/train-done.png ) #e8f4f7 repeat-x bottom;;
color: #999797
}
..train .current{
background: url(images/train-current.png) #fea445 repeat-x bottom;
color: #fff;
font-weight: bold
}
..train .undone{
background: url(images/train- undone.png) #d2e9f0 repeat-x bottom;;
}

..train .tip{
height:8px;
/* border: 1px dotted green;*/
position:absolute;
bottom:-6px;
left:0;
width:100%;
z-index:2;
}

..train .done b.tip{
background: url(images/train-done-tip.png) no-repeat top;
}
..train .current b.tip{
background: url(images/train-current-tip.png) no-repeat top;
}
..train .undone b.tip{
background: url(images/train- undone-tip.png) no-repeat top;
}
..train .final b.tip{
background:none;
}

See working HTML file at http://justaddwater.dk/wp-content/uploads/2007/10/=
train_css_d.html

--
Jesper R=F8nn-Jensen
Blog: www.justaddwater.dk

John L.

2007-10-12, 6:16 pm

Jesper Rønn-Jensen wrote:
> I'm currently HTML'ifying a cool design for a progress bar. Have a
> look at the graphic:
> http://justaddwater.dk/wp-content/u...07/10/train.png
> HTML version: http://justaddwater.dk/wp-content/u...rain_css_d.html
>
> This vertical progress bar is very good looking and very intuitive to
> understand. Now, the challenge for me is that I want it implemented
> with the simplest possible HTML and CSS.
>
> My thoughts until now is:
> * use an ordered list with numbers inline.
> * class the "done", "current" and "undone" list items for light-blue,
> orange and dark blue gradient backgrounds.
> * The small "tip" below each list item must be in front of the next
> list item.
> * The small "tip" must not occur on the last list item, thus it must
> have added css class "final"
>
> There are two things that cause me a problem so far:
> The "tip" will add an extra element in the html, so for now I add an
> empty "b" element with class="tip" at the end of each li-element. Now,
> this tip must overlap the following list item, but strangely it gets
> behind. I tried fiddling with setting z-index, but that did not help
> me. I'm blank on what to do here. Thats problem number 1.
>
> For the tip to be properly positioned, I place it absolutely 8 px
> below the bottom of the li element. Therefore I set position:relative
> on the li element, but this causes IE7 to add extra whitespace around
> the element, ignoring any top margin or top border. That's problem
> number two.
>
> Ideally, I would prefer doing this without an extra element in the
> HTML, but since the gradients are bottom-aligned, I can't really see
> how I can place a top-aligned tip in that element.
> Also, having not looked further into browser compatibility, there may
> also be some problems with other browsers: IE6, Safari
>
> Please give any feedback or suggestions on how to implement this.

By far the simplest way to do this would be to include the tip with the
background images used on the a elements. That way, your list requires
no superfluous elements at all and you avoid the positioning headaches
described above. Example:

<ul>
<li><a href="#" class="done">foo</a></li>
<li><a href="#" class="doing">2 foo</a></li>
<li><a href="#" class="nextundone">foo</a></li>
<li><a href="#" class="undone">foo</a></li>
</ul>

The 'nextundone' class will be required because the image immediately
below the current link will need an orange tip.

CSS sample:

ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline;
}
a {
display: block;
padding: 5px;
/* additional link styling */
background: [default background undone image]
}
a.done {
background-image: [etc]
}
a.doing {
etc.
}

John Hosking

2007-10-12, 6:16 pm

Jesper Rønn-Jensen wrote:
>
> This vertical progress bar is very good looking and very intuitive to
> understand. Now, the challenge for me is that I want it implemented
> with the simplest possible HTML and CSS.
>
....
>
> There are two things that cause me a problem so far:
> The "tip" will add an extra element in the html, so for now I add an
> empty "b" element with class="tip" at the end of each li-element. Now,
> this tip must overlap the following list item, but strangely it gets
> behind. I tried fiddling with setting z-index, but that did not help
> me. I'm blank on what to do here. Thats problem number 1.

I think I would have tried with a rather than , just for
semantic reasons. Of course, b is shorter. ;-)

If I take the z-index:1 out of ol.train li, and also adjust the
bottom:-6px; to be bottom:-8px; in .train .tip, it looks good to me in
FF. I don't immediately see *why*, though, so maybe my response is
unhelpful. :-( Maybe you're more motivated to spend the time on it than
I am. You'd also have to test it in other browsers.

>
> For the tip to be properly positioned, I place it absolutely 8 px
> below the bottom of the li element. Therefore I set position:relative
> on the li element, but this causes IE7 to add extra whitespace around
> the element, ignoring any top margin or top border. That's problem
> number two.

Sorry, can't help you here at all.

>
> Please give any feedback or suggestions on how to implement this.

[Unnecessary pasted code snipped]

> See working HTML file at http://justaddwater.dk/wp-content/u...rain_css_d.html

HTH. GL.

--
John
Pondering the value of the UIP: http://improve-usenet.org/

Jesper Rønn-Jensen

2007-10-12, 6:16 pm

John L:
I can't use a elements as it's not meant to navigate between steps
here (there are next/previous buttons for that). So the other
possibility to take out the b element would be to include the tip in
the background-image of the previous li.

I like that idea, but it will by default hide the tip behind the next
li because it's next in the HTML flow.
Possible solution: Add id elements like id="step1", etc. to all list
items.

John Hosking:
I fixed a few things and uploaded a new version :
http://justaddwater.dk/wp-content/u...n_css_d_v2.html
(version 3 is on the way). Removed z-index on li elements and adjusted
the padding.

I also found what caused me trouble with the extra space around the li
element in IE7: There was a style
*{ line-height: 17px } in a related stylesheet. Hmm. Those darn star
selectors seem to affect elements I have never dreamt of. Didn't know
li element had a line-height in IE7 (but apparently didn't have in
IE6)

Why I chose the B element? The reason I use B elements for the added
html tag is actually Tantek
Celik's idea (first implemented by Eric Meyer at Technorati), which
Tantek
describes here in the comments:
http://justaddwater.dk/2007/02/15/r...technorati-way/

I will rewrite the code to make sure that IE 6 is handled better, and
also add some internal margins and paddings to get in line will the
stylesheet.

The IE 6 support will probably require a rewrite as I describe here
(with only 1 background-image), more about that later.

BTW I also posted this at CSS-D but thought it didn't publish for some
reason. So there is another thread here: http://archivist.incutio.com/viewlist/css-discuss/93440

John Hosking

2007-10-12, 6:16 pm

Jesper Rønn-Jensen wrote:

> I fixed a few things and uploaded a new version :
> http://justaddwater.dk/wp-content/u...n_css_d_v2.html
> (version 3 is on the way). Removed z-index on li elements and adjusted
> the padding.

Well, no, you didn't. The z-index:1 is still on ol.train li on the page
at this new URL. You did change the bottom value in .train .tip from
-6px to -8px, but the paddings all look the same to me. What's really
obvious is the addition of a bunch of id's (#n1 to #n19, all with a
different z-index).

>
> I also found what caused me trouble with the extra space around the li
> element in IE7: There was a style
> *{ line-height: 17px } in a related stylesheet. Hmm. Those darn star
> selectors seem to affect elements I have never dreamt of. Didn't know
> li element had a line-height in IE7 (but apparently didn't have in
> IE6)

You sound like a good customer for Eric Meyer's reset.css, which is, um,
somewhere on his site. Ah, see here:
<http://meyerweb.com/eric/thoughts/2...reset-reloaded/> which
also points to earlier discussions of the topic.

>
> I will rewrite the code to make sure that IE 6 is handled better, and
> also add some internal margins and paddings to get in line will the
> stylesheet.

I don't know what you mean here, but it doesn't sound good. Are you
considering adding inline styles to specify margins and padding (as in,
e.g., <ol class="train" style="margin:1em 2em;"> )?

>
> The IE 6 support will probably require a rewrite as I describe here
> (with only 1 background-image), more about that later.

I don't know about specialized IE6 support, but if you're doing
rewriting, move the <style> element up into the <head> where it belongs. ;-)

--
John
Pondering the value of the UIP: http://improve-usenet.org/

dorayme

2007-10-12, 10:16 pm

In article
<1192189588.593855.113580@q5g2000prf.googlegroups.com>,
Jesper Rønn-Jensen <jesperrr@XXXXXXXXXX> wrote:

> I also found what caused me trouble with the extra space around the li
> element in IE7: There was a style
> *{ line-height: 17px } in a related stylesheet. Hmm. Those darn star
> selectors seem to affect elements I have never dreamt of. Didn't know
> li element had a line-height in IE7 (but apparently didn't have in
> IE6)

*{ line-height: 17px } is like a kind of poison. And it is
especially the use of a unit (px) that gives the power to the
herb.

--
dorayme