Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    What am I doing wrong? CSS/HTML centred on page

    I'm trying to get everything to centre on the page, the margin: 0 auto; works on the logo, but not on anything else!

    CSS code:
    Code:
    html {
    	overflow-y: scroll;
    	}
    
    body {
    	background-color:#000;
    }
    
    .float-left {float: left;}
    .float-right {float: right;}
    .clear {clear: both;}
    
    @font-face {
        font-family: 'coolvetica rg.ttf';
        src: url('coolvetica rg.ttf'), url('coolvetica rg.ttf') format('truetype'), url('coolvetica rg.ttf') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    h1 {font-family:'coolvetica rg.ttf';; font-size: 48px; color: #fff; margin: 0; padding: 0;} /*nav*/
    h2 {font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #fff; margin: 0; padding: 0; font-weight: normal;} /*slider text*/
    h3 {font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-weight: normal; margin: 0; padding: 0; color: #fff;}/*slider heads*/
    h4 {font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #fff; margin: 0; padding-bottom: 0px; font-weight: bold;}/*links*/
    
    a {color: #fff; text-decoration: underline;}
    a.hover: {color: #ea6000; text-decoration: none;}
    a.visited: {color: #999; text-decoration: underline;} 
    
    #header {
    	margin: 0 auto;
    }
    
    #header .logo{
    	background: url(images/Logo.gif);
    	margin-top: 10px;
    	width: 394px;
    	height: 183px;
    	margin: 0 auto;
    	}
    	
    #nav {
    	height: 60px;
    	margin-top: 30px;
    	background: #000 0 0 no repeat;
    	}
    
    #nav ul{
    	width: 960px;
    	margin: 0 auto;
    	list-style: none;
    	padding: 0;
    	}
    	
    #nav ul li {
    	list-style: none;
    	float: left;
    	padding: 0;
    	position: relative;
    	}
    
    #nav ul li a {
    	font-family:"coolvetica rg.ttf";
    	font-size: 26px;
    	color: #fff;
    	text-decoration: none;
    	padding-right: 30px;
    	}
    
    #nav ul li a:hover {
    	color: #ea6000;
    	}
    
    #slider {
    	border-top: #ea6000 1px solid;
    	border-bottom: #ea6000 1px solid;
    	width: 100%;
    	height: 270px;
    	}
    	
    #footer {
    	width: 960px;
    	height: 50px;
    	}
    
    #footer .content{
    	font-family: Helvetica, sans-serif;
    	size: 26px;
    	color: #fff;
    	float: left;
    	}
    
    #footer .facebook {
    	background:url(images/facebook.gif) 0 0 no repeat;
    	width: 40px;
    	height: 40px;
    	}
    	
    #footer .twitter {
    	background:url(images/twitter.gif) 0 0 no repeat;
    	width: 40px;
    	height: 40px;
    	}
    
    #footer .linkedin {
    	background:url(images/linkedin.gif) 0 0 no repeat;
    	width: 40px;
    	height: 40px;
    	}
    HTML code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="style/orbit-1.2.3/orbit-1.2.3.css">
    </head>
    
    <body>
    <div id="header"> 
    	<div class="logo"></div>
    </div>
    <div class="clear"></div>
    <div id="nav">
    	<ul>
        	<li><a href="home.php">Home</a></li>
        	<li><a href="services">Services</a></li>
            <li><a href="about">About Us</a></li>
            <li><a href="contact">Contact Us</a></li>
            <li><a href="team">Meet the Team</a></li>
            <li>
        </ul>
    </div><!--nav close-->
    
    <div class="clear"></div>
    <div id="slider"><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    		<script src="style/orbit-1.2.3/jquery.orbit-1.2.3.js" type="text/javascript"></script>
    
            <script type="text/javascript">
         $(window).load(function() {
             $('#featured4').orbit();
         });
            </script><div id="featured4"> 
              <img src="images/disaster_slide.gif" alt="01">
              <img src="images/specialist_slide.gif" alt="02">
              <img src="images/diary_slide.gif" alt="03">
            <p>&nbsp;</p>
            <p>&nbsp;</p>
    	  </div></div>
    <div id="footer">
    	<h4>&copy; Night and Day PA<div class="facebook"></div><div class="twitter"></div><div class="linkedin"></div>
    </body>
    </html>
    Last edited by NicolaHWS; 01-12-2014 at 04:58 PM. Reason: changing quote to code

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    403
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Without a width, block elements default to 100% width. In the absence of margin:0 auto is the same as margin: 0 0

    So either add width to the elements or use text-align:center to center them within their box.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello NicolaHWS,
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto

    You can also center an image that way if you make it a block level element with display: block;

    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks, I've changed the post so it's more readable! The width is set in the nav ul section (960px) does it need to be somewhere else? It worked the last time I put it there, coding is so weird and difficult!

    Thanks for your help!

  • #5
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    403
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Every element you want centered using margin must have a width. The margins are relative to the parent element, not inherited. A ul with list-style:none may appear to be off unless you set padding zero because there is a default left padding for the bullet even when it is omitted with list-style:none
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by NicolaHWS View Post
    Thanks, I've changed the post so it's more readable! The width is set in the nav ul section (960px) does it need to be somewhere else? It worked the last time I put it there, coding is so weird and difficult!

    Thanks for your help!
    Your ul is 960px wide and centered. Maybe adding a background color will demonstrate better what's happening, add these bits highlighted in red -
    Code:
    #nav ul{
    	width: 960px;
    	margin: 0 auto;
    	padding: 0;
    	list-style: none;
    	overflow: auto;
    	background: #f00;
    }
    For a simple way to center your li elements, have a look at this centered menu example.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    You know where you poke at something, and you don't know how you got it to work but it does? I followed a lot of the directions on here, using a red background worked and I managed to get it going. Thank you so much for all your help people


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •