메뉴바 구분 선 문의

메뉴바 구분 선 문의

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

메뉴바 구분 선 문의

본문

1731457582_1552622210.0302.jpg

이런식으로 메뉴바 사이에 구분 선을 넣고싶습니다

 

개인적인 문제로 홈페이지 공개는 못합니다 ㅜㅜ

 

/* 메인메뉴 */
#gnb {position:relative;margin:0 auto;width:1023px;border-top:5px dotted #FF0000;border-bottom:5px solid #FF0000;background:#FF0000}
#gnb h2 {position:absolute;font-size:1;line-height:0;overflow:hidden}
#gnb_1dul {margin:0 auto !important;padding:0;width:1023px;zoom:1;text-align:center}

#gnb_1dul a{color:#fff;font-size:14px;}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;position:relative;display:inline-block;text-align:center}
.gnb_1da {display:inline-block;padding:0 50px;height:40px;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {text-decoration:none}
.gnb_1dli_air .gnb_1da {background-color:#FF0000;color:#fff}
.gnb_1dli_on .gnb_1da {background-color:#FF0000;color:#fff}
.gnb_2dul {display:none;position:absolute;top:35px;width:180px}
.gnb_2da {display:block;padding:13px 10px;text-align:left;text-decoration:none}
.gnb_1dli_air .gnb_2da {background-color:#FF0000;color:#fff}
.gnb_1dli_on .gnb_2da {background-color:#FF0000;color:#fff}
.gnb_2da:focus, .gnb_2da:hover {background:#FF5200;text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}

 

여기서 어디를 추가? 수정해야할까요?

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기 이 글을 내 구글플러스 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 1

채택됨

펄스나인님의 답변

width가 1023px 인 #gnb_1dul 안에 a링크는 가운데 정렬로

처리하는것 같습니다.

a링크를 div로 감싸고 해당 div의 우측이나 좌측에 border를 넣어주는 방식이나

a링크에 padding을 주고 우측이나 좌측에 border를 넣는 방법으로 처리해야 될것 같습니다.

 

예를들면

<style>
//작성해주신 css를 참고하여 padding 및 border 를 추가
#gnb {position:relative;margin:0 auto;width:1023px;border-top:5px dotted #FF0000;border-bottom:5px solid #FF0000;background:#FF0000}
#gnb_1dul {margin:0 auto !important;padding:0;width:1023px;zoom:1;text-align:center;}
#gnb_1dul a{color:#fff;font-size:14px;padding:0 50px 0 50px;border-left:1px solid #fff;}
#gnb_1dul a:first-child {border-left:0}
</style>
 
<div id="gnb">
    <div id="gnb_1dul">
        <a href="#">메뉴명1</a>
        <a href="#">메뉴명2</a>
        <a href="#">메뉴명3</a>
    </div>
</div>

 

이런형태로 구현이 가능할것 같습니다.

 

a링크에 padding을 좌우로 주고 border를 넣었고

border-left를 했을경우 모든 a링크에 왼쪽라인이 생기므로 first-child 를 사용하여

첫번째 a링크는 라인이 생기지 않도록 처리할 수 있습니다.

 

위 내용대로 적용했을 경우 결과물은 아래와 같습니다.

 

1925655678_1552629148.5967.png

 

감사합니다. 

 

주소복사
채택됨
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 34,149
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. @멘션 알림 플러그인

    참여25 회 시작19.03.18 09:33 종료19.03.25 09:33

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT