0
디자인에 겹치는 div가 있고 링크를 클릭 할 수 없습니다. 링크를 클릭 할 수없는 이유는 겹치는 div 때문입니다. 그래서 일부 z- 색인을 할당하여 해당 항목을 삭제하려고했습니다. 그러나, 나는 부모 div (실제로 내 텍스트가있는 div를 포함하는 것)를 가장 높은 z-index 요소로 만듦으로써 링크를 클릭 가능하게 만들 수 있다는 것을 알아 차릴 수있다. 내 디자인과 모양이 완전히 깨진다. 내가 눈치 채지 못하게하는 다른 방법이 있습니까? 또는 디자인을 완전히 다시해야하는 경우입니까?div가 중복되어 링크를 클릭 할 수 없습니다.
The link to the journal skin I am working on.
은 또한 거기 branchoverlay의 DIV에 보관 옆 가지가 다른 div의에게 조금 중복 here를 참조하기위한 것입니다 것을 언급에 약간의 편집을 던져합니다. 나는 그들 div에서 그들을 제거하고 contentholder의 배경에 넣는 제안을 들었다. 그러나 그것은 내가 생각하는 그 효과를 망칠 것인가? 음수 여백을 통해 너무 겹치지 않고 div의 약간의 오버레이를 달성하기 위해 헤더/드롭 다운 영역을 포맷하는 더 좋은 방법이 있습니까?
HTML :
<div class="text"><div class="body">
<div class="menu"><div class="dropdowncontainer"><div class="dropdown">
<span><img src="https://s18.postimg.org/i8xcnc8gp/home.png"></span>
<div class="dropdown-content">
<a href="#">Bacon</a>
<a href="#">Ribs</a>
<a href="#">Steak</a>
</div>
</div><div class="dropdown">
<span><img src="https://s9.postimg.org/iw9covwu7/guide.png"></span>
<div class="dropdown-content">
<a href="#">Bacon</a>
<a href="#">Ribs</a>
<a href="#">Steak</a>
</div>
</div><div class="dropdown">
<span><img src="https://s12.postimg.org/aa9pluszh/resources.png"></span>
<div class="dropdown-content">
<a href="#">Bacon</a>
<a href="#">Ribs</a>
<a href="#">Steak</a>
</div>
</div></div>
</div><div class="branchoverlay"></div><div class="contentholder">
<div class="maindiv"><p>Welcome and thank you for your interest in joining Hvalla, the following links have been provided for your convenience.
<h3>Required Reading</h3>
» <a href="http://hvalla.deviantart.com/journal/Group-Rules-621936986">The Rules</a> — While you are not expected to commit these to memory, they are a required read.
» <a href="http://hvalla.deviantart.com/journal/Setting-and-World-Lore-623071331">Setting and World Lore</a> — An in-depth look at the world of Hvalla, from locations to the packs that inhabit it.
» <a href="http://hvalla.deviantart.com/journal/Character-Creation-627655883">Character Creation</a> — All information pertaining to the creation of your character.
» <a href="http://hvalla.deviantart.com/journal/How-to-Join-622339097">How to Join</a> — A detailed overview of the current joining process.
» <a href="http://hvalla.deviantart.com/journal/Runestones-622318184">Currency</a> — An in-depth guide of Runestones and how to utilize them.
» <a href="http://hvalla.deviantart.com/journal/FAQ-622340489">FAQ</a> — All frequently asked questions.
<hr>
<b>Core Concepts:</b>
<ul><li><span>Hvalla is a semi-realistic wolf art and roleplay community. Our goal is to stretch the boundaries of realism in a tasteful way, encouraging a more mature form of creativity in wolf RP. </span></li></ul><ul><li><span>We strive to provide a community that is inclusive and close-knit; no one should ever feel excluded, railroaded or otherwise on the fringes of a clique of close friends.</span></li></ul><ul><li><span>Characters in Hvalla may exhibit humanized aspects such as facial expressions and verbal communication similar to media such as Princess Mononoke, </span><a href="https://youtu.be/GgGOcEgRh7k">The Jungle Book</a><span>, </span><a href="https://youtu.be/3h_nB089jrs">Savva</a><span> etc., but overall should exhibit realistic behavior. </span></li></ul><ul><li><span class="bbcode_bold">Hvalla explores themes that are ideologically sensitive in nature.</span><span> We are always excited to involve new members in the community, however, if you find the exploration of dark themes such as murder, war, pillaging, abuse etc., to be outside of your comfort zone or you find yourself easily offended by aforementioned subjects, Hvalla may not be the community for you. Remember, this is creative writing, not real life.</span>
</li></ul></p></div></div>
<div class="rockfooter"></div> </div></div>
CSS : 줄 수있는 모든 도움과 제안 누군가를 위해
이/*BODY*/
.gr-body {
background: url(http://orig14.deviantart.net/8b57/f/2016/279/f/5/frontpagebackground_by_wulfghast-dak5apt.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-color: #1c1119;
color: #545454;
}
.gr-top{
border: none;
margin: -5px 0px -10px 0px;
}
.gr-top img {
display: none;
}
h2 {
display: none;
}
.gr-top span {
display: none;
}
.tri {
display: none;
}
.gr1, .gr2, .gr3 {
display:none;
}
.bottom {
display: none;
}
.text {
margin-bottom: -38px;
padding: 0;
}
/*TEXT*/
p {
color: #3c281f;
font-family: 'montserrat', sans-serif;
font-size: 15px;
line-height: 1.4;
margin: 20px;
}
/*MENU AREA*/
.menu {
width: 64%;
height: 171px;
margin-left: auto;
margin-right: auto;
margin-top: 18%;
padding-left: 10%;
background: url('http://s15.postimg.org/zby726h7v/header.png');
background-repeat: no-repeat;
background-position: top-center;
background-size: 100% 70%;
position: relative;
z-index: 3;
}
.branchoverlay {
width: 74%;
height: 694px;
margin-left: auto;
margin-right: auto;
margin-top: -53px;
background: url('http://s15.postimg.org/n6ayvyzrd/branchoverlay.png');
background-repeat: no-repeat;
background-position: top-center;
background-size: 100% 70%;
position: relative;
z-index: 2;
}
.dropdowncontainer {
height: 30px;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.dropdown {
position: relative;
display: inline-block;
width: 23%;
text-align: center;
margin-top: 30px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4a463b;
min-width: 120px;
padding-bottom: 20px;
}
.dropdown-content a {
color: #ffffff;
line-height: 2.5;
}
.dropdown-content a:hover {
color: #000000;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*CONTENT*/
.contentholder {
width: 68%;
margin-left: auto;
margin-right: auto;
margin-top: -735px;
-moz-box-shadow: 0 20px 20px 5px #0a0a0a;
-webkit-box-shadow: 0 20px 20px 5px #0a0a0a;
box-shadow: 0 20px 20px 5px #0a0a0a;
background-color: #50463b;
position: relative;
z-index: 1;
}
.maindiv {
width: 85%;
margin-top: 4%;
margin-left: 5%;
margin-bottom: 400px;
position: relative;
z-index: 5;
padding: 20px 20px 20px 20px;
display: inline-block;
}
/*FOOTER*/
.rockfooter {
background: url(http://s17.postimg.org/is79jxd3z/footer3_by_wulfghast_dakd92b_1.png);
height: 1000px;
width: 100%;
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;
margin-left: auto;
margin-right: auto;
margin-top: -1100px;
position: relative;
z-index: 4;
}
/*RESPONSIVE MOBILE*/
.da-media[mobile] .menu {
width: 74%;
padding-left: 0%;
}
.da-media[mobile] .dropdown {
margin-top: 35px;
width: 31%;
}
.da-media[mobile] .maindiv {
margin-left: 1%;
}
.da-media[mobile] .rockfooter {
margin-top: -1300px;
}
감사합니다!
확실한 답변입니까? – Darence30