Hey guys!
Ok, I am trying to clean up my markup language and have always used tables. I am now finally learning div’s and it is working great so far… Here is the question,
I want to center my whole site. I see the problem in the <div align=“center”> tag to be inefficient as all my text gets centered. I only want to center all the contained div’s.
Thanks for helping me out!
<body>
<div id="page">
...
</div>
</body>
#page {
max-width:65em;
margin:0 auto;
}
The reason for using an extra <div> instead of styling <body> is that IE7 and older sometimes behave oddly when you apply certain types of styling to <body>.
This still doesn’t do it… Am I doing something wrong??
Here is XHTML:
<body>
<div id=“margin”>
<div id=“nav”>
<a href=“.html">Home</a> | <a href=".html”>Services</a> | <a href=“.html">Finished Projects </a>| <a href=".html”>Testimonials</a> | <a href=“.html">Blog Page</a> | <a href=".html”>About Us</a> | <a href=“*.html”>Contact Us</a>
</div><!–End of Navigation Div–>
<div id=“logo”>
<a href=“index.html”><img src=“images/logo.png” width=“300” height=“250” alt=“Logo for Neto’s Drywall serving Rochester and surrounding areas in Michigan for Drywall, Plaster and more since 1995” border=“0” /></a>
</div><!–End of Logo Div–>
<div id=“tagline”>
<img src=“images/tagline.png” width=“505” height=“250” alt=“The best service you can have with drywall, plaster and more in Rochester Hills Michigan and surrounding.” />
</div><!–End of Tagline Div–>
<div id=“sidetop”>
<h5>Recent Projects</h5>
</div>
<div id=“sidemiddle”>
Side Middle Div
</div>
<div id=“sidebottom”>
Neto’s Drywall ©2010
</div><!–End the Sidepanel Div’s–>
<div id=“bodytop”>
<h4>Welcome to Neto’s Drywall</h4>
</div>
<div id=“bodymiddle”>
Body Middle Div
</div>
<div id=“bodybottom”>
| Privacy Policy | Terms of Use
</div><!–End the Body Div’s–>
</div>
</body>
Here is CSS:
body {
background-color: #8E8D79;
font-family:Tahoma, Arial, sans-serif;}
h1, h2, h3, h4, h5 {
color: #656565;
margin: 0px;}
a {
color: #d7d7cd;
text-decoration: underline;}
a:hover {
color: white;
text-decoration: none;}
/* For putting borders around the DIV tags to identify them
#nav, #logo, #tagline, #bodytop, #bodymiddle, #bodybottom, #sidetop, #sidemiddle, #sidebottom{
border:solid red 1px;
margin:0;
padding:0; }*/
#nav{
position:absolute;
height:36px;
width:805px;
margin:0;
padding:0;
top:0px;
left:0px;
background-color:#323230;
color:#adadab;
font-family:Arial, Tahoma, sans-serif;
font-size:.95em;
font-weight:bold;
text-align:center;
padding-top:7px;
padding-bottom:7px;}
#logo{
position:absolute;
height:250px;
width:300px;
margin:0;
padding:0;
border-bottom:solid black 8px;
top:50px;
left:0px;
background-color:#3d3d3b;}
#tagline{
position:absolute;
height:250px;
width:505px;
margin:0;
padding:0;
border-bottom:solid black 8px;
top:50px;
left:300px;}
#sidetop{
position:absolute;
height:30px;
width:295px;
margin:0;
padding:0;
top:318px;
left:0px;
background-color:#383836;
padding-top:10px;
padding-left:5px;
}
#sidemiddle{
position:absolute;
height:410px;
width:300px;
margin:0;
padding:0;
top:358px;
left:0px;
background-color:#eae9e4;
}
#sidebottom{
position:absolute;
height:50px;
width:300px;
margin:0;
padding:0;
top:768px;
left:0px;
background-color:#383836;}
#bodytop{
position:absolute;
height:30px;
width:495px;
margin:0;
padding:0;
top:318px;
left:300px;
background-color:#d7d7cd;
padding:5px;
}
#bodymiddle{
position:absolute;
height:410px;
width:505px;
margin:0;
padding:0;
top:358px;
left:300px;
background-color:#eae9e4;
border-left:dashed 1px #d7d7cd;}
#bodybottom{
position:absolute;
height:50px;
width:505px;
margin:0;
padding:0;
top:768px;
left:300px;
background-color:#d7d7cd;}
#margin{margin:0 auto; max-width:65em; }
Without seeing a live page and guaging what your expected outcome is I would suggest that you position your elements using position: relative; and use floats instead of positioning everything absolutely.
It does take a little more testing to get what you want, but I think you’ll be happier with the overall outcome.
I think you are looking for something like this:
<body>
<div id="wrapper">
<ul id="nav">[...]</ul>
<div id="logo">[...]</div>
<div id="tagline">[...]</div>
<div id="sidemiddle">
Place all content for side bar here
</div>
<div id="body">
Place all content for body here
</div>
<div id="footer">[...]</div>
</div>
</body>
#wrapper {
I got it, something must have been messed up with my css or something… your solution worked!
try with “margin:auto;”
or
margin-left:auto;
margin-right:auto
in “margin” div.
I’ve done it by putting what i want in a div, then setting the left and right margins to some value or auto. works weird when browser size changes though.