Centering content

**Sliight** · 02-24-2008, 06:10 PM

I've looked through many posts with the search item "center" and have not been able to find the answer I am looking for.

The skinny of it is this... I'm building a friend a website, and I need the main content to center just like the msn.com website.

I will be using the same page layout for nearly every page, so this of course is important. I just started, but here is the link to the page in question: http://www.sierramobilesound.com/caraudio.shtml

One side note, I've used absolute positioning for nearly everything, so I'm wondering if I will need to apply the answer to every div, or work it out where they are relative to each other within the #content div?

Here is my current CSS page:

Code:

/*This is the main CSS sheet for format of all pages appearance*/

body {
background-color: #000000;
background-image: url(images/fade.jpg);
background-repeat: repeat;
}

#content {
position: absolute;
top: 0em;
background-color: #fcfffb;
max-width: 745px;
min-width: 745px;
}


#bookmark {
position: absolute;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
color: #560169;
text-align: right;
top: 1em;
right: 1em;}

#bookmark a:link {
color: #560169;}

#bookmark a:visited {
color: #560169;}

#bookmark a:hover {
color: #ce01f6;}

#navi {
position: absolute;
display: block;
width: 100%;
height: 100%;
right: 1em;}

#navtext {
max-width: 580px;
position: absolute;
top: 166px;
left: 123px;
background-color: #929292;
min-width: 580px;
min-height: 209px;
text-indent: 9px;}

#infobox {
position: absolute;
min-height: 250px;
background-color: #000000;
top: 420px;
min-width: 650px;
color: #ffffff;
text-indent: 10px;
padding-top: 1em;
padding-left: 1em;
padding-bottom: 1em;
padding-right: 1em;
max-width: 650px;
left: 58px;}


h1 {
font-size: 1em;
text-align: center;
margin-bottom: -1em;
}


h2 {
font-size: 1em;
text-align: center;
}

p {
font-size: .8em;
text-align: justify;}

a {}

a:link {
color: #061745;
text-decoration: none;}

a:visited {
color: #061745;
text-decoration: none;}

a:hover {
color: #76b4d1;
text-decoration: underline;}

a:active {}

#counter {
position: absolute;
top: 900px;
right: 5%;
display: none;}

Thanks in advance for any help!!!

**BLiZZaRD** · 02-24-2008, 06:31 PM

You can do a general contain all container dix if you like, or just add to the body rule:

Code:

text-align:center;

Then when ever you want the text to align correctly in that div rule put:

Code:

text-align: left;

Also... this line in your HTML:

HTML Code:

<a href="http://www.sierramobilesound.com/sitemap.shtml" <span>Site Map</span></a><span>~~</span>

Is missing the closing ">" for the anchor tag

**afe** · 02-24-2008, 06:34 PM

Sorry if I am hijacking this thread, but I have the same question, I want to center this page like msn.com too. Can anyone tell me how to center it please? http://www.afesports.com/indexxxxx.php

Thanks!

**BLiZZaRD** · 02-24-2008, 06:37 PM

Originally Posted by afe

Sorry if I am hijacking this thread, but I have the same question, I want to center this page like msn.com too. Can anyone tell me how to center it please? http://www.afesports.com/indexxxxx.php

Thanks!

Did you read the response? It's the same answer for ANY site.

**afe** · 02-24-2008, 06:40 PM

Well yes, I entered "text-align:center;" into the body section and it's still the same. Thanks!

**Sliight** · 02-24-2008, 06:40 PM

So I placed this in the body tag of my CSS... is this what you meant to do? If that is what you wanted me to do, it doesn't appear to have done anything on the page. I'm guessing since it didn't work I've placed it in the wrong spot...

I probably should have mentioned I'm very inexperienced at CSS and HTML... everything I've learned have been from a couple tutorials, here, and just fiddling with crap.

Code:

body {
background-color: #000000;
background-image: url(images/fade.jpg);
background-repeat: repeat;
text-align: center;}

In addition... you mentioned I missed the "/>" in that HTML? I looked at it and I thought I had it correct... the additional span with the ~~ is just for spacing and will blend when I adjust the color. Is it really incorrect?

Thank you!

**BLiZZaRD** · 02-24-2008, 07:14 PM

Okay, depends on the starting layout, and I will be the first to admit that I didn't take a real close look at your file.

We will work with a container div. Should help out. Leave the body { rule as you have it.

Then add this:

Code:

#wrapper {
    margin: 2em auto auto auto;
    text-align: left;
    width: 900px;
    position: relative;
}

Then in the html file just after the <body> tag put this:

Code:

<div id="wrapper">

then just before the </body> tag close the wrapper div:

Code:

</div>

You will have to fiddle with the width and margins of the wrapper rules to suit your needs, but this should get it started.

as for the anchor you have this:

Code:

<a href="http://www.sierramobilesound.com/sitemap.shtml" <span>Site Map</span></a><span>~~</span>

note my change in red below:

Code:

<a href="http://www.sierramobilesound.com/sitemap.shtml"> <span>Site Map</span></a><span>~~</span>

**Sliight** · 02-24-2008, 07:27 PM

Sweet that worked. Thank you Sooooo much. I'm the type of person who can't stop working on something when I can't figure it out. Not as bad as Monk, but would have spent my day messing with it. Now I can move on.

I see what you meant by the anchor now... guess I hadn't noticed since the browsers seemed to fix on their own. Closed it up though.

Thanks again for your help!