div 레이아웃 작성시 여백발생 문제에 대해서..T-T
두루
인터넷과 책을 뒤져가며 만들어봤습니다;
먼저 전체 소스입니다.
---------------------------------------------------------------------------
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
title000/title
style type=text/css
body{ background: #ffffff;
padding:0px;
height:100%;
width:100%;
text-align: center;
}
#wrapper {
width:861px;
text-align: left;
margin: 0 auto;
}
#top{
background:#ffffff;
padding:20 20 20 20px;
height:50px;
width:861px;
border:#cccccc solid 1px;
margin:0 0 10 0px;
}
#center{
background:#ffffff;
padding:20 20 20 20px;
height:300px;
width:861px;
border:#cccccc solid 1px;
margin:0 0 10 0px;
}
#menu{
float:left;
background-color:#cccccc;
padding:20 20 20 20px;
width:123px;
height:46px;
text-align:center;
border:#cccccc solid 0px;
margin:0 0 0 10;
}
#content{
background:#ffffff;
padding:20 20 20 20px;
height:auto;
width:861px;
border:#cccccc solid 1px;
margin:0 0 10 0px;
}
#foot{
background:#ffffff;
padding:20 20 20 20px;
width:861px;
height:50px;
margin:10 0 0 0;
border:#cccccc solid 1px;
}
a.rollover img { border-width:0px; display:inline; }
a.rollover img.over { display:none; }
a.rollover:hover { border:0px }
a.rollover:hover img { display:none; }
a.rollover:hover img.over { display:inline; }
/style
/head
body
div id=wrapper
div id=topTOP/div
div id=centermainImage/div
div style=width:861px;
a href=http://www.naver.com class class=rollover
img src=menu1.jpg
img src=menu1_1.jpg class=over
/a
a href=주소 class=rolloverimg src=menu2.jpg
img src=menu2_2.jpg class=over
/a
a href=주소 class=rolloverimg src=menu3.jpg
img src=menu3_3.jpg class=over
/a
a href=주소 class=rolloverimg src=menu4.jpg
img src=menu4_4.jpg class=over
/a
a href=주소 class=rolloverimg src=menu5.jpg
img src=menu5_5.jpg class=over
/a
a href=주소 class=rolloverimg src=menu6.jpg
img src=menu6_6.jpg class=over
/a
a href=주소 class=rolloverimg src=menu7.jpg
img src=menu7_7.jpg class=over
/a
/div
div id=contentcontent/div
div id=footFOOT/div
/div
/body
/html
------------------------------
위의 빨간 부분은 원래,
divstyle=width:861px;
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
divid=menumenu/div/a
/div
------------------------------
였는데요, 메뉴라서 롤오버 넣고 싶은 마음에 뒤져보니까 CSS만으로 롤오버 만들기..이런게 있길레
따라 해봤구요, 적용 되더군요. 그런데 문제는-.
메뉴 이미지 사이 사이마다 여백이 생깁니다.
ㅜ.ㅜ
급한 마음에 이 방법을 접고 자바스크립트로도 만들어보았는데요 똑같이 롤오버는 적용이 되지만
여백이 생깁니다;;일단 여백이 생기는 문제도 해결못하고 있으니 답답해서 글 올려봅니다.
가르침 부탁드립니다..ㅠㅠ
-
샤이
a.rollover {zoom:1;}
a:rollover:after {clear:both; content:\ -
크리미걸
답글을 늦게 봤습니다..! 감사합니다 여백 없애긴 했었는데, 이렇게 넣어서도 테스트 해볼께요~!!
-
한국드립
...................롤오버 구문에서 엔터친것들을 없애주니 여백이 사라졌습니다 -ㄹ-;;; 리플 달아주신 님들 감사드립니다.
-
달달한캔디
움..a.rollover img 에 vertical-align:top; 도 넣어주고.. 단위 빠졌다고 하셨는데 #wrapper 의 margin 부분인가 싶어 단위도 넣어줘봤는데 여백이 그대롭니다 ㅜ.ㅜ
-
딥블랙
a.rollover img 에 vertical-align:top 줘보세요~
-
다옴
css에 단위가 전부 빠졌네요. 0이 아닌 값에는 전부 단위를 붙여 주셔야합니다.
ex) padding:1px 2px 3px 0; margin:10px 10px 10px 0;