gnb바 수정을 도와주실 수 있으신가요?

gnb바 수정을 도와주실 수 있으신가요?

QA

gnb바 수정을 도와주실 수 있으신가요?

본문

안녕하세요 한 번 더 올려봅니다. 

저기 작은 검은색 박스를 연한 검은색 박스 위에 겹쳐서 올리고 싶습니다. 

연한 박스를 복사해서 만든지라 작은 박스에도 마진이 들어간 것 같아서 그것도 빼고 싶고요. 

그리고 텍스트에 들어간 링크 효과도 빼고 싶어요.

.a {text-decoration: none;}

.a_text {text-decoration: none;}

.a a_text {text-decoration: none;}

다 안빠지네요 왜일까요ㅜ

 

불필요한 태그가 있을 경우 지적과 수정 부탁드립니다.

제가 아는 것이 없어 문의 드려요 도와주세요ㅜ

 

 

d2504afb4cdc34a6193c57b39ad280fa_1508211499_9172.jpg
 

 

 

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; 주시고

포지션 수정하는 것도 괜찮은 방법이 될 듯 합니다.

앗 감사합니다! 해결되었어요. 올라온 작은 박스는 왼쪽으로 기울어져서 margin-left로 맞췄습니다.
 nav에 a링크 text-decoration: none에 대해서도 여쭤보고 싶습니다. 색변경하고 링크 기본 꾸밈를 없애고 싶은데 사라지지 않아서요ㅠ 부탁드립니다. 문제 해결해주신 건 정말 감사드려요!!!

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT