Hi. I Need help centering my page for http://team270.org. I think it may be a css problem, but I am not that good with it. I need help. In the next post, I will post css.
#nav a:link, #servicemenu a:link {color:#fff;text-decoration: none;}
#nav a:active, #servicemenu a:active {color:#fff;text-decoration: none;}
#nav a:visited, #servicemenu a:visited {color:#fff;text-decoration: none;}
#nav a:hover, #servicemenu a:hover {color:#C97D7D;text-decoration: none;}
.wrapback a, .wrapback a:visited {color:#993333;}
.wrapback a:hover {color:#414968;}
body {
height:100%;
margin-top:0px;
font:normal 12px "times new roman";
background-color:#efefef;
}
.wrapper {
position: relative;
background: url(theme_images/back2.gif);
width:744px;
}
.wrapper2 {
margin-top:-11px!important;
margin-top:0px;
height:23px;
background-color:#585851;
}
#title {
font: bold 21px “britannic bold”, “lucida sans unicode”, arial, sans-serif;
color:#fff;
background: url(theme_images/titleback.gif) no-repeat top left;
height:60px;
line-height:40px;
text-indent:60px;
}
/* SLOGAN SLOGAN SLOGAN SLOGAN SLOGAN SLOGAN SLOGAN SLOGAN SLOGAN SLOGAN SLOGAN */
.slogan {
position:absolute;
color:#fff;
text-indent:60px;
font: italic 13px “century gothic”, “lucida sans unicode”, arial, sans-serif;
top:40px;
}
/* Service Menu Service Menu Service Menu Service Menu Service Menu Service Menu */
li#leftnav {
width:101px;
height:38px;
background: url(theme_images/end.gif) right top no-repeat;
list-style-type:none;
}
ul#nav {
background:#585851 url(theme_images/navback.gif) repeat-x;
float:right;
margin-top:0px;
font: bold 11px “lucida sans unicode”, arial, sans-serif;
padding-left:0px;
list-style-type:none;
}
#nav li{
line-height:19px;
float: left;
text-indent:10px;
list-style-type:none;}
li#leftserve {
width:38px;
height:23px;
background: url(theme_images/leftserve.gif) left top no-repeat;
list-style-type:none;
}
#servicemenu {
margin-left:0px;
font: normal 11px “lucida sans unicode”, arial, sans-serif;
list-style-type:none;
}
#servicemenu li{
background-color:#585851;
height: 14px;
padding-right:10px;
padding-top:4px;
padding-bottom:5px!important;
padding-bottom:4px;
text-align:center;
float: left;
list-style-type:none;
}
ul#servicemenu {margin-right:0px;margin-top:0px;padding:0;}
/* Content Content Content Content Content Content Content Content Content Content */
.shadowleft1 {
float:left;
height:28px;
width:36px;
background: url(theme_images/gradientshadow.gif) no-repeat left top;
}
.btitlel, .btitlem, .btitles {
font: bold 18px “britannic bold”, “lucida sans unicode”, arial, sans-serif;
background: url(theme_images/gradient.gif) repeat-x;
height:28px;
text-indent:10px;
color:#000;
}
.texts, .textm, .textl {
clear: both;
overflow:auto;
color:#000;
padding-top:30px;
padding-left:5px;
padding-bottom:10px;
vertical-align:text-top;
}
.texts {
width:240px!important;
width:235px;
padding: 10px 0px 10px 10px!important;
padding: 10px 10px 10px 10px;
border-left:1px solid black;
}
.textm {
width:437px!important;
width:435px;
margin-left:45px!important;
margin-left:36px;
padding: 10px 5px 10px 0px!important;
padding: 10px 10px 10px 3px;
}
.textl {
width:692px!important;
width:687px;
margin-left:45px;
padding: 10px 5px 10px 0px!important;
padding: 10px 10px 10px 0px;
}
.cwrapper {
float:left;
}
.cwrapper2 {
margin-left:-1px;
float:right;
}
.wrapback { width:743px;
background: #fff url(theme_images/mainback.gif) repeat-y left;
background-color:#efefef;
border-right:1px solid black;
border-bottom:1px solid black;
background-color:white;
color:#585851;
}
.twrap {border-right:1px solid black;background-color:white;}
.btitlel {
float: left;
width:707px;
}
.btitlem {
float: left;
width:451px;
}
.btitles {
position:static!important;
position:absolute;
width:255px;
border-left:1px solid black;}
.none {line-height:0px;}
.foot {
width:743px;
text-align:right;
padding-top:5px;
}
#brand {
width:743px;
margin-bottom: 20px;
padding-top: 10px;
text-align:center;
}
Add in
margin:0px auto;
into the .wrapper in the CSS.
Sorry, Didn’t Work. Sorry
this may seem overly simple, but cant you just add a <center> tag before the start of your page and end it after you footer.??
<body>
<center>
…
…
…
</center>
</body>
like i said, it might be too simple, but it should work.
OR you could add a center align attribute to your <div> tags
<div align=“center”>.
try putting the page in a <p> and write css for that <p>
p.blah
{
text-align: center;
}
or,
something like…
div.body
{
width: 1000px;
margin: 0 auto 0 auto;
}
where the body is in a div w/ class "body"
^^^my site uses the latter…
Got it to work W00T!!! I just changed the border settings. Thanks for all the suggestions!!! BTW, Do you guys like the left and right sides of the page (Colors)?