Solved

floating bar

Posted on 2010-08-31
4
567 Views
Last Modified: 2012-05-10
trying to have a floating nav at the top and bottom with the content in the background.
the code i have do not keep the navs visible all the time and not floating. pl help.
<html>
<head>
<style type="text/css">
html, body { height : 100% ; margin : 0px ; padding : 0px }
#content {
height : 100% ;
z-index: 1;
background-color:yellow;
width : 100% ;
}
#topNav {
height : 20px ;
left : 0px ;
position : absolute ;
top : 0px ;
z-index: 2;
width : 100% ;
float:left;
background-color:pink;
}
#bottomNav {
height : 20px ;
left : 0px ;
position : absolute ;
bottom : 0px ;
z-index: 2;
width : 100% ;
float:left;
background-color:gray;
}
</style>
</head>
<body>
<div id="topNav">top</div>
<div id="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />The contents here...
<div id="bottomNav">bottom</div>
</body>
</html>

Open in new window

0
Comment
Question by:yingwho
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 33573476
Can you give a better example of what your trying to do?  
The first thing I notice is that you have a float on absolutely positioned elements.  This is not possible.  You would have to take off the position absolute and replace it with relative or leave it off all together.  
 
0
 

Author Comment

by:yingwho
ID: 33573717
its simple, i dont know the example. what i want is the two bars should float at the top and bottom, even when the pages scroll.
i dont know how much more clear i can explain.
0
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 500 total points
ID: 33574856
Try something like this (I am using position:static).
<!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>
<style type="text/css">
*{margin:0;padding:0;}
html, body { height : 100% ; margin : 0px ; padding : 0px }
#content {
background-color:yellow;
height:100%;
}
#contentPadding{
	padding:20px 0;
}
#topNav {
height : 20px ;
left : 0px ;
position: fixed;
top : 0px ;
z-index: 2;
width : 100% ;
background-color:pink;
}
#bottomNav {
height : 20px ;
left : 0px ;
position : fixed ;
bottom : 0px ;
z-index: 2;
width : 100% ;
background-color:gray;
}
</style>
</head>
<body>
    <div id="topNav">top</div>
    <div id="content">
        <div id="contentPadding">
            <p>Here</p>
        </div>
    </div>
    <div id="bottomNav">bottom</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:yingwho
ID: 33579456
thanks
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Anyone familiar with PhotoSwipe? 3 38
Text color in a select 11 30
How to get chosen background-color on every line? 10 42
Page link not showing on Mobile Device 3 42
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question