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

    Top floating navigation.

    Hi. I am new to this and wondering if somebody could point me in the right direction. I hope this is in the right section but if not please feel free to move it.

    I am looking to have a navigation menu at the top of a website that stays at the top even if you scroll down.

    Here is a link to the type of thing I am looking for: http://videolightbox.com/

    As you can see the navigation menu stays in one place and the rest of the page appears to move behind it. Needless to say I want to be able to put my own links and the icons/links for other languages can stay. I would prefer, if possible, to have one script that I would call upon on every page that I use it.

    Thank you in advance.

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    This site is using the following bolded CSS declarations to achieve the fixed navigation:

    #mainheader {
    position: fixed;
    top: 0;
    left: 0;

    z-index: 10;
    background-image: url(../img/header-bg.png);
    margin-left: 0px;
    background-repeat: repeat-x;
    margin-top: 0px;
    padding: 0px;
    height: 61px;
    color: white;
    width: 100%;
    }
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that, but it doesn't help me.

    As I said I'm new to all this so I don't know how to implement that.

    It would be better (for me) if somebody could make a sample page(s) (with or without external css, whichever way is best) and post it here.

    Thank you and I'm sorry if I'm being a pain.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ZeroHacker,
    I use a similar top menu on a lot of my HTML/CSS example pages. Have a look at the source code and CSS on http://nopeople.com/CSS/h_ul_menu-wi...ges/index.html

    I would prefer, if possible, to have one script that I would call upon on every page that I use it.
    After you get your top menu working the way you want it would be easy to make it a .php include. Here's a simple tutorial for that - http://www.tizag.com/phpT/include.php
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Copy/Paste this bit into a new .html document and see if that's what you're looking for -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="" content="authored by http://www.nopeople.com/design" />
    <title>top menu demo</title>
    <style type="text/css">
    html, body {
    	background: #9C9;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	text-align: center;
    	color: #000;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #hdr {
    	width: 100%; 
    	min-width: 900px;
    	line-height: 48px;
    	overflow: auto;
    	text-align: center;
    	background:#999;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 999;
    }
    	#back {	
    		width: 60%;
    		float: left;
    		display: block;
    		color: #fff; 
    	}
    ul#links {
    	margin: 0 0 0 60%;
    	list-style: none;
    }
    ul#links li {
    	padding:0 15px;
    	display:inline;
    }
    	ul#links li a {color: #fff;}
    		#hdr a:hover, #hdr a:active {color: #f00;}
    #container {
    	height: 1000px; /*for demo only*/
    	width: 900px;
    	margin: 60px auto;
    	border: 2px solid #f00;
    }
    </style>
    </head>
    <body>
            <div id="hdr">
                <a href="http://nopeople.com/design/CSS tips/index.html" id="back">Back to CSS Tips</a>
                            <ul id="links">
                                <li><a href="#preview" rel="" id="anchor1" class="anchorLink">PREVIEW</a></li>
                                <li><a href="#html" rel="" id="anchor2" class="anchorLink">MARKUP</a></li>
                                <li><a href="#css" rel="" id="anchor3" class="anchorLink">CSS</a></li>
                            </ul>
    		<!--end hdr--></div>  
        <div id="container">
        	<h1>Your website goes here</h1>
        <!--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

  • Users who have thanked Excavator for this post:

    ZeroHacker (06-14-2010)


  •  

    Posting Permissions

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