Image with left and right corners in the header

Place a background image with left and right corners and of various length

[orfest]

Hello.

I need to make a horizontal navigation menu. Names of menu items are of different length(from "FAQ" to "System Requirements"). I want the selected menu item to have a background image. It looks like: left corner, part that can be used with repeat-x, right corner.

Maybe this picture will help my poor explanation:
/--------------------\
¦System Requirements¦
\_________________/

/----\
¦FAQ¦
\___/

Tried yesterday all day long, but couldn't get something acceptable.

[Marshall]

orfest,

If it's a background image, you can make it as wide (or as high) as you need since only what is necessary will show. That way, you do not need to repeat. That's assuming I understnad your problem correctly.

Marshall

[orfest]

If I make it as height as I require than corners will be stretched. ...and spoiled.

[Marshall]

I am not suggesting forcing the image height. I'm suggesting you resize the image in an image program.

Marshall

[penders]

Assuming you have your horizontal navigation marked up as a <ul>, then one way is to set the left corner as the background image on the <li> and the right corner image as the background image on the containing <a> (display:block; width:100%; background-position:right top;)

Your repeat-x background can be set on the <ul> itself or <div> container.

eg.

ul.nav { 
background: #666 url(img/navbkgrd.gif) 0 0 repeat-x; 
} 
ul.nav li { 
float: left; 
background: transparent url(img/leftcorner.gif) 0 0 no-repeat; 
} 
ul.nav li a { 
display:block; 
width:100%; 
background: transparent url(img/rightcorner.gif) right top no-repeat; 
} 

(...these styles aren't complete - to give the idea)

This will handle expanding of the menu items in the horizontal and you can create another class (perhaps for the <li>, or may be the <a>) for the selected state.

HOWEVER, if you want your menu to grow in all directions (eg. when the user increases the text size in their browser) then you will need to separate the top/bottom, left/right corners and include extra markup (DIVs / SPANs) within the <li> to hang these off.