Solved

Getting my content centered with CSS

Posted on 2011-02-16
9
801 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
  • 4
  • 3
  • 2
9 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 27

Expert Comment

by:Lukasz Chmielewski
Comment Utility
How about wrapping the slideshow into the container having margin: 0 auto and width: 1200px; ?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
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
Comment Utility
Awesome Dave, that centered the container perfectly. Now I just need to center the slideshow div, is there a way for that?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Detecting robots? 5 33
Error viewing ASP page 12 71
WEB Farm 6 21
jQuery Canlendar click function 5 19
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now