Hi all,
I have a website design which i need to convert to HTML but am having trouble planning how the header is going to be coded.
Here is a very quick sample of the type of thing im trying to do:
The box in the middle is the content area and the little fork like objects coming from the header are the menu buttons.
The header will need to be stretched for it to be centered at all times but as it has uneven lines im unsure about how to achieve this.
Any ideas?
I think you should try to repeat the header by having a image that you can use continuously. Here is how I would do it.
Ensure the Yellow bit is a transparent png, create a header div with 100% width (of course). Using CSS’s background position property you can shift it away from the center while ensuring that it repeats and has a Z-index higher than the div that will contain the menu items. From there, the rest is easy.
Let me know how it goes.
Gerald
Thanks for your reply, I see what you mean about extending the header image but im not too sure about placement for this.
I create a div #header and set the large header image as a background, this is then set to position absolute?
How can i keep the center of backgroud image above the content like in my first image?
Not sure what you mean by the second comment, but as for the first, no need for any absolute position. Make the body bg color red. Then have a very wide background image at the top (in a #header div, if you like, that is centered on screen (background: url() no-repeat 50% 0; )
Remember that everything on the web is basically square, even if you fake it otherwise. So I would try positioning the menu in relation to the background image and cut out squares for the tab links (see picture below) that sit over the background image. Using pixels, things should line up OK. You’d include the text for the tabs with the image in this case, I’d say.
Thanks for that ralph. I’ve managed to get this exactly how i wanted by using:
background:url(…/images/bg_header.png) no-repeat 70% 0;
