鏈接不可用於頁腳

第一次提問。我已經詳盡地研究了這個問題，我想知道我的問題是什麼，但我不知道如何解決它。我嘗試了多種不同的東西，無濟於事。我正在嘗試學習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我真的很高興它爲你工作:)考慮接受這是一個有效的答案，然後，用戶誰可能在未來與你在相同的情況。 –

完成！謝謝！哦，我的天哪，我很高興我問。我從來不會想到這件事！ –

鏈接不可用於頁腳

回答

相關問題