How to get the navigation bar fixed to the bottom instead of the top
Question
The problem here is that my navigation bar is fixed to the top and I would like for it to be fixed to the bottom:
<html>
<body>
<center>
<h1>My Resume</h1>
<link rel="stylesheet" type="text/css" href="csstrial.css">
<center>
<div id="nav">
<p class="title"><a href="#">TheCodePress<span class="subtitle">.blogspot.com</span> </a></p>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<nav>
<ul>
<li><a href="home.html" target='MYHOME'>Home</a></li>
<li><a href="cmon.html" target='MYHOME'>Qualifications</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<iframe src="home.html" name="MYHOME" height="550" width="700"
frameborder="0">
And This is My CSS
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}
.title
{
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.subtitle
{
color:#EDEDED;
font-family:verdana;
font-size:15px;
}
#navigation
{
list-style-type:none;
}
li
{
display:inline;
padding:10px;
}
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover
{
color:#BDBDBD;
}
#body
{
width:850px;
margin:0px auto;
margin-top:80px;
font-family:verdana;
}
body
{
margin:0px;
}
I've tried many times to change the position, but failed. Any ideas on how to do it?
5 answers
solution1
9 2013-12-18 00:24:52
Under #nav in your CSS just change:
top:0px;
to
bottom:0px;
That should do the trick
solution2
6 2013-12-18 00:25:09
In your CSS for #nav change
top:0px;
To
bottom:0px;
solution3
2 2013-12-18 00:25:38
In your css file, under nav just switch the top:0px to bottom:0px , like this
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
bottom:0px;
}
solution4
0 2013-12-18 00:27:49
Do you want it fixed to the bottom of the page? Or just the bottom of the div?
Try changing "top:0px;" to "bottom:0px;".
solution5
0 2014-11-05 04:24:32
#nav
{
clear: both;
}
try this, but your making thing harder when your using positioning and floating at the same time.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.