链接不可用于页脚

第一次提问。我已经详尽地研究了这个问题，我想知道我的问题是什么，但我不知道如何解决它。我尝试了多种不同的东西，无济于事。我正在尝试学习html和css，这是我第一次亲自手写一个网站，尽管我在Dreamweaver中做了这个。链接不可用于页脚

我无法获得位置或社交媒体字体的真棒图标变成链接。这些网址现在只是通用的，我在左右两边的花车上添加了一个边框，这样我就可以检查它们是否在正确的位置。

我认为，正在发生的事情是，我contentbox或我的容器填充重叠页脚，但我已经改变了Z-index和试图消除填充一起，他们似乎仍然没有工作（然后页面看起来并不像我想要的那样）我一直在寻找这个答案，但是在这一点上，我认为这可能是我特别搞砸了或者不明白正在实现的事情，所以我想要接触到你们所有人。

这里是我的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; 


}

来源

2016-04-30 Liv Leigh

你的问题是#contentbox此声明如下：

z-index: -2000;

这绝对是你不想做的事情。您的可见物品的最低z-索引应始终为0，并且您应该从这个方向努力。

也避免使用太大的数字，因为它更难保持标签。

更新：这里是你的代码http://jsbin.com/zatogisepo/edit?html,css,output

来源

2016-04-30 17:27:04

哦，我的天哪的工作版本，太感谢你了！我无法相信这就是它的全部。我将z-index更改为0，现在可以工作。你介意解释高z指数做什么来打破它吗？ –

@LLeLeigh我真的很高兴它为你工作:)考虑接受这是一个有效的答案，然后，用户谁可能在未来与你在相同的情况。 –

完成！谢谢！哦，我的天哪，我很高兴我问。我从来不会想到这件事！ –

链接不可用于页脚

回答

相关问题