Solved

floating bar

Posted on 2010-08-31
4
556 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
thanks
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
radio button value 3 45
Help with HTML 7 38
css question 1 31
Urgent need help ASAP With CSS 5 20
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now