Solved

Getting my content centered with CSS

Posted on 2011-02-16
9
810 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

733 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