뒤틀려요ㅠㅠ 정보
뒤틀려요ㅠㅠ첨부파일
본문
http://zv.pe.kr/ 를 firefox 등 ie외의 브라우저에서 들어오면 뒤틀립니다..
style.css / head.php / tail.php / index.php
올립니다..
고칠점이 있으면 부탁드려요..
css 초보라.. 힘듭니다..
4만포인트 걸어요
댓글 전체
css를 잘 못하지만...없는 실력에 한번 짜봅니다.
css 파일을 살펴보니 저런상태로는 추후에 관리하기가 엄청힘들겁니다.
걸어놓으신 페이지를 토대로 아래와같이 다시 짜보았으니 적절하게 해당하는
head/index/tail 파일에 적절하게 짤라서 배치하세요.
아래를 그대로 카피하셔서 에디터에서 어떻게 뜨나 실험한번하시고 해보세요.
브라우저를 줄이거나 크게하여도 깨지지않고 중앙에 잘 정렬될겁니다.
-------------------------------------------------------------------------------------
<style>
body {
font-family:Arial,Tahoma,dotum,verdana,arial,helvetica,sans-serif;
font-size:11px;
height:100%;
width:100%;
max-height:100%;
overflow:hidden;
_overflow:hidden;
margin:0;
padding:0;
}
IMG {
border:none;
}
#dvwrap {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:hidden;
position:relative;
z-index:1;
}
#center {
width:950px;
position:relative;
margin:0 0 0 -484px;
left:50%;
overflow:hidden;
background-color:#FFF;
top:0;
}
#alpa {
position:relative;
height:40px;
margin:0;
}
#alpaLeft {
width:230px;
position:absolute;
top:0;
left:0;
height:40px;
}
#alpaRight {
position:absolute;
left:auto;
right:0;
width:230px;
height:40px;
}
#alpacontent {
position:absolute;
text-align:center;
left:230px;
right:230px;
height:40px;
}
#alpas {
position:relative;
height:35px;
background-color:#333333;
margin:0;
}
#alpasLeft {
width:80%;
position:absolute;
top:0;
left:0;
height:35px;
}
#alpasRight {
position:absolute;
background-color:green;
left:auto;
right:0;
width:20%;
height:35px;
}
#menu_click {
position:relative;
width:50px;
float:left;
height:150px;
right:0;
}
#ad {
position:absolute;
width:900px;
right:0;
height:150px;
}
#ads {
position:relative;
width:100%;
right:0;
top:150:
text-align:center;
}
</style>
<div id="dvwrap">
<div id="alpa">
<div id="alpaLeft">
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_01.jpg" />
</div>
<div id="alpacontent">
탑공간부
</div>
<div id="alpaRight">
탑검색부분
</div>
</div>
<div id="alpas">
<div id="alpasLeft">
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_03.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_04.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_05.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_06.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_07.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_08.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_09.jpg" />
</div>
<div id="alpasRight">
공간
</div>
</div>
<div id="center">
<div id="menu_click">
<a href="javascript:void(myImg.src='<?=$g4[path]?>/img/site/ad_grass.jpg')"><img src="http://zv.pe.kr/img/site/01.gif"></a><br /><br />
<a href="javascript:void(myImg.src='<?=$g4[path]?>/img/site/ad_grass2.jpg')"><img src="http://zv.pe.kr/img/site/02.gif"></a><br /><br />
<a href="javascript:void(myImg.src='<?=$g4[path]?>/img/site/ad_grass3.jpg')"><img src="http://zv.pe.kr/img/site/03.gif"></a>
</div>
<div id="ad">
<img src="http://zv.pe.kr/img/site/ad_grass.jpg" />
</div>
<div id="ads">
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_13.jpg" />
</div>
</div>
</div>
css 파일을 살펴보니 저런상태로는 추후에 관리하기가 엄청힘들겁니다.
걸어놓으신 페이지를 토대로 아래와같이 다시 짜보았으니 적절하게 해당하는
head/index/tail 파일에 적절하게 짤라서 배치하세요.
아래를 그대로 카피하셔서 에디터에서 어떻게 뜨나 실험한번하시고 해보세요.
브라우저를 줄이거나 크게하여도 깨지지않고 중앙에 잘 정렬될겁니다.
-------------------------------------------------------------------------------------
<style>
body {
font-family:Arial,Tahoma,dotum,verdana,arial,helvetica,sans-serif;
font-size:11px;
height:100%;
width:100%;
max-height:100%;
overflow:hidden;
_overflow:hidden;
margin:0;
padding:0;
}
IMG {
border:none;
}
#dvwrap {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:hidden;
position:relative;
z-index:1;
}
#center {
width:950px;
position:relative;
margin:0 0 0 -484px;
left:50%;
overflow:hidden;
background-color:#FFF;
top:0;
}
#alpa {
position:relative;
height:40px;
margin:0;
}
#alpaLeft {
width:230px;
position:absolute;
top:0;
left:0;
height:40px;
}
#alpaRight {
position:absolute;
left:auto;
right:0;
width:230px;
height:40px;
}
#alpacontent {
position:absolute;
text-align:center;
left:230px;
right:230px;
height:40px;
}
#alpas {
position:relative;
height:35px;
background-color:#333333;
margin:0;
}
#alpasLeft {
width:80%;
position:absolute;
top:0;
left:0;
height:35px;
}
#alpasRight {
position:absolute;
background-color:green;
left:auto;
right:0;
width:20%;
height:35px;
}
#menu_click {
position:relative;
width:50px;
float:left;
height:150px;
right:0;
}
#ad {
position:absolute;
width:900px;
right:0;
height:150px;
}
#ads {
position:relative;
width:100%;
right:0;
top:150:
text-align:center;
}
</style>
<div id="dvwrap">
<div id="alpa">
<div id="alpaLeft">
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_01.jpg" />
</div>
<div id="alpacontent">
탑공간부
</div>
<div id="alpaRight">
탑검색부분
</div>
</div>
<div id="alpas">
<div id="alpasLeft">
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_03.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_04.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_05.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_06.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_07.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_08.jpg" />
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_09.jpg" />
</div>
<div id="alpasRight">
공간
</div>
</div>
<div id="center">
<div id="menu_click">
<a href="javascript:void(myImg.src='<?=$g4[path]?>/img/site/ad_grass.jpg')"><img src="http://zv.pe.kr/img/site/01.gif"></a><br /><br />
<a href="javascript:void(myImg.src='<?=$g4[path]?>/img/site/ad_grass2.jpg')"><img src="http://zv.pe.kr/img/site/02.gif"></a><br /><br />
<a href="javascript:void(myImg.src='<?=$g4[path]?>/img/site/ad_grass3.jpg')"><img src="http://zv.pe.kr/img/site/03.gif"></a>
</div>
<div id="ad">
<img src="http://zv.pe.kr/img/site/ad_grass.jpg" />
</div>
<div id="ads">
<img src="http://zv.pe.kr/site_layout/dorablue_like_zero/images/index_13.jpg" />
</div>
</div>
</div>
감사합니다 ^^