묻고답하기
3단 가변 레이아웃 만들때~ 본문이 아래로 내려가버림;
2010.05.26 11:53
주소 : http://kr.train999.net
1. 창 최대화시 괜찮은데요.
창 크기를 줄이면, 본문하고 우측메뉴가 아래로 내려가서요.
어디가 문젤까요...................... ㅠ_ㅡ
/* Layout */
#container{ position:relative; width:100%; margin:0 auto 0 auto; padding:0 0 0 0;}
#header{ position:relative; clear:both; *zoom:1; margin:-5px 0 0 0; padding:0 0 0 0; border-bottom:1px solid #ccc;}
#body{ position:relative; clear:both; *zoom:1; margin:10px 0 30px 0; padding:0 200px 0 150px;}
.menu1{ position:relative; *zoom:1; float:left; width:150px; margin:-25px 0 0 -150px; padding: 0 10px 0 0;}
#content{ text-align:justify; float:left; width:93%; margin:0 0 0 0; padding: 0 10px 30px 10px; border-left:1px dashed #ccc; border-right:1px dashed #ccc;}
.menu2{ position:relative; *zoom:1; float:left; width:200px; margin:0 -200px 0 0; padding: 0 0 0 10px;}
#footer{ position:relative; clear:both; *zoom:1; margin:0 0 0 0; padding:22px 0 22px 0; border-top:1px solid #ccc; background-position: center; background-repeat: repeat-x; background-image:url(?module=file&act=procFileDownload&file_srl=18764176&sid=4f8b49fc12800c902100799b08b0e007)undefined;}
/* Header menu 상단 메뉴 */
#header .menu{ position:relative; *zoom:1; margin:1em 0 0 0;}
#header .menu ul{ position:relative; margin:0; padding:0; overflow:hidden;}
#header .menu li{ position:relative; display:inline; list-style:none; left:-10px; border-left:1px solid #ccc; padding:0 5px 0 10px;}
#header .logo { position:absolute; margin:-10px 0 0 5px; padding:0 0 0 0; text-align:left;}
#header .search { margin:0 0 0 0; padding:0 0 0 0; text-align:center; background-color: #191970;}
/* Body menu 메인 메뉴 */
#body .menu{position:relative; clear:both; *zoom:1; display:none; margin:0 0 0 0; padding:0 0 0 0;}
#body .menu .section{position:relative;}
/* Footer menu 하단 메뉴 */
#footer .menu{ position:relative; *zoom:1; margin:1em 0 0 0; text-align:center;}
#footer .menu ul{ position:relative; margin:0; padding:0 0 0 0; overflow:hidden;}
#footer .menu li{ position:relative; display:inline; list-style:none; left:-10px; border-left:1px solid #ccc; padding:0 5px 0 10px;}
#footer address{ text-align:center; margin:1em 0 0 0;}
/* 밑줄 */
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
a,img{outline: none;selector-dummy:expression(this.hideFocus=true);} /* a,img,input */
/* Element */
body { font-family:Tahoma, Sans-serif; font-size:12px; background:#fff; color:#000;}
address { font-style:normal;}
hr{ display:none; position:absolute;}
img,
fieldset{ border:0;}
H2 {text-decoration:none; color:#ffcc00;}
/* Class */
.preview{ float:left; margin:0 1em 1em 0;}
.layout{ list-style:none; margin:0; padding:0; text-indent:-10px;}
.layout li{ display:inline; margin:0; padding:0 0 0 10px; border-left:1px solid #ccc;}
.layout li:first-child{ border:0;}
.layout li button { position:relative; border:0; padding:0; background:none; cursor:pointer; font-size:12px; overflow:visible; color:#66F;}
.layout li button:hover,
.layout li button:active,
.layout li button:focus{ font-weight:bold; letter-spacing:-1px;}
댓글 2
-
plruto
2010.05.26 14:06
-
mindpainter
2010.05.26 18:41
지금 작성하신 형태에서는 %값과 padding, margin등에 주신 pixel값이 혼용되어 있어 문제가 될듯 합니다.
브라우저를 조금씩 줄여보시면 어느정도의 폭에서 밑으로 내려가는거 같은데,
틀은 가변적인데 그안에 pixel로 입력한 절대값들이 있어서 브라우저 크기가 그 이하가 되면 그 현상이 생기는거 같습니다.
보통은 전체를 감싸는 레이어를 고정pixel로 주고 가운데던 좌측이던 정렬 하고 %값은 그 안에서 사용하죠..
참고로 naver, daum은 둘다 880pixel 이더군요..
min-width를 넣으면 해결될것 같습니다.
구글에서 min-width ie6 로 검색하면 ie6를 포함해서 크로스 브라우징의 해결방법이 나올겁니다.
본문위젯도 px로 값을주지말고 %로 하십시요.