У меня проблема, которую я не могу найти в Интернете точно, что хочу. Я хочу создать нижний колонтитул, как вы видите на всех профессиональных веб-сайтах, со ссылками, материалами авторского права и т. Д. Подобно тому, как мы располагаем прямо под нами путем stackoverflow. Я подумал, что, возможно, создать его, как мой навигационный бар (см. Ниже), но это, похоже, не сработало для меня. Как я хочу нижний колонтитул: тонкая панель (не тонкая), с вашими базовыми ссылками, которые требуются (политика конфиденциальности, карта сайта и т. Д.), Часть текста под чем-то вроде авторского права 2016 или что-то в этом роде и, конечно же, Я бы хотел, чтобы он остался в нижней части страницы, и я думаю, что сделал. Надеюсь, вы понимаете, что мне нужно.Как сделать нижний колонтитул со ссылками с помощью CSS?
Заранее спасибо
html {
background: url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
nav {
height: 40px;
background: black;
background: rgba(40, 40, 40, 0.7);
}
nav ul {
padding: 0;
width: 400px;
margin: 0 auto;
}
nav ul li {
list-style: none;
font-family: arial;
font-size: 15px;
}
nav ul li a {
text-decoration: none;
float: left;
display: block;
padding: 10px 20px;
color: white;
}
nav ul li a:hover {
color: #2a70d9;
}
.content {
width: 800px;
display: block;
}
.content p {
text-align: center;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #6cf;
background: red;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="indexStyleSheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Project</title>
</head>
<body>
<div class="wrapper">
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Gallery</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
<div class="content">
<div class="contentLogo">
</div>
<p>blah blah</p>
</div>
<footer>
<div class="footerLinks">
<ul>
<li><a href="#">Privacy Policy</a>
</li>
<li><a href="#">Legal</a>
</li>
<li><a href="#">Site Map</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="copyright">
<p>Copyright © 2016</p>
</div>
</footer>
</div>
</body>
</html>
Это не должно быть необходимо использовать 'позицию: абсолютная;', так как это только даст вам трудное время. Держите его в потоке страницы. – AlexG