CSS drop down menu - html

Question

I want to make a drop down list with nice buttons that are long as the screen (compatible with more screens)....
I will use 3 images (left , middle and right) ... something like this (of course, smaller):
The middle part will repeat itself to "fill" the button. I want to get something like this:
There is no example with 3 images, all I could found is only 2 images.

Answer 1

my solution:
html:
<div class="button">
<div class="left"></div>
<div class="inner">text</div>
<div class="clear"></div>
</div>
css:
* {margin: 0px; padding: 0px;}
.clear {clear: both; height: 0px; font-size: 0px; line-height: 0px;}
.button {
padding-right: 15px; /* right image width */
background: url('right_image.jpg') no-repeat right top;
height: 20px; /* images height */
}
.button .left {
background: url('left_image.jpg') no-repeat right top;
width: 15px; /* left image width */
height: 20px; /* images height */
float: left;
}
.button .inner {
height: 20px; /* images height */
background: url('middle_image.jpg') repeat-x right top;
text-align: center;
}
jsFiddle Demo

Answer 2

It's very easy.
That's html:
<button>
<span><span> MENU </span></span>
</button>
You should place all parts of your image in a very wide none-transparent(for transparent png method is harder a little bit) PNG(like it looks on design), trimmed to the image content. (one image wouldn't increase size much, but will make less http request to server). It called sprite.
button { }
button span {
padding:0 0 0 25px;
background:url('image.png') left 0;
display:inline-block;
height:25px;
line-height:25px;
}
button span span {
padding:0 25px 0 0;
background:url('image.png') right 0;
}
That's it. Of course you should place your image name, and your values of padding, height and line-height.

Answer 3

There are no examples with 3 images because you don't need 3 images. Create a small right images (like you have posted above) and create a left + center image with your maximum width (let's say 800px). Set the left sided / background image on a <li> and hook the right side up to the <a>.
<li>
Link
</li>

Answer 4

Try this - this uses 3 background images which isn't compatible with IE8 and below, but you could use two inner divs to give you three containers and put one image in each - note the bottom image is listed last.
nav {
height:75px; /* height of graphic elements */
background:
url(images/left_end.png) no-repeat 0px 0px,
url(images/right_end.png) no-repeat right top,
url(images/center.png); /* this images repeats */
}