?
Solved

Getting my content centered with CSS

Posted on 2011-02-16
9
Medium Priority
?
816 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 84

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
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 
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 84

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 84

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 84

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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

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.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
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.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

649 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