Question

I have some layout css questions. Their more like best practices and whats the most efficient way to build this. Let me start with a diagram of what I’m trying to achieve.

This header menu background will be liquid and the buttons inside it will be fixed. So really its made up of a left button independent of the gray style background. Then 3 or more buttons in the gray style background followed by some icons and a search filed, all within the gray background. My main issue is getting started with how to achieve the grey background expanding to the browsers width 100% and still having 2 rounded corners at each end.

Here is a pseudo html structure

<div id="menuHeader">
<ul>
    <li class=""><a href="#">home</a></li>
    <li class=""><a href="#">button1</a></li>
    <li class=""><a href="#">button2</a></li>
    <li class=""><a href="#">button3</a></li>
    <li class="tools">
      <div class="icon">icon1</div>
      <div class="icon">icon2</div>
      <div class="icon">icon3</div>
      <div class="search"></div>
    </li>
</ul>

Now the css issue where do I put my repeating background. If I put it on the menuHeader as a background image then its going to be one long repeating background graphic with no left and right corners.
Would I need to setup a div for left right and center. Then have my gray buttons inside that and my blue home button outside that center div to the left of the left div. Or is there a way to do it where I can use the existing tags I have now and not have to deal with extra empty div markup.

I’m sorry if I’m not more clear but the main question I think is clear how can I get the background graphic to have rounded corners along with repeating background. Then be able to add my buttons in as background graphics.

Update: this is not going to be html5 unfortunately

Answer 1

#menuHeader {
  position: relative;
  width: 100%;
  background: url("bg.png") repeat;/*An image which has a width of 1px is sufficient*/
}
#leftSide, #rightSide{
  position: absolute;
  top: 0;
  width: 20px;/*Whatever width*/
  height: 40px;/*Whatever height*/
}
#leftside{
  background: url("left.png") transparent;
}
#rightside{
  background: url("right.png") transparent;
}

Add this HTML inside the div#menuHeader:

<div id="menuHeader">
  <div id="leftside"></div><div id="rightside"></div><!--This location is chosen, so that the automatic z-indexing causes the background to stay at the background-->
  ....
</div>

Create two images (or one, to reduce server load, and use background-position). If you want to add that blue box, expand the left background-image. Make sure that the elements inside the div#menuHeader have a transparent or no background.