Как закрепить панель навигации внизу, а не сверху

Question

Как закрепить панель навигации внизу, а не сверху

0

Проблема здесь в том, что моя панель навигации fixed к вершине, и я хотел бы, чтобы она была fixed снизу:

<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">

И это мой 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;
}

Я много раз пытался менять позицию, но не смог. Любые идеи о том, как это сделать?

user3072979 18 дек. 2013, в 01:33

Источник

1

Работал ли какой-нибудь из этих ответов на вас? Если это так, обязательно отметьте тот, который сделал как принятый ответ. Если это мой ответ или ответ Амперсанда, отметьте его таким, какой он был первым.
Dryden Long 20 дек. 2013, в 21:24

Теги:

html

css

navigation

5 ответов

Ещё вопросы

Работал ли какой-нибудь из этих ответов на вас? Если это так, обязательно отметьте тот, который сделал как принятый ответ. Если это мой ответ или ответ Амперсанда, отметьте его таким, какой он был первым.

Ampersand · Answer 1 · 2013-12-17T22-37-00.000Z

Под #nav в вашем CSS просто измените:

top:0px;

в

bottom:0px;

Это должно делать свое дело

Забавно, насколько схожи наши ответы.

Dryden Long · Answer 2 · 2013-12-17T21-36-00.000Z

В вашем CSS для изменения #nav

top:0px;

к

bottom:0px;

alexanderkustov · Answer 3 · 2013-12-17T22-26-00.000Z

В вашем файле css под навигацией просто переключите верх: 0px на нижний: 0px, вот так

#nav
 {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 bottom:0px;
 }

danny · Answer 4 · 2014-11-05T01-53-00.000Z

#nav 
{
    clear: both;
}

попробуйте это, но ваше дело усложняется, когда вы используете позиционирование и плаваете в одно и то же время.

AnthonyM · Answer 5 · 2013-12-17T22-49-00.000Z

Вы хотите, чтобы это было зафиксировано в нижней части страницы? Или просто дно дива?

Попробуйте изменить "top: 0px;" до "bottom: 0px;".