Centering a site for any resolution

rkeefover
Novice
Joined: Jun 28, 2008
Posts: 16
Status: Offline

June 28th, 2008, 11:48 am

Hey guys,
I am newer to website design and i am trying to center my site for any browser, no matter what resolution. I have catered the size to 1024 x 768 but for anything higher it throws the page to the left corner rather than the center. I am using dreamweaver and I read up a bit and found out that a jell-o layout is what I am looking for as I dont need to use percentages to adjust the page to each browser like a fluid/liquid layout, but rather I just need to keep it the same size but center it. I keep everything within div's, so what is the best way to center the whole page for any resolution?
Thanks again for your time

- Ryan

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

June 28th, 2008, 11:48 am

spork
Brewmaster
Joined: Sep 22, 2003
Posts: 6134
Loc: Seattle, WA
Status: Offline

June 28th, 2008, 12:02 pm

Wrap everything in a <div> element, then center the div by specifying automatic margins for both sides of it:

HTML Code: [ Select ]

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

CSS Code: [ Select ]

div#wrapper {
width: 1024px;
margin: 0 auto;
}

div#wrapper {
width: 1024px;
margin: 0 auto;
}

The Beer Monocle. Classy.

theBruney
Student
Joined: May 30, 2007
Posts: 67
Loc: China
Status: Offline

June 28th, 2008, 12:12 pm

Yes, what spork said.

rkeefover
Novice
Joined: Jun 28, 2008
Posts: 16
Status: Offline

June 28th, 2008, 2:22 pm

Ok so here is what i tried:
--------------------------------

Code: [ Select ]

<div id="apDiv25">
....all my body content...
</div>

<div id="apDiv25">
....all my body content...
</div>

---------------------------------
and then i defined my div as:
-------------------------------

Code: [ Select ]

#apDiv25 {
    width:1024px;
    margin: 0 auto;
        }

#apDiv25 {
width:1024px;
margin: 0 auto;
}

-----------------------------

However it didnt work. I tried naming it as you suggested as well, the same process as above but with the "wrapper" name, and again it didnt work. I think i understand the concept, wrapping everything in an auto margin div, but i must not understand how to execute it correctly :/

spork
Brewmaster
Joined: Sep 22, 2003
Posts: 6134
Loc: Seattle, WA
Status: Offline

June 28th, 2008, 5:58 pm

You placed everything within your <body> tag, right? From the way you've described it, it sounds like you may have accidentally wrapped your <body> in the div.

When you say that it doesn't work, what exactly is happening? Does the content not show up at all, or is it still just incorrectly aligned?

The Beer Monocle. Classy.

Bogey
Bogey
Joined: Jul 14, 2005
Posts: 8212
Loc: USA
Status: Offline

June 28th, 2008, 7:44 pm

Try CTRL+ALT+Refresh button in browser (Well, a hard refresh anyway).

"Bring forth therefore fruits meet for repentance:" Matthew 3:8

rkeefover
Novice
Joined: Jun 28, 2008
Posts: 16
Status: Offline

June 28th, 2008, 8:41 pm

Sorry i meant to say that i placed the div within the body, so i didnt accidentally wrap the whole body. The content still appears and everything, it doesnt mess up the site, it just didnt change anything and doesn't change the alignment at all.

spork
Brewmaster
Joined: Sep 22, 2003
Posts: 6134
Loc: Seattle, WA
Status: Offline

June 28th, 2008, 9:21 pm

Did you perform a hard refresh like Bogey suggested? (Shift + Reload)

The Beer Monocle. Classy.

rkeefover
Novice
Joined: Jun 28, 2008
Posts: 16
Status: Offline

June 28th, 2008, 10:48 pm

Yep, im viewing the site using the dreamweaver render (through ie or firefox) so it auto refreshes for each time you view it, but i also published it and tried a hard refresh still nothing changes. Here is the code i have, but i only showed the one declared div that is relevant, i placed this declaration right below the other div declarations so that should be correct:
-------------------------------------------------------------------

----this is the centering div, defined with the other div elements-----

Code: [ Select ]

#apDiv25 {
width: 1024px;
margin: 0 auto;
}

#apDiv25 {
width: 1024px;
margin: 0 auto;
}

--------------------------------

Code: [ Select ]

<body class="oneColLiqCtrHdr">

