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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    CSS Fixed positioned background image as header

    Hi all,

    Currently building a site & i seem to have run into a strange problem that i've never encountered before.

    My goal is to create a fixed navigation bar at the very top of my page. There will be a background image acting as the container. This image is 39px in height and is repeated in the x direction. I've also added a z-index to the nav, so when the user scrolls, the navigation will always be on top of the stack.

    The problem; is that when adding position:fixed to my css, it screws the navigation up. Seems to nudge the nav background image to the left instead. It works fine without the position:fixed statement, but i of course need it to reach my goal.

    So my call for help, is how to code this little nav properly? My code is shown below:

    The markup
    Code:
    		
    	
    	<div id="fixedNav">
    		<nav>
    			<ul>
    				<li><a href="#home">Home</a></li>
    				<li><a href="#about">About</a></li>
    				<li><a href="#portfolio">Portfolio</a></li>		
    				<li><a href="#muses">Muses</a></li>
    				<li><a href="#contact">Contact</a></li>
    			</ul>
    		</nav>
    	</div>

    The CSS:

    Code:
    /* Fixed header navigation */
    #fixedNav {
    	background: url(../images/pswd-fixedNav_01.jpg) center top;
    	background-repeat: repeat-x;
    	background-attachment: fixed;
    	height:39px;	
    	z-index:100;
    }
    #fixedNav nav {
    	position:relative;
    	margin: 0 auto;
    	width:960px;
    	height:39px;	
    }
    #fixedNav ul {
    	list-style: none;
    	display:inline;
    	position:absolute;
    	top:12px;
    	left:312px;
    }
    #fixedNav li {
    	font-size:14px;
    	color:#787470;
    	margin-right:32px;
    	display:inline;
    }
    #fixedNav li a {
    	text-shadow:0 1px 0 rgba(0,0,0,0.75);
    	text-decoration:none;
    }
    #fixedNav li a:hover {
    	border-bottom: 1px solid #787470;
    }
    /* end Fixed header navigation */


    thanks for any help you peeps can bestow

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Hello SlyOne,
    Instead of fixing the background image of #fixedNav, try fixing the position of #fixedNav itself.
    Something like this (you'll need to correct the path of the background image) -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    		/* HTML5 tags */
    		header, section, footer,
    		aside, nav, article, figure {display: block;}
    #fixedNav {
    	height: 39px;
    	width: 100%;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 100;
    	background: url(pswd-fixedNav_01.jpg) repeat-x;
    }
    #fixedNav nav {
    	width: 960px;
    	margin: 0 auto;
    	position: relative;
    }
    #fixedNav ul {
    	line-height: 39px;
    	margin: 0;
    	padding: 0;
    	position: absolute;
    	top: 0;
    	left: 312px;
    	list-style: none;
    }
    #fixedNav li {
    	font-size: 14px;
    	color: #787470;
    	margin-right: 32px;
    	display: inline;
    }
    #fixedNav li a {
    	text-shadow: 0 1px 0 rgba(0,0,0,0.75);
    	text-decoration: none;
    }
    #fixedNav li a:hover {border-bottom: 1px solid #787470;}
    #container {
    	height: 2500px;
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    }
    </style>
    </head>
    <body>
    	<div id="fixedNav">
    		<nav>
    			<ul>
    				<li><a href="#home">Home</a></li>
    				<li><a href="#about">About</a></li>
    				<li><a href="#portfolio">Portfolio</a></li>		
    				<li><a href="#muses">Muses</a></li>
    				<li><a href="#contact">Contact</a></li>
    			</ul>
    		</nav>
    	</div>
        <div id="container">
        <!--end container--></div>
    </body>
    </html>
    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

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Nice, the width:100% did the trick!

    thanks mate


  •  

    Posting Permissions

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