Goro 0

Hello,

I have an issue with a CSS design. I am trying to be resolution-independent, and for the most part I do that by having a fixed (1000px) center and auto margins on the sides.

However, the header of the page stretches on top of all the screen. This is still fine. The problems begin when I add a subheader. The subheader runs from the left end of the page to a point some distance inside the text margin, but only on the left side of the screen. The right side of the screen does not have the subheader.

I've attached a picture that explains this a little better.

Here's the basic code (with all irrelevant stuff removed):

 <div id="frame">
     <div id="header">
     </div>
      <div id="subheader">
          <div id="subheader-left"></div>
      </div>

      <div id="content">
      </div>
    </div>

I can't give you a live page address because the page is still in design phase on my computer.

Thanks for any comments or suggestions

  • Could you be more clear on what you want the page to end up looking like? Do you want the sub header to go from the left to the right side? Sean Maher over 6 years ago

1 answer

1
point
This was chosen as the best answer

Make #subheader-left have auto margins so it is centered in the #subheader div and put your subnavigation links in there. Your orange stripe should then be the background of #subheader. Make it include the orange stripe to the left and transparency on the right and be about 2000 pixels wide. Make sure CSS rule for #subheader is something like {background: url(image.png) no-repeat 50% 100px;} . The 50% will put the image in the dead center of the page. If you get the right edge of it in the right spot, it should always line up with the right edge of your text area even as the page resizes.

Answered over 6 years ago by Sean Maher