0
У меня возникла большая проблема. Я не знаю, почему я не могу это решить. Проблема в том, что я сделал нижний колонтитул для своего веб-сайта и добавил некоторые элементы li и значки социальных сетей ... но это не работает.li ahref, значки социальных сетей не работают
Здесь элементы Ли "О", "Медиа", "обратная связь", "политика конфиденциальности" не работают. Кроме того, 4 значка социальных сетей не работают. Вот мой HTML и CSS код ниже: -
footer
{
width: 100%;
background-color: #2d2d2d;
padding: 20px 0px;
\t height: 150px;
}
footer h2 {
font-size: 16px;
color: #a1a1a1;
text-transform: uppercase;
\t margin-top: 10px;
margin-bottom: 40px;
\t margin-left: 20px;
\t
\t
}
h2 {
font-size: 20px;
\t font-family: 'Gothic-Bold';
font-weight: normal;
\t position:sticky;
\t margin-bottom: 40px;
\t padding-top: 20px;
}
* {
padding: 0px;
margin: 0px;
}
.ft-quick-links
{
\t float:left;
\t width:400px;
}
.ft-quick-links ul li{
\t float:left;
\t margin-right:6px;
\t margin-bottom:20px;
\t margin-left: 5px;
\t list-style: none;
\t padding-right: 5px;
\t padding-top: 20px;
\t
\t
}
.ft-quick-links li a{
\t padding: 8px 15px;
\t font-size: 13px;
\t color: #959595;
\t background:#202020 ;
\t text-decoration: none;
\t margin-bottom: 30px;
}
.ft-quick-links li a:hover{
\t background:#171717;
}
.footer-btm-wrapp{
\t width:100%;
\t display:table;
\t background:#1b1b1b;
}
.ft-btm-left {
\t float:left;
}
.ft-btm-left ul li{
\t float:left;
\t margin-right:40px;
}
.ft-btm-left ul li a{
\t font-size:12px;
\t color:#5f5f5f;
}
.ft-btm-left ul li a:hover{
\t text-decoration:none;
}
.footer-btm-wrapp .wrapper{
\t padding:20px 0px;
}
.ft-social ul li{
\t float: right;
\t padding-right: 20px;
\t padding-top: 100px;
\t list-style: none;
\t
}
.footer-btm-wrapp .wrapper{
\t padding:8px 0px;
\t list-style: none;
}
.copy-rights p{
\t color:#959595;
\t font-size:13px;
\t list-style: none;
\t margin-top: -40px;
\t padding: 60px 20px 10px;
\t float:right 10px;
\t text-align:right;
\t list-style: none;
\t
\t
\t
}
.wrapper{
\t width:1100px;
\t margin:0px auto;
\t position:relative;
}
.ft-lines{
font-size: 12px;
margin-top: 110px;
}
.ft-lines li {
list-style: none;
display: inline;
margin: 0 10px 0 10px;
}
.ft-lines a {
text-decoration: none;
color: #959595;
}
.ft-lines a:hover {
text-decoration: underline;
}<!DOCTYPE html>
<html>
<body>
\t <link rel="stylesheet"type="text/css" href="footer.css">
<footer>
\t
\t <div class="wrapper">
\t <div class="ft-quick-links">
\t \t <h2>Quick Links</h2>
\t \t <ul class="clearfix">
\t \t \t <li><a href="#">About</a></li>
\t \t \t <li><a href="#">Media</a></li>
\t \t \t <li><a href="#">Feedback</a></li>
\t \t \t <li><a href="#">Privacy policy</a></li>
\t \t \t </ul>
\t \t </div>
\t </div>
\t \t <div class="wrapper">
\t \t <div class="ft-social">
\t \t <ul class="clearfix"> \t \t
\t \t
\t \t \t
\t \t \t <li><a href="http://www.youtube.com"><img src="images/yt.png"/></a></li>
\t \t \t <li><a href="http://www.instagram.com"><img src="images/ig.png"/></a></li>
\t \t \t <li><a href="http://www.twitter.com"><img src="images/twit.png" /></a></li>
\t \t \t <li><a href="http://www.facebook.com"><img src="images/fb.png" /></a></li>
\t
\t \t \t </ul>
\t \t </div>
\t \t </div>
\t \t \t <div class="wrapper">
\t \t \t <div class="ft-lines">
\t \t \t <ul class="clearfix">
\t \t \t \t <li><a href="#">Terms of Use</a></li>
\t \t \t \t <li><a href="#">Content Guidelines</a></li>
\t \t \t \t <li><a href="#">Report error </a></li>
\t \t \t \t </ul> \t
\t \t \t \t <div class="copy-rights"><p> © 2017 Rodeo labs. All rights reserved</p>
\t \t \t </div>
\t </div>
\t </div>
\t </footer>
\t
\t </body>
</html>
Просто удалите 'position: relative;' из класса 'wrapper'. Вот рабочая демонстрация [link] (https://jsfiddle.net/f2813ue8/). –