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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed position for header/nav

    Hi Guys,

    I'm currently building a site and have designed a header which wraps the nav.

    I'm happy with it but I'd like to see what it would be like fixed in that position. All my attempts so far have failed, it always stays to the left. I'm sure it's down to the absolute positioned icons, but I don't have the knowledge to sort it out.

    I hope someone can help. Thanks in advance.

    Code:
    <div id="header" class="group">
    	<div id="nav" class="group">
    		<div id="logo" class="group">
    		  <img src="img/AM_Logo.png" alt="Anders Mankert Golf Tuition" />
    		  <p>For Golf Lessons and Pro Shop Call: <span>01162 86475</span></p>
    		</div>
    
    		<a href="#"><img src="img/twitter.png" alt="twitter-link" id="twitter" /></a>
    		<a href="#"><img src="img/facebook.png" alt="facebook-link" id="facebook" /></a>
    			
    		<div id="line" class="group"></div>
    		
    		<ul class="group">
    		  <li><a href="http://www.ledesign.co.uk/basic_framework/index.html"><strong>Home</strong></a></li>
    		  <li><a href="#"><strong>Anders Profile</strong></a></li>
    		  <li><a href="http://www.ledesign.co.uk/basic_framework/lessons.html"><strong>Lessons</strong></a></li>
    		  <li><a href="#"><strong>Facilities</strong></a></li>
    		  <li><a href="#"><strong>Golf Shop</strong></a></li>
    		  <li><a href="#"><strong>Our Team</strong></a></li>
    		  <li><a href="#"><strong>Scholarships</strong></a></li>
    		  <li class="last"><a href="#"><strong>Contact us</strong></a></li>
    		</ul>
    	</div> <!-- /nav -->
    </div> <!-- /header -->
    CSS
    Code:
    /* header --------------------------------------------- */
    
    #header {
    	width: 1000px;
    	margin: 0 auto;
    	background: #000000;
    	}
    
    /* logo */
    
    #logo {
    	margin: 0 0 0 0;
    	}
    #logo img {
    	float: left;
    	width: 374px;
    	height: 88px;
    	}
    #logo p {
    	float: right;
    	margin: 63px 24px 0 0;
    	font-size: 1.125em;
    	line-height: 1.2;
    	color: #e3c887;
    	}
    #logo p span {
    	font-size: 1.25em;
    	}
    
    /* page banner */	
    
    #banner {
    	margin-bottom: 14px;
    	padding-left: 7px;
    	}
    #banner img {
    	width: 986px;
    	height: 197px;	
    	}
    
    /* social network links */
    
    #twitter {
    	position: absolute;
    	right: 24px;
    	top: 14px;
    	}
    #facebook {
    	position: absolute;
    	right: 62px;
    	top: 14px;
    	}
    #line {
    	margin: 0 auto;
    	width: 970px;
    	height: 12px;
    	border-bottom: 1px solid #888;
    	}
    
    
    /* navigation */
    	
    #nav {
    	position: relative;
    	width: 1000px;
    	margin: 0 auto;
    	font-size: 0.9375em;
    	}
    #nav ul {
    	margin: 0 auto;
    	}
    #nav ul li {
    	float: left;
    	margin: 0 0 0 0;
    	}
    #nav ul li.last {
    	margin-right: 0;
    	}
    #nav ul li a {
    	display: block;
    	float: left;
    	width: 100%;
    	line-height: 1.3em;
    	text-transform: uppercase;
    	text-decoration: none;
    	color: #fff;
    	}
    #nav ul li a strong {
    	display: block;
    	padding: 13px 13px 13px 21px;
    	}
    #nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus {
    	color: #FAC300;
    	}
    
    /* self-clear floats */
    
    .group:after {
    	content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    	}

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    When you use position:fixed or position:absolute the margin:auto will be ignored completely;
    position:fixed is equal to position:absolute, with one exception:
    position:fixed will keep its position in the view port, whereas position:absolute will scroll with the page.
    Since the div can't be centered by margin:auto you will need to either set it to width:100%
    Code:
    #header {
            postion:fixed
    	width: 100%;
    	background: #000000;
    	}
    or if you do not want #header to expand to the width of the viewport, wrap it in yet another div that you can center it within
    Code:
    #Fixator {
    	position:fixed;
    	width:100%;
    }
    #header {
    	width: 1000px;
    	margin: 0 auto;
    	background: #000000;
    	}
    And whenever you use position:fixed or position:absolute, it is important that you define a vertical coordinate (top: or bottom: ) and a horizontal coordinate (left: or right: )


  •  

    Posting Permissions

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