Header, Nav bar, Content box sizes

Soldato
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
Hi,

How do ppl who create websites know what size to create their headers, nav bars and content box sizes when designing a site?

I have created one or two sites but they are always so simple because whenever I use lets say photoshop to create a fancy header, nav bar or content box when I set the background image its always fixed...Even tho I try and use percentage symbols..

I know you can slice the layouts you create in photoshop but my site then will only suit a certain res....However when I keep it simple it the header, content box and nav bar will auto size as per the viewers browser....

Please can you recommend a tutorial or advise me how I can create headers, nav bars and content boxes so they auto resize for any given resolution..

Thanks in advance..

Cheers!!!
 
If your wanting a header that automatically stretches across a users screen you can just trick the user into thinking it is, instead of actually doing it.

Create a div, which will be your header, then create another 2 div's inside it which you will set as float left and float right, then place 2 images in them. For all the div backgrounds set a standard colour, say navy blue for example (#000080) and then let your 2 images on either side fade into the navy blue by using a gradient. On the left image you could have the websites logo ... and on the right side you could be maybe have a menu of some sort? So know matter what screen size the user has it will look like the header is stretching right across the screen.

Theres other ways of doing it like instead of using a colour you could use a repeating image for the main div and fade in other images in the 2 seperate ones, that sort of thing.

Muck about with it though, its pretty easy once you get the hang of it.
 
hey

what your saying sounds really interesting!!

do you have an example or could you create an example for me?

would be great if you could do either one of them mate

thanks in advance..
 
Back
Top Bottom