CSS 관련 질문입니다 ^^;

· 19년 전 · 1418 · 5
이제 CSS 살펴보다보니 이쪽으로 궁금증이 생겨서 아쉬운 포인트를....ㅠㅅㅠ
 
제가 CSS 로 만들어보다가 문제가 생겨서...답변을 얻고자 이렇게 질문 올립니다~~
 
 
Style.css 내용
 
.menu_face { height:20px; padding-left:30px; text-align:left; }
 
 
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;'> 도 해줘봤지만.....현상이 똑같고 ;;
위와 같은 건 해결방법을 못 찾은지라....이렇게 문의해봅니다 'ㅁ'
|

댓글 5개

뭉게구름
19년 전
line.gif' 파일의 세로를 20px로 맞춰주세요.

이미지의 라인을 위치에 원하는만큼 이외에는 투명 또는 바탕색으로 하시구요..
line.gif 를 20px 로 맞춰서 넣어주면 메뉴 구분선으로 윗쪽 메뉴와 아랫쪽 메뉴의 틈이
너무 넓어지는터라.... 3px 로 적용이 되게 하는 방법은 없나 해서 질문을 남겨본...^^;
뭉게구름
19년 전
ㅎㅎ .. 그러면 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; }
앗, 어느새 >ㅅ<
이렇게 하면 되는거군요 답변 감사합니다 /ㅁ/

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기
🐛 버그신고