CCS gurus please.

[JonD]

Im trying to create this:

I can create the horizontal list which underlines each link when i hover over, but im having trouble making the blue line appear like this pic. Im trying to do it without images. The blue line is a div?

Can it be done?

 

[Al Vallario]

Unless the blue line is designed to hold content, it wouldn't be semantically correct to construct it using a <div>

It would be much easier to set the line as a background image in the CSS using something along the lines of the following:

ul#navigation {
  background: url("path/to/image.png") center right no-repeat #fff;
  /* Other information here */
}

That way you're keeping unnecessary code out of the HTML

 

[JonD]

Hmm yeh that would work. Would there not be a way to have the blue as the background but give it sum kind of border to make it appear like I want?

I would use images, im just wandering if it can be done without.

 

[Augmented]

Yeah, it's quite possible. You might try and approach it with:

• <ul> with a 10px white border, and blue background-color. Height/width set to span length/breadth.
• <li> elements with white background, abs-positioned over the top of the <ul>, obscuring the <ul> blue background. You'd likely need to absolute position in order that the <li> elements won't be affected by the size of their container's borders (the <ul>). You could probably get away with floating/inlining, but the 'clickable' areas are going to be only as tall as the the blue line.

Might work, might not .