Forum Moderators: mack

Message Too Old, No Replies

Stretch site header

Having issues w/ tables

         

scts102

9:53 pm on Aug 19, 2007 (gmt 0)

10+ Year Member



Hello,

I am fairly new to web programming (hence the forum), and it seems that I have run into an issue. I am trying to make my header adapt to different resolutions.

Now, I am under the impression that I have to use percentages in order for it to stretch. This much makes sense to me. However, I must be doing something wrong. Here is a general description of how me header is laid out: I have a simple logo on the left hand side, with tabbed navigation on the right hand side. The center of the header is empty. I have the header split into three image files: the left logo, a 'spacer' image, which, when tiled, would appear to create one continuous image (for the center piece), and the navigation for the right hand side.

My goal is to have the logo displayed on the left hand side, with the spacer image tiling to fill up the center until it reaches the navigation image.

mack

9:13 pm on Aug 20, 2007 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Is your layout based on CSS, or simple tables?

With tables one way of doing this would be to have 2 rows, 2 cells on top row and 1 cell for bottom row. In the top left place your loco, then position your tab navigation within the 2nd cell aligned left. Then for the bottom cell tile your spacer image to appear as a bar etc.

The key with the table layout would be to specify the table width as a percentage.

With CSS you might have a div that includes your header, you could them specify your positioning and width within your css file.

Hope this gives you some ideas.

Mack.

ergophobe

10:08 pm on Aug 28, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Is it the tiling that poses the problem? If so, you want to set the image as a background image, and then use repeat to get it to tile as in

background-image: url('image.jpg');
background-repeat: repeat-x;

Notes
- url is relative to the stylesheet
- repeat can be "repeat", "repeat-y", "repeat-x"