Forum Moderators: not2easy

Message Too Old, No Replies

Trying to center entire page, but my lack of knowledge is interferring

         

kslnor

6:02 pm on Mar 19, 2006 (gmt 0)

10+ Year Member



I want to center the entire page within the browser window, but I'm having a bit of trouble doing so. I created a wrapper (entirepage) that I thought would center the entire page, but only the #logo, and #topnav containers are centered within the window. The #content container does not budge and the #leftnav is in the center of the window. Here is the .css Can anyone please assist? Thank you!

body
{
background: white;
font-family: verdana, arial, sans-serif;
font-size: 12px;
width:750;
text-align: center;
}
entirepage
{
margin: 0;
background: maroon;
text-align: left;
}
a:link
{
color: green;
}
a:visited
{
color: maroon;
}
a:hover
{
color: maroon;
}
ul
{
list-style-type: none;
padding: 0;
}
#logo
{
margin: 0;
height: 150px;
width: 750px;
}
#topnav
{
background-color: green;
top: 160px;
width: 747px;
text-align: center;
margin-left: 0px;
padding-left: 0;
white-space: nowrap;
}
#topnav a
{
color: white;
background-color: green;
text-decoration: none;
padding: .2em .8em;
}
#topnav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#topnav ul li
{
display: inline;
list-style-type: none;
}
#topnav ul li a:hover
{
background-color: maroon;
color: #FFF;
text-decoration: none;
}
#leftnav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#leftnav a
{
display: block;
color: green;
background-color: white;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}
#leftnav a:hover
{
background-color: maroon;
color: #FFF;
}
#leftnav
{
display: block;
border-style: solid;
border-color: green;
color: #FFF;
background-color: white;
position: absolute;
top:210px;
}
#content
{
background-color: white;
position: absolute;
top:340px;
left: 15em;
width:575;
}
#preplanned
{
display: block;
border-style: solid;
border-color: green;
background-color: white;
position: absolute;
top:210px;
left: 15em;
width:575;
}

coopersita

7:54 pm on Mar 19, 2006 (gmt 0)

10+ Year Member



What you need to do is:

#entirepage {
width: 750px;
margin: auto;
}

Try to avoid setting the width in the body, since older browsers may not ba able to do it.

kslnor

11:26 pm on Mar 20, 2006 (gmt 0)

10+ Year Member



Thanks for the quick reply, coopersita. Makes sense, but it did not work. Perhaps I have soemthing in the code that is interfering? Any ideas anyone? (my html code is very clean...very little code...). Thank you.

doodlebee

2:43 pm on Mar 21, 2006 (gmt 0)

10+ Year Member



Well, first off, in your original code, the "entirepage" should be "#entirepage" (note the lack of the hashmark!) did you fix that, as well?

In your HTML, is *everything* inside the #entirepage div, including the topnav and the footer?

Maybe if we saw the HTML, we could associate things a little bit better. what cooper put in up there *always8 works - so it must be something else in your code that we can't see :)

kslnor

10:57 pm on Mar 21, 2006 (gmt 0)

10+ Year Member



Ahhh...that silly hashmark! Thanks Doodlebee, your tip was what I needed. As well as tweeking some of the style code, such as changing position from 'absolute' to 'relative' for a few of the divs. It looks the way I want it to look. Thanks again!