?
Solved

Getting my content centered with CSS

Posted on 2011-02-16
9
Medium Priority
?
813 Views
Last Modified: 2012-05-11
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!
0
Comment
Question by:RNB
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34911033
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

0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 34911062
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;
}
0
 

Author Comment

by:RNB
ID: 34911175
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.
0
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 34911330
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.
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 34911382
How about wrapping the slideshow into the container having margin: 0 auto and width: 1200px; ?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34911403
Then you need to give a 'top' and 'left' position for 'container'.  When you put 'position:absolute;', 'margin: auto;' will not do anything.
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 34911432
Try "position:relative;". 'z-index' needs the position statement to work.
#container {
  margin: 0 auto;
  width: 1000px;
  position:relative;
  z-index:15;  
}

Open in new window

0
 

Author Comment

by:RNB
ID: 34911689
Awesome Dave, that centered the container perfectly. Now I just need to center the slideshow div, is there a way for that?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34912020
I would wrap the slideshow div in a <center> tag in case the slideshow javascript rewrites the style info in the <div>.
0

Featured Post

Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question