Basic Css + div help required...

[xirokx]

Hi guys,

Im in the process of changing the layout of a site owned by a charity I volunteer for.

Example

However the nav box and text keep moving around depending on the size of the users browser.

I believe my css and divs are set wrong...i was wondering if someone could take a look at it for me and help me recitify it?

On a seperate note if u also take a look at the background you will notice it goes from grey to white, I was hoping I could use that throughout the entire content box instead of making the background a plain simple white color?

I hope someone can show me the error of my ways?

Please help

Thanks in advance...

 

[tsinc80697]

from just looking at it without seeing the code, it looks like you have the background image centered to the page, and the content/nav bar set a certain distance from the right?
So you can set the content/nav bar to be certain values from either side of the window so that it is centered, or set it the same as the background image.

 

[xirokx]

So you can set the content/nav bar to be certain values from either side of the window so that it is centered, or set it the same as the background image

this is precisely what i dont know how to do, so wondered if someone could help me, like show me the way? so i *** know how to do it for future projects?

please help

thanks in advance...

 

[xirokx]

can someone help me incorporate that grey background color below the light blue rectangle all the way down the middle of the content box?

i dont know how i would get that to work? so it would stop when the text did?

is there a way all my text can stop at one point on the right handside as well?

please advise..

thanks

 

[Sic]

not that you've gone about it the *wrong* way, persee...but you've done it very....weirdly.

when you're looking for a centralised layout such as yours, it's a good idea to put it in a container:

#container
{
margin: 0 auto;
width: 750px;
background: url(pixeldigestlayout12.gif) no-repeat;
padding: 226px 0 0 0;
}

that'll set your header gif in the middle, and allow you to position elements underneath it...marvellous.

next, for your left column - which i just noticed you've also named weirdly. let's call the column that appears on the left, "left"

#left
{
float: left;
width: 130px;
}
#right
{
float: right;
width: 630px;
}

obviously, your paragraphs and whatnot are something you want to sort yourself.

in relation to your other question, if you...the grey that you want to carry on down the central bit, first you'd have to cut up your pixeldigestlayout12.gif or whatever it's called...so that it doesnt start the gradient, then use this:

background-color: #d6d6d6;
background-image: url(headernamethinger.gif) no-repeat;

and change the padding so that the left and right columns sit where you want them to.

hope that helps...it's not tested so it might go funny...i normally have to play with CSS a bit