[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

floating bar

Posted on 2010-08-31
4
Medium Priority
?
572 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
  • 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

834 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