Question

I want to convert a .psd to XHTML and I have a menu bar whith round corners streching all the width of the wrapper, what I did so far was making slices for the ends of the bar and one for the center that is set to repeat-x.

For example I have this:

 <div id="tagline" class="grid_16"><!-- begin tagline -->
            <div class="left"></div>
            <div class="center">
                <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2>
            </div>
            <div class="right"></div>
 </div><!-- end tagline -->


#tagline {background:url(images/tagline.jpg) repeat-x top; height:96px;}

#tagline .center {width:930px; float:left;}
#tagline .left {background:url(images/taglineLeft.jpg) repeat-x top left; width:10px; height:96px; float:left;}
#tagline .right {background:url(images/taglineRight.jpg) repeat-x top right; width:10px; height:96px; float:right;}

I am using float for positioning the ends, and my question is what’s the best solution using float or position:absolute. I ask this becauase I don’t want to have problems whith older browsers.

Thank’s.

Answer 1

You can try nested DIVS with background-image, background-repeat and background-position set. Something like this:

<div id="tagline">
  <div     style="background-image: url(images/tagline.jpg);      background-repeat: repeat-x;">
    <div   style="background-image: url(images/taglineLeft.jpg);  background-repeat: no-repeat; background-position: left;">
      <div style="background-image: url(images/taglineRight.jpg); background-repeat: no-repeat; background-position: right;">
          <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2>
      </div>
    </div>
  </div>
</div>

No floats of absolute positions necessary. I have inlined the styles for clarity. Remember to setup the width and height on the outermost DIV. This tip was inspired by this article.