[thelist] CSS Challenge

[Seyon]

Message from Seyon (6/1/2004 07:17 PM)
>Message from Jeff Howden (6/1/2004 03:29 PM)
>>However, there's one part that's really got me stumped, the
>>header/navigation combination [1].
>>
>>The 4 bars on the left and right represent top-level navigation for the
>>site.  The bit in the middle with the half-round is the logo.  The blue bar
>>top-left represents the hover state as well as an indicator of the section
>>of the site currently being viewed.
>
>Just off the top of my head, though, I'd say do the navigation as normal 
>and drop the logo in with absolute positioning. Use a gif and make the 
>portion outside the curve transparent.

Ok, looking at it again it's not as simple as I thought.

Here's another suggestion.
Have the background be a series of horizontal lines, effectively, the 
borders between the navigation bars. The lines will repeat horizontally, 
not vertically, to fill the screen side to side.
Position the logo centrally using absolute positioning and maybe z-index to 
make sure it sits above the navitation boxes.
Make the two sets of navigation boxes 50% width so that each will stretch 
behind the logo. Use margins and padding to get the text to line up between 
the bars in the background. Use classes and hover to manipulate the 
background colour of the bars.

Does that make sense?

regards.
-marc

--
Trinidad Carnival in all its photographic glory. Playyuhself.com
http://www.playyuhself.com/