<div id="apDiv25"> <----- This is the centering div element
<div id="apDiv1"><img src="images/bg.jpg" align="center" width="839" height="598" /></div>
<div id="apDiv2"><img src="images/circle bar.png" width="183" height="441" /></div>
<div id="apDiv3"><img src="images/nav bar.png" width="776" height="106" /></div>
<div id="apDiv6"><a href="index.html"><img src="images/home button.png" width="49" height="25" border="0" /></a></div>
<div id="apDiv7"><a href="about.html"><img src="images/about button.png" width="71" height="19" border="0" /></a></div>
<div id="apDiv8"><a href="news.html"><img src="images/news button.png" width="45" height="24" border="0" /></a></div>
<div id="apDiv9"><a href="events.html"><img src="images/events button.png" width="53" height="20" border="0" /></a></div>
<div id="apDiv10"><a href="fuel.html"><img src="images/fuel button.png" width="38" height="20" border="0" /></a></div>
<div id="apDiv11"><a href="calendar.pdf"><img src="images/calendar button.png" width="79" height="23" border="0" /></a></div>
<div id="apDiv12"><a href="contact.html"><img src="images/contact button.png" width="87" height="25" border="0" /></a></div>
<div id="apDiv13"><a href="media.html"><img src="images/media button.png" width="58" height="23" border="0" /></a></div>
<div id="apDiv14"><a href="fuel.html"><img src="images/fuel logo.png" width="178" height="54" border="0" /></a></div>
<div id="apDiv15"><a href="http://speedthelight.ag.org/"><img src="images/stl logo.png" width="118" height="90" border="0" /></a></div>
<div id="apDiv16"><a href="http://thesevenproject.com/"><img src="images/seven logo.png" width="135" height="58" border="0" /></a></div>
<div id="apDiv17"><a href="http://www.chagwichita.org/"><img src="images/chag button.png" width="78" height="29" border="0" /></a></div>
<div id="apDiv18"><a href="forms.html"><img src="images/forms button.png" width="61" height="19" border="0" /></a></div>
<div id="apDiv19"><a href="map.html"><img src="images/church map button.png" width="94" height="27" border="0" /></a></div>
<div id="apDiv20"><a href="mailto:heirforceyouth@aol.com"><img src="images/email link.png" width="153" height="31" border="0" /></a></div>
<div id="apDiv23">
<div align="center">
<div align="justify" class="style8">
<div align="left">
<p align="left" class="style16">Our Ministry</p>
<p>Our ministry exists to have students <span class="style15">honor</span> God with their lives, to <span class="style1">discover</span> their ministry, to help them <span class="style1">grow</span> in their faith so that they can reach non-believing students and help them <span class="style1">connect</span> with other Christians </p>
</div>
</div>
</div>
<p align="left" class="style8">Wednesday nights at <span class="style1">7:00</span> P.M. students from Wichita, and the surrounding community come together for an evening of fellowship and worship. Teens will be challenged to live a life without compromise while engaging them to discover all the joys of living for Christ. To find out more information about our ministry and directions to our church visit our <a href="about.html" class="style11">About Us</a> link.</p>
<p align="left" class="style16">Pastor Tony</p>
<p align="left" class="style8"> <img src="images/tony1.jpg" width="250" height="375" align="left" />Pastor Tony is what some people like to call <span class="style1">'pro</span>. So if you aren't coming on Wednesday nights, you're missing out. If you need to get in touch with him or just wanna say hey, be sure to drop him an <a href="mailto:pastorthankins@aol.com" class="style11">email</a>, he'd love to hear from you!</p>
<p align="left" class="style16"> </p>
<p align="justify" class="style9"> </p>
</div>
</div> < ------closing for the centering div element

</body>

