How to place navigation bar at bottom in the code and show it at top?

Discussion in 'CSS' started by bikram_068, Feb 16, 2010.

0
  1. #1
    HI..
    How can I place the navigation bar at the bottom in the code and hide it there and shown it in the top of the page using css?

    thanks in advance.

    D.
     
    bikram_068, Feb 16, 2010 IP
  2. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Wondering why you'd want to do this?

    Search Engines will take into account that a navigation will be above the main the content...
     
    pmek, Feb 17, 2010 IP
  3. jimmy4feb

    jimmy4feb Peon

    Messages:
    56
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    why you want to do this ? I think it will not solve your problem

    well I don't know exactly what is your requirement, you can do it something like this

    
<html>
	<head>
		<style type="text/css">
			#divNavAbsolute  /*Copy this div block into your CSS file*/
			{
      			left:0px; /* You can change it according to your requirement */
      			top:0px; /* You can change it according to your requirement */
      			width:800px; /* You can change it according to your requirement */
      			height:20px; /* You can change it according to your requirement */
      			position:absolute; /* This will not set the absolute position of Nav on the page*/
      			border: 1px solid #CC0000; /*This is optional(so that you can see the results)*/

			}

			#divNavFixed   /*Copy this div block into your CSS file*/
			{
      			left:0px; /* You can change it according to your requirement */
      			top:40px; /* You can change it according to your requirement */
      			width:800px; /* You can change it according to your requirement */
      			height:20px; /* You can change it according to your requirement */
      			position:fixed; /* Nav will never scroll with the page, it will remain always on top*/
      			border: 1px solid #CC0000; /*Border is optional(so that you can see the results)*/
			}
		</style>
	</head>
	<body>
			<div id="divNavFixed">This is divNavFixed. Define Inner Elements of Nav Here</div> <!--Place this code anywhere in your HTML file-->
			<div id="divNavAbsolute">This is divNavAbsolute. Define Inner Elements of Nav Here</div> <!--Place this code anywhere in your HTML file-->
	</body>
</html>
    HTML:
     
    jimmy4feb, Feb 17, 2010 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    The 'good lord why' is a damned good question - though as jimmy4feb said the only real solution is to position the menu absolute, which means the menu MUST be a fixed height so your content will clear it.
     
    deathshadow, Feb 20, 2010 IP
  5. champ

    champ Member

    Messages:
    30
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #5
    Absolutely position the nav at the top-left, relatively position the nav's container, and insert padding in the nav's container that equal's the nav's height. The relative position of the container prevents the nav from positioning itself outside of it which could happen incase of things like someone viewing a google/yahoo cache page that adds HTML to the top of the page.

    <!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#container {
    padding-top: 40px;
    position: relative;
}
#nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
}
</style>
</head>
<body>

    <div id="container">

        <div id="content">
            CONTENT STUFF
        </div>

        <div id="nav">
            NAV STUFF
        </div>

    </div>

</body>
</html>
    Code (markup):
     
    champ, Feb 21, 2010 IP