CSS 관련 질문입니다 ^^; 정보
CSS 관련 질문입니다 ^^;
본문
이제 CSS 살펴보다보니 이쪽으로 궁금증이 생겨서 아쉬운 포인트를....ㅠㅅㅠ
제가 CSS 로 만들어보다가 문제가 생겨서...답변을 얻고자 이렇게 질문 올립니다~~
Style.css 내용
.menu_face { height:20px; padding-left:30px; text-align:left; }
.menu_line { background-image:url('http://xxx.net/image/line.gif'); height:3px; }
head.php 내용
<div style='width:200px;'>
<div class='menu_face'>내용A</div>
<div class='menu_face'>내용B</div>
<div class='menu_line'></div>
<div class='menu_face'>내용C</div>
.....
....
...
</div>
위와 같이 해줬더니, menu_line 부분에서는 높이 3픽셀의 가로선이 하나 나와야 하는데
menu_face 부분의 20픽셀 높이 영향을 받는지 4줄이나 쫙 그어지더라구요 ㅠㅅㅠ
사이에 <div style='clear:both;'> 도 해줘봤지만.....현상이 똑같고 ;;
위와 같은 건 해결방법을 못 찾은지라....이렇게 문의해봅니다 'ㅁ'
댓글 전체
line.gif' 파일의 세로를 20px로 맞춰주세요.
이미지의 라인을 위치에 원하는만큼 이외에는 투명 또는 바탕색으로 하시구요..
이미지의 라인을 위치에 원하는만큼 이외에는 투명 또는 바탕색으로 하시구요..
line.gif 를 20px 로 맞춰서 넣어주면 메뉴 구분선으로 윗쪽 메뉴와 아랫쪽 메뉴의 틈이
너무 넓어지는터라.... 3px 로 적용이 되게 하는 방법은 없나 해서 질문을 남겨본...^^;
너무 넓어지는터라.... 3px 로 적용이 되게 하는 방법은 없나 해서 질문을 남겨본...^^;
ㅎㅎ .. 그러면 20px 에서 그 벌어진 틈만큼만 줄이면 되지 않을까요?
.menu_line { background-repeat: repeat-x; background-image:url('http://xxx.net/image/line.gif'); height:3px; }
.menu_line { background-position: left top; background-repeat: no-repeat; background-image:url('http://xxx.net/image/line.gif'); height:3px; }
.menu_line { background-position: left top; background-repeat: no-repeat; background-image:url('http://xxx.net/image/line.gif'); height:3px; }
앗, 어느새 >ㅅ<
이렇게 하면 되는거군요 답변 감사합니다 /ㅁ/
이렇게 하면 되는거군요 답변 감사합니다 /ㅁ/
