RNB
asked on
Getting my content centered with CSS
I am having trouble with centering my webpage. I usually just use margin: 0 auto; and it has always worked but I am running into a problem on this one.
here is a live example: http://dev.anathallo.net/t rin/index. html
and here is the code I am using:
HTML:
CSS:
Thank you in advance!
here is a live example: http://dev.anathallo.net/t
and here is the code I am using:
HTML:
<!doctype html>
<html>
<head>
<title>Con-Sol Enterprises</title>
<link href="css/global.css" rel="stylesheet" type="text/css">
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 10000,
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="img_1.jpg" />
<img src="img_2.jpg" />
<img src="img_3.jpg" />
<img src="img_4.jpg" />
</div>
<div id="container">
<div class="header">
<div class="logo">
<img src="img/con_sol.png" />
<!-- end of .logo -->
</div>
<div class="contactNumber">
<p>Phone: (805) 648-3486 | Fax: (805) 648-3735</p>
</div>
<div class="navbar">
<table align="center">
<td><a href="index.html">Home</a></td>
<td><a href="services.html">Services</a></td>
<td><a href="about.html">About</a></td>
<td><a href="contact.html">Contact</a></td>
</table>
</div>
<!--end of header -->
</div>
<div class="content">
<h1>H1 - Header</h1>
<!--end of content-->
</div>
<div class="footer">
<!--end of footer -->
</div>
<!---end of container-->
</div>
</body>
</html>
CSS:
a:link, a:visited { /*special rules for links in the navbar*/
padding: 5px 10px 3px 10px;
margin: 0px 10px 0px 10px;
text-decoration: none;
color: #fff;
}
a:hover{
padding: 5px 10px 3px 10px;
margin: 0px 10px 0px 10px;
background-color: #fff;
text-decoration: none;
color: #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*CSS for jquery background slideshow*/
.slideshow {
position:absolute;
z-index:0;
margin: 0 auto;
color: #000;
}
.slideshow img {
background-color: #000;
position:absolute;
z-index:0;
color: #000;}
/*end of slideshow CSS*/
body {
color: #000;
margin: 0px;
font-family: "Myriad Pro", Arial, Helvetica, Tahoma, sans-serif;
background-color: #000;
}
#container {
margin: 0 auto;
width: 1000px;
position:absolute;
z-index:15;
}
.header {
height: 1%;
overflow: hidden;
z-index:2;
}
.logo {
padding: 25px;
float: left;
height: 103px;
width: 400px;
z-index:1;
}
.navbar {
/*background-image:url(../img/bg_black_transparent.png);*/
background-color: #000;
float: right;
width: 375px;
margin: 0px;
padding: 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.contactNumber {
/*background-image:url(../img/bg_black_transparent.png);*/
background-color: #000;
color: #999;
padding: 0px 10px 0px 10px;
float: right;
width: 335px;
padding-left: 50px;
border-bottom: thin solid #333;
}
.contactNumber p {
margin:5px 0px 5px 0px;
}
.content {
color: #fff;
background-image:url(../img/bg_black_transparent.png);
margin-top: 100px;
padding: 10px 10px 10px 10px;
height: 700px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.content h1 {
border-bottom: solid thin #333;
}
.footer {
}
Thank you in advance!
You would have to add text-align: center to a wrapping div which has to be cetered, in this case body:
body{
text-align: center;
}
body{
text-align: center;
}
ASKER
Thank you both for your responses so far.
@DaveBaldwin, if i drop the position: absolute; then my container div no longer goes on top of my slideshow div which I am using for the background. the container div goes behind the slideshow.
@Roads Roads, that simple did not move the divs to be centered, it only centered the text.
@DaveBaldwin, if i drop the position: absolute; then my container div no longer goes on top of my slideshow div which I am using for the background. the container div goes behind the slideshow.
@Roads Roads, that simple did not move the divs to be centered, it only centered the text.
I meant to add this to Dave's margin: 0 auto. Centering only with margin 0 auto requires the wrapping container to have that value set to center.
How about wrapping the slideshow into the container having margin: 0 auto and width: 1200px; ?
Then you need to give a 'top' and 'left' position for 'container'. When you put 'position:absolute;', 'margin: auto;' will not do anything.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Awesome Dave, that centered the container perfectly. Now I just need to center the slideshow div, is there a way for that?
I would wrap the slideshow div in a <center> tag in case the slideshow javascript rewrites the style info in the <div>.
Open in new window