0
링크가 포함 된 이미지에 문제가 있습니다. 내 웹 사이트의 헤더 역할을하는 고정 위치 PNG가 있습니다. 이 이미지는 다시 내 홈페이지로 연결됩니다. 아래의 스크롤은 전체 이미지를보기 위해 클릭하는 일련의 축소판입니다. 아래로 스크롤하여 축소판 그림이 머리글 PNG 뒤에 있으면 더 이상 홈페이지 링크를 클릭 할 수 없으며 뒤의 축소판 링크를 클릭합니다.다른 링크 된 이미지가 아래에있을 때 링크가있는 고정 된 이미지를 클릭 할 수 없습니다
축소판의 롤오버 기능과 관련이 있다는 느낌이 들었습니다. 헤더 PNG가 반투명하게되어 이상적이지 않습니다. 여기 내 코딩 (사과, 그래서 처음부터 코딩에서의 첫 번째 시도)입니다 :
<!DOCTYPE html>
<html>
<head>
<title>Daniel Lewsley</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div id="header">
<a href="index.html"><img src="img/daniellewsley-header.png" alt="Daniel Lewsley"></a>
</div>
<!--
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="illustration.html">Illustration</a></li>
<li class="nav"><a class="nav" href="design.html">Design</a></li>
<li class="nav"><a class="nav" href="other.html">Other</a></li>
<li class="nav"><a class="nav" href="info.html">Info</a></li>
</ul>
</div>
-->
<div id="gallerycontainer">
<div id="gallery"><a class="rollover" href="img/15.png"><img src="img/gallerythumb15.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/14.png"><img src="img/gallerythumb14.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/13.png"><img src="img/gallerythumb13.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/12.png"><img src="img/gallerythumb12.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/11.png"><img src="img/gallerythumb11.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/10.png"><img src="img/gallerythumb10.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/09.png"><img src="img/gallerythumb09.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/08.png"><img src="img/gallerythumb08.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/07.png"><img src="img/gallerythumb07.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/06.png"><img src="img/gallerythumb06.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/05.png"><img src="img/gallerythumb05.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/04.png"><img src="img/gallerythumb04.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/03.png"><img src="img/gallerythumb03.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/02.png"><img src="img/gallerythumb02.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/01.png"><img src="img/gallerythumb01.png" alt="Thumbnail"></a></div>
</div>
</body>
</html>
CSS : 내가 잘못하고 있어요 무엇인지에
body
{
background-color:white;
font-family:"Arial", arial, sans-serif;
font-size:0.875em; /*16px is 1em */
text-align:center;
margin:0 auto;
padding:0;
min-width:400px;
}
#header
{
font-size:0;
letter-spacing:0;
word-spacing:0;
background-color:white;
position:fixed;
/* margin:0 auto;
width:100%; */
}
ul.nav
{
list-style-type:none;
margin:5px;
padding:0;
overflow:hidden;
}
li.nav
{
display:inline-block;
}
a.nav
{
display:block;
width:100px;
background-color:#dddddd;
text-decoration:none
}
#gallerycontainer
{
padding:40px 0 0 0;
text-align:center;
font-size:0;
letter-spacing:0;
word-spacing:0;
}
#gallery
{
background-color:black;
width:400px;
height:300px;
display:inline-block;
}
a.rollover:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
어떤 아이디어?
감사합니다. 나는 실제로 그 반대가 필요했다. 머리글과 링크가 위에 머무를 수 있습니다. 방금 헤더 대신 z- 인덱스를 +1했습니다. 도와 주셔서 감사합니다. GaborSch. –