<body class="oneColLiqCtrHdr">
<div id="apDiv25"> <----- This is the centering div element
<div id="apDiv1"><img src="images/bg.jpg" align="center" width="839" height="598" /></div>
<div id="apDiv2"><img src="images/circle bar.png" width="183" height="441" /></div>
<div id="apDiv3"><img src="images/nav bar.png" width="776" height="106" /></div>
<div id="apDiv6"><a href="index.html"><img src="images/home button.png" width="49" height="25" border="0" /></a></div>
<div id="apDiv7"><a href="about.html"><img src="images/about button.png" width="71" height="19" border="0" /></a></div>
<div id="apDiv8"><a href="news.html"><img src="images/news button.png" width="45" height="24" border="0" /></a></div>
<div id="apDiv9"><a href="events.html"><img src="images/events button.png" width="53" height="20" border="0" /></a></div>
<div id="apDiv10"><a href="fuel.html"><img src="images/fuel button.png" width="38" height="20" border="0" /></a></div>
<div id="apDiv11"><a href="calendar.pdf"><img src="images/calendar button.png" width="79" height="23" border="0" /></a></div>
<div id="apDiv12"><a href="contact.html"><img src="images/contact button.png" width="87" height="25" border="0" /></a></div>
<div id="apDiv13"><a href="media.html"><img src="images/media button.png" width="58" height="23" border="0" /></a></div>
<div id="apDiv14"><a href="fuel.html"><img src="images/fuel logo.png" width="178" height="54" border="0" /></a></div>
<div id="apDiv15"><a href="http://speedthelight.ag.org/"><img src="images/stl logo.png" width="118" height="90" border="0" /></a></div>
<div id="apDiv16"><a href="http://thesevenproject.com/"><img src="images/seven logo.png" width="135" height="58" border="0" /></a></div>
<div id="apDiv17"><a href="http://www.chagwichita.org/"><img src="images/chag button.png" width="78" height="29" border="0" /></a></div>
<div id="apDiv18"><a href="forms.html"><img src="images/forms button.png" width="61" height="19" border="0" /></a></div>
<div id="apDiv19"><a href="map.html"><img src="images/church map button.png" width="94" height="27" border="0" /></a></div>
<div id="apDiv20"><a href="mailto:heirforceyouth@aol.com"><img src="images/email link.png" width="153" height="31" border="0" /></a></div>
<div id="apDiv23">
<div align="center">
<div align="justify" class="style8">
<div align="left">
<p align="left" class="style16">Our Ministry</p>
<p>Our ministry exists to have students <span class="style15">honor</span> God with their lives, to <span class="style1">discover</span> their ministry, to help them <span class="style1">grow</span> in their faith so that they can reach non-believing students and help them <span class="style1">connect</span> with other Christians </p>
</div>
</div>
</div>
<p align="left" class="style8">Wednesday nights at <span class="style1">7:00</span> P.M. students from Wichita, and the surrounding community come together for an evening of fellowship and worship. Teens will be challenged to live a life without compromise while engaging them to discover all the joys of living for Christ. To find out more information about our ministry and directions to our church visit our <a href="about.html" class="style11">About Us</a> link.</p>
<p align="left" class="style16">Pastor Tony</p>
<p align="left" class="style8"> <img src="images/tony1.jpg" width="250" height="375" align="left" />Pastor Tony is what some people like to call <span class="style1">'pro</span>. So if you aren't coming on Wednesday nights, you're missing out. If you need to get in touch with him or just wanna say hey, be sure to drop him an <a href="mailto:pastorthankins@aol.com" class="style11">email</a>, he'd love to hear from you!</p>
<p align="left" class="style16"> </p>
<p align="justify" class="style9"> </p>
</div>
</div> < ------closing for the centering div element
</body>

casablanca
Proficient
Joined: May 29, 2007
Posts: 481
Status: Offline

June 28th, 2008, 10:54 pm

What about the divs inside the main div (apDiv1-apDiv23) - what styles do they use?

No Strings Attached: A JavaScript graphics demo.

rkeefover
Novice
Joined: Jun 28, 2008
Posts: 16
Status: Offline

June 29th, 2008, 12:29 pm

This is gonna be a bit messy with so much code, but maybe i have the other div elements with conflicting styles? Would that affect why the margins didnt work? I noticed i have some margins set in the container definitions as well...
--------------------------------------------------------------

Code: [ Select ]

