PDA

View Full Version : Centering CSS

mikie
08-08-2004, 09:38 PM
I started a thread and 10 people told me different things and I tried each of them and none of them got me anywhere except completely confused, so I'm started a new thread and hopefully I can figure it out this time. Let me reword my problem:

Stripped down, my HTML looks like this:
<BODY>
<DIV id="wrap">

<DIV id="top">
</DIV>


<DIV id="left">
</DIV>

<DIV id="right">
</DIV>

</DIV>
</BODY>


And my CSS looks like this:

:link
{ text-decoration: underline; color:#CF7958; }
:visited
{ text-decoration: underline; color:#A4CFDF; }
:active
{ text-decoration: none; color:#F5EBA3; }
:hover
{ text-decoration: none; color:#F5EBA3; cursor: hand; }

h1 {font-family: arial; color: #C0A1A6; }
h2 {font-family: arial; color: #CF7958; }
h3 {font-family: arial; color: #D99C4B; }
h4 {font-family: arial; color: #F5EBA3; }
h5 {font-family: arial; color: #A5B648; }
p {font-family: "times new roman"; color: #A4CFDF; }



BODY

{ font-family: arial;
color: #000000;
font-size: 10pt;
text-align: center
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background: #000000;
}

{ scrollbar-face-color : #A5B648;
scrollbar-highlight-color : #CCFF99;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #0099ff;
scrollbar-track-color : #F5EBA3;
scrollbar-arrow-color : #FFFFFF;
}

{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#top {
margin: 0px;
padding: 10px;
height: 100px;
}

#left {
position: absolute;
left: 15px;
top: 130px;
width: 200px;
}

#right {
top: 0;
margin-left: 230px;
margin-right: 15px;
}

#wrap {
margin-left: auto;
margin-right: auto;
width: 770px;
}




My page looks like this (http://www.mwparenteau.net/veganism/veganism.html). I want it to be centered on the page like this (http://www.boston.com).

I swear I've tried everything and things start looking crazy before it ever gets any better.

Now before you go helping me, either 1) Do it for me or 2) Tell me exactly what you're doing and why! Don't just tell me to insert things into places because I'm going to get just as confused as in the last thread! :lolol:

Thank you in advance for any help.
Monkey Bizzle
08-08-2004, 09:46 PM
that person uses tables... divs and tables are totally different things.
kittycat
08-08-2004, 10:51 PM
1. Remove any absolute positioning from the divs. Centring won't work with that in there.
2. Remove all excess { and } from the body section of your code, it should work better then. From
BODY

{ font-family: arial;
color: #000000;
font-size: 10pt;
text-align: center
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background: #000000;
}

{ scrollbar-face-color : #A5B648;
scrollbar-highlight-color : #CCFF99;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #0099ff;
scrollbar-track-color : #F5EBA3;
scrollbar-arrow-color : #FFFFFF;
}

{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
To
BODY

{ font-family: arial;
color: #000000;
font-size: 10pt;
text-align: center
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background: #000000;
scrollbar-face-color : #A5B648;
scrollbar-highlight-color : #CCFF99;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #0099ff;
scrollbar-track-color : #F5EBA3;
scrollbar-arrow-color : #FFFFFF;
}

See how it looks after that.