2016-07-07 3 views
1

Yo!だから私は現在、垂直のヘッダーを使用して新しいウェブサイトを作成している私はあなたが最初に言うことができ、私はそれが固定位置を使用すると、画像からリンクが削除される問題が発生したと思います。固定位置は画像からのリンクを削除します

ありがとうございます!

.header { 
 
    width: 200px; 
 
    height: 100%; 
 
    background-color: #212121; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    -webkit-box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5); 
 
    -moz-box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5); 
 
    box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5); 
 
} 
 
.menu { 
 

 
} 
 
.menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu li { 
 

 
} 
 
.menu li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    background-color: #3AC6F4; 
 
    padding: 15px 0 15px 10px; 
 
    margin-top: 1px; 
 
    color: white; 
 
    transition: opacity .15s ease-in-out; 
 
    -moz-transition: background-color .15s ease-in-out; 
 
    -webkit-transition: background-color .15s ease-in-out; 
 
} 
 
.menu li a:hover { 
 
    background-color: white; 
 
    color: black; 
 
} 
 
.container1 { 
 
    margin: 0 auto; 
 
    width: 700px; 
 
    
 
} 
 
.footer { 
 
    position: fixed; 
 
    bottom: 30px; 
 
    padding: 25px; 
 
    height: 150px; 
 
    width: 150px; 
 
} 
 
.footertext { 
 
    text-align: center; 
 
    padding-top: 5px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link href="css/style.css" rel="stylesheet"> 
 
<link href="css/images/favicon.ico" rel="shortcut icon"> 
 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
 
<title>Loom | Home</title> 
 

 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
     <div class="menu"> 
 
      <ul> 
 
       <li><a href="index.html">HOME</a></li> 
 
       <li><a href="index.html">PORTFOLIO</a></li> 
 
       <li><a href="index.html">CONTACT</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="footer"> 
 
      <a href="index.html"><img src="css/images/loombottomlogo.svg" alt="Logo"></a> 
 
      <div class="footertext"> 
 
      @2016 ExLoom.<br/> All Rights Reserved. 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="container1"> 
 
     <div class="titlebackground"> 
 
      <div class="title"> 
 
       text 
 
      </div> 
 
     </div> 
 

 
     <div class="titlep"> 
 
      text 
 
     </div> 
 
    </div> 
 
    
 
    <div class="footer"> 
 
    
 
    </div> 
 

 
</body> 
 
</html>

答えて

2

私は(あなたのHTMLコードの終わり近くに、あなたの<body>要素の最後の<div>)追加の空の<div class="footer">を削除し、それが動作します。

次の2つの<div class="footer">

+0

を持ってすごいああ、それを見ていない...まあ、私は今、愚かに感じることはありません。..おかげところで:D – loomanleet

関連する問題