gnb바 수정을 도와주실 수 있으신가요?
본문
안녕하세요 한 번 더 올려봅니다.
저기 작은 검은색 박스를 연한 검은색 박스 위에 겹쳐서 올리고 싶습니다.
연한 박스를 복사해서 만든지라 작은 박스에도 마진이 들어간 것 같아서 그것도 빼고 싶고요.
그리고 텍스트에 들어간 링크 효과도 빼고 싶어요.
.a {text-decoration: none;}
.a_text {text-decoration: none;}
.a a_text {text-decoration: none;}
다 안빠지네요 왜일까요ㅜ
불필요한 태그가 있을 경우 지적과 수정 부탁드립니다.
제가 아는 것이 없어 문의 드려요 도와주세요ㅜ
html
<nav id="gnb">
<div class="wrap">
<div class="logo-plus">
<div class="menubar"></div>
<div class="menu_logo">
<a href="#section01">
<img src="img/logo_in_menu.png" alt="로고">
</a>
</div>
</div>
<ul class="icon">
<i class="facebook"><a href="https://www.naver.com/"><img src="img/facebook-black.png"></a></i>
<i class="insta"><a href="https://www.naver.com/"><img src="img/instagram-black.png"></a></i>
<i class="kakaos"><a href="http://www.kakao.com/talk"><img src="img/kakaostory-black.png"></a></i>
<i class="kakaot"><a href="http://www.kakao.com/talk"><img src="img/kakaotalk-black.png"></a></i>
</ul>
<br><br><br>
<ul class="bar">
<li class="About">
<a href="#section01"><div class="colbox01"></div><div class="colbox02"></div></a><br>
<a class="a_text" href="#section01">About us</a>
</li>
<li class="Portfolio">
<a href="#section02"><div class="colbox01"></div><div class="colbox02"></div></a><br>
<a class="a_text" href="#section02">Portfolio</a>
</li>
<li class="Business">
<a href="#section03"><div class="colbox01"></div><div class="colbox02"></div></a><br>
<a class="a_text" href="#section03">Business</a>
</li>
<li class="Contract">
<a href="#section04"><div class="colbox01"></div><div class="colbox02"></div></a><br>
<a class="a_text" href="#section04">Contract us</a>
</li>
</ul>
</di
css
#gnb{
background-color : rgba(255, 255, 255, 0.5);
width: 100%;
height: 150px;
position: fixed;
z-index: 100;}
.wrap{width:62.5%;
height:150px;
padding-top: 1.2em;}
.menubar{
width: 160px;
height: 7px;
background-color: #231815;
margin-bottom: 1em;}
.logo-plus{float:left;}
.icon{width: 140px;
height: 25px;
float: right;}
.kakaos, .facebook, .insta{margin-right: 1em;}
.bar{display: inline-block;
float: right;
}
.colbox01{
width: 127px;
height: 5.5px;
background-color: #231815;
opacity: 0.2;
}
.colbox02{
width: 53px;
height: 5.5px;
background-color: #231815;
}
ul li {text-decoration: none;
float: left;
display: inline-block;
font-size: 14pt;
position:relative;
}
.a_text{text-decoration: none;}
.About, .Portfolio, .Business{
margin-right: 5.5em;}
답변 1
요런부분은 테스트 할 수 있는 사이트 주소를 올려주시는게 좋습니다.
사이트 주소 주시면 아마 좀 더 빨리 답변 찾을 수 있을 듯 합니다.
<div class="colbox01"><div class="colbox02"></div></div>
colbox01에는 position:relative; 주시고, colbox02에는 position:absolute; 주시고
포지션 수정하는 것도 괜찮은 방법이 될 듯 합니다.
!-->