Ever since I've seen the light of
CSS design, I've been working on converting most of my old designs from the old non-standard table-based layouts to clean CSS layouts. One of the sites I'm in the process of working on had a
list of photograph options and prices that were laid out similar to how the table of contents in a book would be laid out. The name or description of the option was left aligned, then there was a series of dots stretching across the page, and then the price was right aligned.
Originally I had created the price list using a 3 column table where the cells in the center column were filled with about a million periods and had the overflow set to hidden. It only kind of worked correctly in IE. The new solution that I came up with looks much nicer, has valid
HTML and CSS, is completely accessible, and degrades nicely for browsers without CSS support.
Even though I'm still a complete CSS
n00b and any real CSS guru could probably rip my solution to shreds, I was kind of impressed with what I came up with, so I thought I'd post it here for the world to see. I don't have a Mac, but I have tested this on
FireFox,
IE6, and
Opera, and it looks great on all of them. Plus, it looks fine on
Safari according to
SafariTest.
The HTML is basically just an unordered list with a set of 3 spans to make up the item,
ellipsis, and the value...
<ul class="Items">
<li>
<span class="Name">Item 1</span>
<span class="Ellipsis">...</span>
<span class="Value">First Value </span>
</li>
<li>
<span class="Name">Item Number 2</span>
<span class="Ellipsis">...</span>
<span class="Value">Value 2</span>
</li>
<li>
<span class="Name">Third Item</span>
<span class="Ellipsis">...</span>
<span class="Value">Value Three</span>
</li>
</ul>
The CSS is where all the magic happens. First I absolutely positioned the item names on the left, and the item values on the right.
.Items .Name
{
position: absolute;
top: 0; left: 0;
}
.Items .Value
{
position: absolute;
top: 0; right: 0;
text-align: right;
}
Then I used a 5x2 background image to create the repeating dots on the list item. I also set the ellipsis to display none.
.Items li
{
position: relative;
background-image: url(dot.gif);
background-repeat: repeat-x;
background-position: 0 .85em;
list-style: none;
}
.Items .Ellipsis { display: none; }
It was a nice try (
example 1), but not exactly what I was looking for. Any standards compliant browser completely failed, while IE6 looked only vaguely similar to what I was looking for. The list item elements were basically empty since everything was either absolutely positioned or hidden, so they all just collapsed on top of each other.
To fix the collapsing problem, I tried setting the list item height to 1.5 em's. That kept the items from collapsing and gave them some vertical spacing.
.Items li
{
position: relative;
background-image: url(dot.gif);
background-repeat: repeat-x;
background-position: 0 .85em;
list-style: none;
height: 1.5em;
}
Now the only problem left was that the background dots could be seen through the items and values (
example 2). To fix that, I just set the background color of the items and values to white and gave them a little padding to create a gap before the dots started.
.Items .Name
{
position: absolute;
top: 0; left: 0;
padding: 0 5px 0 0;
background-color: white;
}
.Items .Value
{
position: absolute;
top: 0; right: 0;
text-align: right;
padding: 0 0 0 5px;
background-color: white;
}
That worked great (
example 3), but then I realized that I could get rid of the height on the list items if I let the ellipses be displayed. The added bonus of having the background color on the item names is that I didn't have to worry about the ellipses being visible. They just slid over to the left and were hidden under the absolutely positioned item names. That also meant that I could remove the excess ellipsis spans from the HTML. Here's the final CSS and the
final solution...
.Items li
{
position: relative;
background-image: url(dot.gif);
background-repeat: repeat-x;
background-position: 0 .85em;
margin: 0;
padding: 0;
list-style: none;
}
.Items .Name
{
position: absolute;
top: 0; left: 0; z-index: 100;
padding: 0 5px 0 0;
background-color: white;
color: black;
}
.Items .Value
{
position: absolute;
top: 0; right: 0; z-index: 100;
text-align: right;
padding: 0 0 0 5px;
background-color: white;
color: black;
}
The only real problems I see so far with this solution is that the item names can only be one line high, and when the text size is enlarged enough the item name eventually becomes hidden behind the value.
Feel free to take this code and use it however you want. Slice and dice it to fit your needs. I'm still kind of new at this CSS stuff, so the only thing that I ask is that you leave a comment if you find a better way to do this or if you find some major problems with my solution.