Link to home
Start Free TrialLog in
Avatar of RNB
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/trin/index.html

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>

Open in new window


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 {

}

Open in new window


Thank you in advance!
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Drop the position:absolute;.  Since you didn't put in the top/left positions, it assumes 0/0 and kills the "margin: 0 auto;"
#container {
  margin: 0 auto;
  width: 1000px;
  z-index:15;  
}

Open in new window

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;
}
Avatar of RNB
RNB

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.
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
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of RNB

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>.