4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Having trouble centering a page

by Video Rob
3 replies
  • WEB DESIGN
    • |
When I center the page of my website the background from one of the divs disappears and so does the border.

Here is the css:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #BAD9F5;

}

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}

h1 {
font-size: 18px;
font-weight:bold;
color: #333;
background-color:#FFF;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center;
margin-top:3;
padding:0;
}

h2 {
font-size: 9px;
font-weight:lighter;
color: #ffffff;
text-align:left;
margin:0;
padding:0;

}

h3 {
font-size: 10px;
color: #ffffff;
text-align:left
}

h4 {
font-size: 11px;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center
}

.mainbody {
width:782px;
border-left:thick #A0C9EB solid;
border-right:thick #A0C9EB solid;
background-color:#333333;
position:absolute;
margin-left:auto;
margin-right:auto;
top: 3px;

}

.banner {
width:100%;
height: 104px;
background:url(images/bannerbg_02.gif) repeat-x;
}

.bannerimage {
background:url(images/logo_02.gif) no-repeat left;
margin-left:60px;
height:104px;
}

.navbg {
background-image:url(images/navrepeat_09.gif);
background-repeat:repeat-x;
width:100%;
height:33px;
}

#navcontainer ul {
margin: 0;
padding-top: 0px;
list-style-type: none;
text-align: center;
font-family: arial;
font-size: 11px;
height: 25px;
padding-top:8px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a {
text-decoration: none;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
padding-top:8px;
color: #FDC8B9;
width: 100%;
height: 33px;
border-right:thin inset #FF0000
}

#navcontainer ul li a:hover {
color: #fff;
width: 100%;
height:33px;
}

.leftcolumn {
width:201px;
float:left;
margin:0px;
background-color:#ededed;
padding-bottom:0px;
border-bottom:thick inset #525252;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}

.rightcolumn {
width:561px;
float:right;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
padding-top:10px;
color:#000;
}

.nav2 {
width:175px;
background:url(images/nav2_03.gif) repeat-x;
height:15px;
border-left:thin solid #CCCCCC;
border-top:thin solid #CCCCCC;
padding-left:20px;
padding-top:6px
}

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #00F;
}

a:link {
text-decoration: none;
}

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

a:hover {
text-decoration: none;
color: #F00;
}

a:active {
text-decoration: none;
color: #0099FF;
}
.style1 {color: #FFFFFF}

.searchform {
float:right;
margin-right:20px;
height:62px;
width:200px;
padding-top:42px;
}

.submitform {
float:right;
margin-right:5px;
height:58px;
width:100px;
padding-top:46px;
}

.input {
background:url(images/nav2_03.gif);
border:thin inset #000000;
height:21px;
width:180px;
padding-left:20px;
padding-top:4px
}

.footer {
width:782px;
height:30px;
text-align:center;
border-top:thin solid #CCCCCC;
background:url(images/bannerbg_02.gif);
float:left;
padding-top:10px;
color:#FFFFFF
}

.footer a {
color:#FFFFFF;
}

.footer a:visited {
color:#FFFFFF;
}

.footer a:active {
color:#FFFFFF;
}

.footer a:hover {
color:#FFFFFF;
background-color:#333333;
}

.submit {
background-color:#EDEDED;
border:0px;
outline:0px;
}

.columnheader {
height:20px;
width:201px;
background: url(images/navrepeat_09.gif) repeat-x;
text-align:center;
color:#FFFFFF;
font-weight:bold;
border-top:thin #040404 solid;
padding-top:8px;
}

.newsheadertext {
font-size: 11px;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center
}

.line1 {
font-size: 12px;
font-weight:bold;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center;
margin:0;
padding:0;
}

.line2 {
font-size: 9px;
font-weight:normal;
color: #ffffff;
background-color:transparent;
text-align:right;
margin:0;
padding:0;
}

.downloady {
color:#FFFFFF;
}

When I remove position:absolute; from the .mainbody style, the page centers but gray background under the menu disappears and so does the thin boarder around the mainbody.

Does anyone know what is causing this? the site is online at howigotbig.com
#centering #page #trouble
  • Profile picture of the author Richard Whyte
    Not sure, but I would change the mainbody tag to an ID from a class and then fix the DIV tag that is calling it.

    Meaning you have

    .mainbody {
    width:782px;
    border-left:thick #A0C9EB solid;
    border-right:thick #A0C9EB solid;
    background-color:#333333;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    top: 3px;
    }

    Change to:

    #mainbody {
    width:782px;
    border-left:thick #A0C9EB solid;
    border-right:thick #A0C9EB solid;
    background-color:#333333;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    top: 3px;

    }

    I would also try making the position Relative

    The Div that calls this would look like: <div id="mainbody">

    Give that a try.

    Have a Great Day!
    {{ DiscussionBoard.errors[1397427].message }}
  • Profile picture of the author cma01
    Without looking at your actual page, I would say it is probably an issue with the division with the background needing to be cleared. The easiest way is to add a clearing division right before the closing tag of the mainbody division.

    <div class="clear"></div>

    .clear {clear: both;}

    If you're not already using it, Firebug for Firefox is a must when fine tuning your CSS.
    Signature
    "Wise men talk because they have something to say; fools, because they have to say something."
    ~ Plato
    {{ DiscussionBoard.errors[1397433].message }}
  • Profile picture of the author cma01
    Oh . . . and you don't want that mainbody division to be absolute, because your margin will be 0 (top and left.)

    If you want to be able to use the main division as a reference point for any absolute divisions it contains, set the mainbody position to "relative." Any absolute divisions are tied to the last division that has a position specified.
    Signature
    "Wise men talk because they have something to say; fools, because they have to say something."
    ~ Plato
    {{ DiscussionBoard.errors[1397441].message }}

Trending Topics