묻고답하기
이미지 메뉴마다 구분선 넣는 방법.!?
2013.03.30 19:13
안녕하세요. 레이아웃 만드는 법 공부하는 도중에 궁금한 게 생겨서 질문 드립니다. 저는 http://morganstanley.com 여기 페이지를 XE 기반으로 똑같이 옮겨 보려고 하고 있는데요. 저 사이트에 들어가 보시면 아시겠지만 메인 메뉴에 마다 저 위 그림과 같이 하얀색 도트 (dot) 무늬가 들어가 있습니다. 이것을 따라해 보려고 하는데요, CSS 에서 어떻게 잡아야 저 하얀색 도트 무늬가 들어갈까요?
사실 남에게 배포하는 레이아웃이 아닌 만큼 position:absolute; 저 도트 이미지를 특정 위치마다 박아볼까 생각했지만 그건 정석이
아닌 것 같아서 찾아 보았는데, 메인 메뉴의 a 태그에 적용하는 것 같더라구요. 관련 내용을 http://xeschool.com 에서 찾았습니다.
#smart_login li a {color:#FFF; text-decoration: none; padding:0 5px; background:url(../images/dot_bar.gif) no-repeat left 2px;} ※ 리스트는 모두 링크(a) 속성을 가지고 있습니다. 따라서 링크속성에서 밑줄 등을 제거하고 목록의 가로 여백을 준 뒤 왼쪽방향으로 목록을 구분하기 위한 작은 도트막대를 백그라운드 이미지로 처리합니다. 백그라운드는 반복하지 않고 한번만 표시하고 위치를 조정합니다.(닉네임도 임시 링크속성을 주어서 함께 처리합니다.) .nobg {background:none !important;} ※ 배경처리를 원하지 않는 목록에는 class="nobg"로 처리하여 배경을 삭제합니다. 상속을 제거하기 위해 !important를 추가합니다.
제가 연습하고 있는 사이트는 http://93th.woobi.co.kr 여기 입니다. 보시면 아시겠지만 도트 이미지가 없습니다... css 소스를 어떻게 짜야 하나요?
저의 css 소스 :
/* container 1 - 헤더, 프로모션 영역 */
.container1 { margin-top:1px; background-color:#0d2144; }
.header { margin:0 auto; width:968px; height:117px; background:url(../img/bg_header.gif) no-repeat; position:relative; }
.header .topNav { position:absolute; top:4px; right:20px; height:15px; width:200px; background-color:#eee; }
.header .accounts { }
.header .search { }
.header .mainNav { position:absolute; bottom:0px; margin:0 auto; width:968px; height:32px; }
.header .mainNav { background:url(../img/bg_subheader.gif) repeat-x; height:32px; width:968px; margin:0 auto; }
.header .mainNav .nav { list-style:none; overflow:hidden; margin:0; padding:0; }
.header .mainNav .nav li { float:left; margin:0 0; }
.header .mainNav .nav li a { text-decoration:none; background:url(../img/dot.gif) no-repeat; }
.container1 { margin-top:1px; background-color:#0d2144; }
.header { margin:0 auto; width:968px; height:117px; background:url(../img/bg_header.gif) no-repeat; position:relative; }
.header .topNav { position:absolute; top:4px; right:20px; height:15px; width:200px; background-color:#eee; }
.header .accounts { }
.header .search { }
.header .mainNav { position:absolute; bottom:0px; margin:0 auto; width:968px; height:32px; }
.header .mainNav { background:url(../img/bg_subheader.gif) repeat-x; height:32px; width:968px; margin:0 auto; }
.header .mainNav .nav { list-style:none; overflow:hidden; margin:0; padding:0; }
.header .mainNav .nav li { float:left; margin:0 0; }
.header .mainNav .nav li a { text-decoration:none; background:url(../img/dot.gif) no-repeat; }
댓글 2
-
송동우
2013.03.30 20:13
-
Fidelity
2013.03.30 20:30
말씀 감사합니다. ㅠㅠ. 혹시 저 xeschool 내용으로 넣을 수 있는 방법은 없을까요.? ㅠㅠ. -
송동우
2013.03.30 20:40
xeschool은 li 태그에 border-right:1px #333 solid 값을 줘서 만든겁니다.
-
Fidelity
2013.03.30 20:59
와우 그런 방법이! http://93th.woobi.co.kr 로 눈에 확띄게 2px #000 solid 로 했는데 이거 나중에 점선으로 바꾸면 되겠네요! 그런데 혹시 이 선의 길이를 더 짧게 할 수 있는 방법은 없을까요...? -
Fidelity
2013.03.30 21:06
아이고 . ㅠ ㅠ 방금 백업하려다가 rm -rf 로 날려버려서 다 날아갔네요.. 다른 컴퓨터 로컬에 자료가 있기는 하지만 --ㅋ 어쨌뜬 감사합니다.!! border 부분 길이만 조정할 수 있으면 좋을텐데요! 인터넷 검색해도 안나오네요.. 그런 방법은 없는 듯 해요 . ㅠ ㅠ
방법은 여러가지가 있습니다.
사람마다 취향이 다르듯
구성되는 코드작성에 따라
또는 사람의 기호에 따라 여러가지 방법이 있기 때문에
답이 정해져 있는 것은 아닙니다.
다만 질문에 올려진
http://morganstanley.com
여기를 기준으로 답하자면
메뉴가 td 태그에 감싸져 있고
그 메뉴 td 사이에 아무것도 없는 빈 td가 들어가 있습니다.
그리고 백그라운드 이미지가
http://www.morganstanley.com/img/bg-topnav-divider.gif
이것이 들어가구요
메뉴 td 사이사이에 계속 반복적으로 들어가 있는 겁니다......