.oneColLiqCtrHdr #container {
    width: 80%; /* this will create a container 80% of the browser width */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtrHdr #header {
    background: #DDDDDD;
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColLiqCtrHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColLiqCtrHdr #mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
}
.oneColLiqCtrHdr #footer {
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
}
.oneColLiqCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
#apDiv1 {
    position:absolute;
    left:-12px;
    top:8px;
    width:883px;
    height:611px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:12px;
    top:162px;
    width:243px;
    height:464px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:40px;
    top:26px;
    width:753px;
    height:124px;
    z-index:3;
}
#apDiv4 {
    position:absolute;
    left:266px;
    top:96px;
    width:48px;
    height:21px;
    z-index:4;
}
#apDiv5 {
    position:absolute;
    left:311px;
    top:97px;
    width:64px;
    height:23px;
    z-index:5;
}
#apDiv6 {
    position:absolute;
    left:74px;
    top:94px;
    width:47px;
    height:27px;
    z-index:4;
}
#apDiv7 {
    position:absolute;
    left:125px;
    top:98px;
    width:66px;
    height:24px;
    z-index:5;
}
#apDiv8 {
    position:absolute;
    left:197px;
    top:94px;
    width:46px;
    height:27px;
    z-index:6;
}
#apDiv9 {
    position:absolute;
    left:243px;
    top:99px;
    width:54px;
    height:23px;
    z-index:7;
}
#apDiv10 {
    position:absolute;
    left:552px;
    top:101px;
    width:39px;
    height:23px;
    z-index:8;
}
#apDiv11 {
    position:absolute;
    left:586px;
    top:99px;
    width:71px;
    height:24px;
    z-index:9;
}
#apDiv12 {
    position:absolute;
    left:658px;
    top:98px;
    width:81px;
    height:27px;
    z-index:10;
}
#apDiv13 {
    position:absolute;
    left:740px;
    top:100px;
    width:44px;
    height:24px;
    z-index:11;
}
#apDiv14 {
    position:absolute;
    left:94px;
    top:202px;
    width:138px;
    height:59px;
    z-index:12;
}
#apDiv15 {
    position:absolute;
    left:92px;
    top:288px;
    width:64px;
    height:98px;
    z-index:13;
}
#apDiv16 {
    position:absolute;
    left:124px;
    top:404px;
    width:105px;
    height:67px;
    z-index:14;
}
#apDiv17 {
    position:absolute;
    left:153px;
    top:502px;
    width:56px;
    height:30px;
    z-index:15;
}
#apDiv18 {
    position:absolute;
    left:140px;
    top:530px;
    width:49px;
    height:19px;
    z-index:16;
}
#apDiv19 {
    position:absolute;
    left:148px;
    top:549px;
    width:56px;
    height:29px;
    z-index:17;
}
#apDiv20 {
    position:absolute;
    left:352px;
    top:578px;
    width:196px;
    height:29px;
    z-index:18;
}
#apDiv21 {
    position:absolute;
    left:509px;
    top:197px;
    width:445px;
    height:324px;
    z-index:20;
    overflow: visible;
    background-color: #000000;
}
.style1 {color: #FFFFFF}
#apDiv22 {
    position:absolute;
    left:507px;
    top:195px;
    width:450px;
    height:329px;
    z-index:19;
    background-color: #80805D;
}
.style8 {color: #80805D}
#apDiv23 {
    position:absolute;
    left:336px;
    top:209px;
    width:428px;
    height:311px;
    z-index:21;
    overflow: auto;
}
.style9 {color: #F4F4F4}
.style11 {color: #FFFFFF; font-family: "AvantGarde Bk BT"; }
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF;}
#apDiv24 {
    position:absolute;
    left:518px;
    top:201px;
    width:428px;
    height:27px;
    z-index:19;
    background-color: #80805D;
}
#apDiv25 {
width: 1024px;
margin: 0 auto;
}

.oneColLiqCtrHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtrHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColLiqCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColLiqCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
}
.oneColLiqCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.oneColLiqCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
#apDiv1 {
position:absolute;
left:-12px;
top:8px;
width:883px;
height:611px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:12px;
top:162px;
width:243px;
height:464px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:40px;
top:26px;
width:753px;
height:124px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:266px;
top:96px;
width:48px;
height:21px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:311px;
top:97px;
width:64px;
height:23px;
z-index:5;
}
#apDiv6 {
position:absolute;
left:74px;
top:94px;
width:47px;
height:27px;
z-index:4;
}
#apDiv7 {
position:absolute;
left:125px;
top:98px;
width:66px;
height:24px;
z-index:5;
}
#apDiv8 {
position:absolute;
left:197px;
top:94px;
width:46px;
height:27px;
z-index:6;
}
#apDiv9 {
position:absolute;
left:243px;
top:99px;
width:54px;
height:23px;
z-index:7;
}
#apDiv10 {
position:absolute;
left:552px;
top:101px;
width:39px;
height:23px;
z-index:8;
}
#apDiv11 {
position:absolute;
left:586px;
top:99px;
width:71px;
height:24px;
z-index:9;
}
#apDiv12 {
position:absolute;
left:658px;
top:98px;
width:81px;
height:27px;
z-index:10;
}
#apDiv13 {
position:absolute;
left:740px;
top:100px;
width:44px;
height:24px;
z-index:11;
}
#apDiv14 {
position:absolute;
left:94px;
top:202px;
width:138px;
height:59px;
z-index:12;
}
#apDiv15 {
position:absolute;
left:92px;
top:288px;
width:64px;
height:98px;
z-index:13;
}
#apDiv16 {
position:absolute;
left:124px;
top:404px;
width:105px;
height:67px;
z-index:14;
}
#apDiv17 {
position:absolute;
left:153px;
top:502px;
width:56px;
height:30px;
z-index:15;
}
#apDiv18 {
position:absolute;
left:140px;
top:530px;
width:49px;
height:19px;
z-index:16;
}
#apDiv19 {
position:absolute;
left:148px;
top:549px;
width:56px;
height:29px;
z-index:17;
}
#apDiv20 {
position:absolute;
left:352px;
top:578px;
width:196px;
height:29px;
z-index:18;
}
#apDiv21 {
position:absolute;
left:509px;
top:197px;
width:445px;
height:324px;
z-index:20;
overflow: visible;
background-color: #000000;
}
.style1 {color: #FFFFFF}
#apDiv22 {
position:absolute;
left:507px;
top:195px;
width:450px;
height:329px;
z-index:19;
background-color: #80805D;
}
.style8 {color: #80805D}
#apDiv23 {
position:absolute;
left:336px;
top:209px;
width:428px;
height:311px;
z-index:21;
overflow: auto;
}
.style9 {color: #F4F4F4}
.style11 {color: #FFFFFF; font-family: "AvantGarde Bk BT"; }
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF;}
#apDiv24 {
position:absolute;
left:518px;
top:201px;
width:428px;
height:27px;
z-index:19;
background-color: #80805D;
}
#apDiv25 {
width: 1024px;
margin: 0 auto;
}

spork
Brewmaster
Joined: Sep 22, 2003
Posts: 6134
Loc: Seattle, WA
Status: Offline

June 29th, 2008, 12:55 pm

The problem is that most of your divs are absolutely positioned. Elements with absolute positioning are removed from the page flow and placed exactly where you specify them to be. Because of this, your wrapper div makes no difference as to where those elements will appear.

The Beer Monocle. Classy.

rkeefover
Novice
Joined: Jun 28, 2008
Posts: 16
Status: Offline

June 29th, 2008, 9:48 pm

Ok so my question now is how do i keep my placement of the elements but not make them absolute so that they can center? Dreamweaver auto makes them absolute when i place them and if i remove it they lose their placement and just end up stacked on top of each other. Thanks so much for the help again, i am a graphic designer only recently doing web sites so i use the design view as i know only a limited amount of html. I do understand it somewhat because i took 4 years of c++ and java so i get the jest, but i dont know how to work with it very well and it is different.

casablanca
Proficient
Joined: May 29, 2007
Posts: 481
Status: Offline

June 29th, 2008, 10:18 pm

Why use absolute positioning at all? I've never used Dreamweaver, but surely it should have normal divs.

No Strings Attached: A JavaScript graphics demo.

Bogey
Bogey
Joined: Jul 14, 2005
Posts: 8212
Loc: USA
Status: Offline

June 30th, 2008, 3:19 pm

casablanca wrote:

Why use absolute positioning at all? I've never used Dreamweaver, but surely it should have normal divs.

Dreamweaver likes to use positioning (especially absolute).

"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

June 30th, 2008, 3:19 pm

1, 2

To Reply to this topic you need to LOGIN or REGISTER. It is free.

Post Information

Total Posts in this topic: 29 posts
Users browsing this forum: No registered users and 65 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Centering a site for any resolution

Post Information

Sponsored Links

Other Languages

Website Development

Graphics

OS & Hardware

Internet Marketing

Marketplace

Community Area

Ozzu Maintenance

Forum Network

Forum Partners

Other Information