[thelist] CSS background positioning and link borders

[Stephen Caudill]

--------------- Gregory Wostrel wrote: --------------- 
 
: Whoa! You totally rock!
: Anytime that you are bored, let me know and I am sure I will have
: some other problem that I can't quite figure out. The links look
: great. Now, any chance of explaining why it works? That's problem
: more work than just doing it.

Ah... yes. Guess I was being lazy as well as bored :)

Okay, it's not too difficult.  The lynch-pin is giving the list's (if you notice, in my code, I changed your <dl> to a <ul>, as it's more semantically correct) containing block a fixed width (in this case 180px) and setting the anchor's 'display' to 'block'.  This causes the <a> to take on the properties of a block level entity, one of those properties being width:100%;, leaving you with an anchor tag which takes up as much room as it's container allows.  So, since it has two affective containers, a <div> and a <li>, one of whom has an explicit width (the div), the other who's width is that of it's contents (the list item), it allows the anchor to take up the whole width of the div (once you remove padding and margin, which are built into unordered lists)...

Now, the reason that just the process link has a fat purple border on the right is because of the descendant selector I employed:

#process .process{border-right:25px solid #7174A6;}

which affected any class 'process' inside of any id 'process'.  In this case, I put the id 'process' in the body tag.  To maintain a consistent effect for this across the pages of the site, you'll need to add rules like these:

#process .process{border-right:25px solid #7174A6;}
#process .process{border-right:25px solid #7174A6;}
#process .process{border-right:25px solid #7174A6;}