Need help on keeping everything centered but with a min size

ziplock122949 · #1 Oct 1st, 2007, 05:11

I am having a little trouble with my website. If you pull and adjust the size of this page (the webforumz page) the center section stays a fixed width, is centered on the page and is always a minimum distance away from the edges. How do you do that? What do I need to adjust in my code? My site is www.stevesdealpage.com and it has 5 sections on each page. Here is a copy of the head for the sections of my site

HTML: Select all

<style type="text/css">
<!--
/* title banner box */
#apDiv1 {
    position:absolute;
    left:15px;
    top:15px;
    width:790px;
    height:40px;
    z-index:1;
    background:#ff0000;
}
/* menu bar box */
#apDiv2 {
    position:absolute;
    left:15px;
    top:70px;
    width:105px;
    height:920px;
    z-index:2;
    background:#000000;
}
/* ads box */
#apDiv3 {
    position:absolute;
    left:680px;
    top:70px;
    width:125px;
    height:920px;
    z-index:3;
    background:#000000;
}
/* copyright box */
#apDiv4 {
    position:absolute;
    left:15px;
    top:1005px;
    width:790px;
    height:24px;
    z-index:4;
    background:#ff0000;
}
/* main area */
#apDiv5 {
    position:absolute;
    left:125px;
    top:70px;
    width:545px;
    height:920px;
    z-index:5;
    background:#000000;
}

Jack Franklin · #2 Oct 1st, 2007, 06:21

You need to create a wrapper/container div that all your content goes in.

Code: Select all

#wrapper {
width: 800px;
margin: 0 auto; 
}

Code: Select all

<div id="wrapper">
..content..
</div>

This will require a bit of re-work with your current CSS, but good luck!

jack

Monie · #3 Oct 1st, 2007, 08:48

Quote:

Originally Posted by jackfranklin

You need to create a wrapper/container div that all your content goes in.

Code: Select all

#wrapper {
width: 800px;
margin: 0 auto; 
}

Code: Select all

<div id="wrapper">
..content..
</div>

This will require a bit of re-work with your current CSS, but good luck!

jack

Hai jackfranklin,

I don't think that that will solve the problem.
He is using a lot of {position: absolute} in all of the element. I tried to do the same solution but nothing happen to the content position.

ziplock122949, whats up with the {position: absolute} things?
Can you not use that to position your div elements? The css code that jackfranklin gave you can only be used if you throw away the {position: absolute} set it to default value and use the wrapper to position your site in the center of the screen.

The key properties in centering your site is the (margin: 0 auto}

Jack Franklin · #4 Oct 1st, 2007, 15:31

Quote:

Originally Posted by monie

Hai jackfranklin,

I don't think that that will solve the problem.
He is using a lot of {position: absolute} in all of the element. I tried to do the same solution but nothing happen to the content position.

Yes, that is what I mean't when I said 'this requires a bit of re-work with your code'. You need to get rid of the position: absolute for this to work.

Monie · #5 Oct 2nd, 2007, 01:47

yeah, misunderstood!

It's up to ziplock to do the trick...

ziplock122949 · #6 Oct 2nd, 2007, 08:42

ok, got me half way to my goal. I deleted the position lines, added the wrapper header code and started the wrapper and ended it just inside the <body> and </body>. The page stays centered but all of the div sections from before are vertically one right after another.
i just started editing one of my temp files so if something bad happened it wouldnt matter too much here is the link
http://www.stevesdealpage.com/storetemp.php
I tried deleting the left and top also but it didnt work.

thanks for the help too. I only know a little html but making programs for engineering classes helps me figure out what the heck everything is trying to do. (I have no clue what the programming languages are that we learned, it was using matlab mostly.) Having a idea of what is going on is helping since the website uses some open code here and there while allowing me to do some deeper editing than most beginners can do.

Monie · #7 Oct 2nd, 2007, 08:48

Your link did not work!

Jack Franklin · #8 Oct 2nd, 2007, 12:05

On my screen the site is in the center so well done

Jack

alexgeek · #9 Oct 2nd, 2007, 15:30

Quote:

Originally Posted by monie

Your link did not work!

Did for me

ziplock122949 · #10 Oct 3rd, 2007, 05:53

Anyone know how to finish this up? Having a little difficulty moving the sections to where I want them.
the body looks like this

PHP: Select all


<body>
<div id="wrapper">
<div class="style1" id="apDiv1"> ...
...all the content and other sections...
...
</div>
</div>
</body>

Monie · #11 Oct 3rd, 2007, 07:31

Quote:

Originally Posted by monie

Your link did not work!

Ok, it work now..

Quote:

Originally Posted by ziplock122949

Anyone know how to finish this up? Having a little difficulty moving the sections to where I want them.

Where do you want to move them?
Vertically? Horizontally...?

ziplock122949 · #12 Oct 5th, 2007, 03:34

so it is in the same layout as my other pages right now (www.stevesdealpage.com) Im trying to get the current look inside the wrapper but its not working (www.stevesdealpage.com/storetemp.php)

Emzi · #13 Oct 5th, 2007, 08:59

Try applying 'float:left;' to the DIV's that are appearing wrong.

welshstew · #14 Oct 5th, 2007, 09:10

Ziplock, why not filp this baby around, and change the main site to be like the store (i.e. centered) I think it looks a lot better when it's in the middle of the screen (personal opinion)

ziplock122949 · #15 Oct 7th, 2007, 18:49

Quote:

Originally Posted by welshstew

Ziplock, why not filp this baby around, and change the main site to be like the store (i.e. centered) I think it looks a lot better when it's in the middle of the screen (personal opinion)

Thats what I am trying to do but its not working so well. I want the current layout to be the same but just inside the wrapper which is centered. As you can see by the test page it doesnt keep the layout it just puts one div section after another vertically so everything is out of place.

AdRock · #16 Oct 7th, 2007, 20:13

Can you post your css again?

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Need help on keeping everything centered but with a min size