Впервые задал вопрос. Я рассмотрел это исчерпывающе, и я сказал, что получаю, что моя проблема, но я не знаю, как это исправить. Я пробовал несколько разных вещей безрезультатно. Я пытаюсь изучить html и css, и это мой первый раз, когда я пишу сайт самостоятельно, хотя я делаю это внутри Dreamweaver.Ссылки не работают в нижнем колонтитуле
Я не могу получить ни местоположение, ни шрифт соцсети, а удивительные значки, чтобы стать ссылками. В настоящий момент URL-адреса являются общими, и я добавил границу слева и справа, чтобы я мог проверить, что они находятся в нужном месте.
Я думаю, что происходит то, что заполнение моего содержимого или моего контейнера перекрывает нижний колонтитул, но я изменил индекс z и попытался удалить прокладку все вместе, и они все еще не работают (и тогда страница не выглядит так, как я ее хотел). Я искал ответы на это, но на данный момент я думаю, что это может быть что-то, что я специально испортил или не понимаю, что это происходит, поэтому Я хотел связаться со всеми вами.
Вот мой HTML (я надеюсь, что это работает!):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<!---outer containers-->
<div id="container">
<div id="header">
<div id="logo">
</div>
<nav>
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="pricing.html">PRICING</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
<div id="contentbox">
<div id="content">
<div id="frontcontent">
<p>
<img id="sanjapic" src="Images/SanjaPicture.jpg"/>
<h1>Edgy Hair Stylist Serving the Denver Area</h1>
</p>
</div>
</div>
<footer>
<div id="social">
<a href="http://www.facebook.com">
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.yelp.com">
<i class="fa fa-yelp fa-2x" aria-hidden="true"></i>
</a>
<a href="http://www.instagram.com">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
</div>
<div id="left">
<p>
<a href="http://www.googlemaps.com"><i class="fa fa-map-marker fa-3x" aria-hidden="true"></i>
Address: 657 Santa Fe Dr, Denver, CO 80204<br>
Phone:(303) 953-9486</a>
</p>
</div>
</footer>
</div>
</div>
</body>
</html>
и вот мой CSS:
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
body {
background-image: url(Images/bgLarge.jpg);
background-repeat: no-repeat;
background-size: 100%;
padding: 0;
font-family:'Fjalla One', sans-serif;
font-style: normal;
font-weight: 400;
background-attachment: fixed;
margin:0px;
background-color: #2F2F2F;
}
#container {
width: 100%;
margin: 0 auto;
position: relative;
}
#header {
width: 100%;
height: 100px;
background-image: url(Images/toptent.png);
background-repeat: no-repeat;
position: relative;
background-size: contain;
z-index:50;
}
#logo {
background-image: url(Images/SanjaLogoGray.png);
height: 70px;
background-repeat: no-repeat;
z-index: 100;
width: 100%;
margin: 0 auto;
position:relative;
max-width: 250px;
display:block;
}
#contentbox {
width: 80%;
height:100%;
background-color: #ffffff;
margin: 0 auto;
position: relative;
max-width: 800px;
margin-top: -110px;
padding-top: 100px;
display: block;
z-index: -2000;
-webkit-box-shadow: 0px 5px 15px 10px #2F2F2F;
box-shadow: 0px 5px 15px 10px #2F2F2F;
}
#content {
margin-top: 30px;
padding:2%;
display: block;
}
#about {
position:relative;
margin:0;
left:-70px;
top:-8px;
}
#sanjapic {
height:auto;
width: 80%;
max-width:400px;
margin: 0 auto;
position:relative;
display:block;
padding-top:10px;
}
h1 {
font-size:1.2em;
text-align:center;
margin:0 auto;
}
#frontcontent h1 {
max-width:60%;
height: auto;
width:80%;
}
nav {
width: 80%;
background: #ffffff;
border-right: none;
margin: 0 auto;
max-width:800px;
margin-bottom:10px;
margin-top:10px;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
width: 25%; /* fallback for non-calc() browsers */
width: calc(100%/4);
box-sizing: border-box;
margin-bottom:20px;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #000000;
padding:10px;
}
nav ul li a:hover {
display: block;
text-decoration: none;
color: #312847;
border: 2px solid #000000;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px #617574;
box-shadow: 2px 2px 5px #617574;
}
nav ul li a:active {
background-color:#7DB4B9
}
footer {
background-color:#333333;
height:80px;
width:100%;
margin:0 auto;
z-index:3000;
position:relative;
height:100%;
}
footer a{
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
text-decoration:none;
}
#social {
float:right;
padding:20px;
}
#left {
color:#ffffff;
padding:5px;
border:#E9191D thick solid;
display:inline-block;
font-size:.7em;
}
О господи, спасибо так много! Я не могу поверить, что это все. Я изменил индекс z на 0, и теперь они работают. Не могли бы вы объяснить, что делает высокий индекс z, чтобы сломать его? –
@ LivLeigh Я очень рад, что это сработало для вас :) Подумайте, что принять это правильный ответ для пользователей, которые могут быть в той же ситуации, что и вы в будущем. –
Сделано! Спасибо! О, черт возьми, я так рад, что спросил. Я бы никогда не подумал об этом! –