help! setting up an 800 wide site centered (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

Em -> help! setting up an 800 wide site centered (4/13/2008 13:30:55)

Ok, I'm STUCK!!

I'm missing the "how to" set up an 800 wide site that is centered on the browser page, and then has background on either side which collapses or expands based on the person's resolution size.

Do you just set this up in a table that has essentially 3 columns where the middle is set at 800 pixels, and the sides then have the background?

Seems so basic, but I can't find any info on how to exactly DO THIS.

THANKS for any input!!!

Em



rdouglass -> RE: help! setting up an 800 wide site centered (4/13/2008 13:46:44)

I don't use tables for that. A liitle CSS like this... 
body
{
	margin: 0;
}
#divContent
{
	width: 800px; margin: 0 auto;
}

...a little HTML like this... 
<body>
<div id="divContent">
Blah, blah...
</div>
</body>


That's how I do it anyways. Hope it helps.



Tailslide -> RE: help! setting up an 800 wide site centered (4/13/2008 14:00:56)

have the background image (which would be the left bit, central bit, right bit) slice and then repeat it on the body element like this: 

body {background: url(images/background.jpg) center top repeat-y;}


as well as the stuff Roger's given you - that will repeat the sliced image down the centre of the page and will give the effect you're after.



Tailslide -> RE: help! setting up an 800 wide site centered (4/14/2008 2:24:26)

What you do is this.

Firstly - to get a fixed width site that will fit on a screen without horizontal scrollbars, the width of the actual site itself should be around 760px wide.

So create an image for your background that has a central area that is 760px wide (whatever background colour your actual content area should have. Then each side of that 760px wide area goes the actual background image. The best way to do this is have a smallish repeating pattern. Then save a strip of this as your background image. I've attached (a fairly horrible) example of what I mean.

Now on your actual HTML page you add a containing div - can be called anything you like, I'll call it container.

so you'll have: 

(all the page head stuff here)
<body>
   <div id="container">
       (all the rest of the content go in here)
   </div> <!-- end container -->
</body>
</html>


Now in the stylesheet you do this: 

body {background:#fff url(images/background.gif) top center repeat-y;text-align:center;}
#container {margin:0 auto; text-align:left; width:760px;}


That will make the div called container 760px wide and will centre it on top of the background image which will be repeated down the page.

Edit: Here's a TEST PAGE to show you how it works.

[image]local://upfiles/15313/236DEF4A6A884886AD1AB1EC8752BBE6.gif[/image]



Em -> RE: help! setting up an 800 wide site centered (4/14/2008 8:34:39)

Tailspin.. Thank you so much!!! I finally understand!!

So I'm curious... why drop the 800 down to 760??

And I'm assuming that if the sample you provided is viewed at 800, only 20 pixels of the background will show on each side? And when viewed at 1024 or greater, the background image will repeat to fill the space?

Thanks again!!

Em



Tailslide -> RE: help! setting up an 800 wide site centered (4/14/2008 9:08:01)

It's 760 because you need to allow for the vertical scrollbars etc - it's different on each browser but 760px will be fine on all of them.

The background image is repeating vertically down the page and will be as long as necessary.

Width-wise - It'll be whatever width you create - the example I've used is 1000px wide. If you create a very wide image then you end up eating bandwidth so best bet is to have something not too wide - maybe fade it into the background colour and then you get a seemless effect at any width. In the example posted the background colour is white:

body {background:#fff url etc etc.

so just change that as necessary



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375