[재등록] div css 스타일 문의 정보
[재등록] div css 스타일 문의본문
오류 주소 :
아래 질문을 등록하였으나, 댓글로는 이미지를 첨부 할 수 없는 문제로 다시 등록하게 되었습니다.
상단 첨부 이미지를 보시면 1차적으로 작업을 해보았습니다.
+-- [돼지코구뇽] 님의 댓글 인용 --+
레이아웃 구조를
head div 상단 1개
index div 왼쪽 가운데 오른쪽 3개
이런식으로 잡으시고
index div 왼쪽에 픽셀을 200으로 고정
가운데 div 를 float:left 붙게해서 픽셀 200으로 주고 포지션 고정
오른쪽은 float:right 우측화면에 붙게 해주시고 스타트 하시면되요
+-- [끝] --+
위 글을 대충 짐작으로 판단하여 아래와 같이 코드를 만들었습니다.
+-- [코드시작] --+
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<style type="text/css">
body {margin:0px; overflow:hidden;}
#head_top {width:100%; height:100px; background-color:#dedede}
#menu_left {width:200px; height:100%; position:fixed; background-color:#ab00cc}
#list_center {width:250px; height:100%; position:fixed; left:200px; background-color:#ff6600; overflow-y:auto;}
#content {height:100%; float:right; background-color:#00ff66}
</style>
<div id="head_top">
대메뉴
</div>
<div id="menu_left">
메뉴
</div>
<div id="list_center">
리스트<br>
리스트<br>
리스트<br>
... [반복]
</div>
<div id="content">
내용
</div>
</body>
</html>
+-- [끝] --+
그런데.. 제가 원하는대로 결과물이 나오지를 않아 이것저것 건드려보기도 하였으나 잘안되네요.
menu_left, list_center, content 를 돼지코구뇽님의 설명대로 진행해보면 모든 div 가 겹쳐버립니다.
list_center 부분에 position:fixed; left:200px; 준 이유가 겹치길래 뛰어본거였죠.
list_center 의 스크롤바 또한.. 이게 스크롤바가 이미지에서 처럼 밑으로 뚫고 내려갔습니다.
content 또한 width:100%; 올리면 덮혀 버립니다.
어디를 어떻게 손봐야 제가 원하는 결과물을 얻을 수 있을까요?
css 풋내기가 허우적 거리고 있습니다.
도움의 손길 좀 주세요.
:: 구현하고자하는 사이트 구성 (http://demo.atmail.com/index.php/mail)
댓글 전체
body {margin:0px; overflow:hidden; height:100%; }
#head_top {width:100%; height:10%; background-color:#dedede; }
#menu_left {width:200px; height:90%; position:fixed; left:0; top:10%; background-color:#ab00cc}
#list_center {width:250px; height:90%; position:fixed; left:200px; top:10%; background-color:#ff6600; overflow-y:auto;}
#content {width:100%; height:90%; position:fixed; left:450px; top:10%; background-color:#00ff66}
그냥 %로 해봤습니다. 파이어폭스만 확인했고 ie 계열은 적용안될수도 있습니다.
position:fixed 에 대해 더 찾아보세요~
#head_top {width:100%; height:10%; background-color:#dedede; }
#menu_left {width:200px; height:90%; position:fixed; left:0; top:10%; background-color:#ab00cc}
#list_center {width:250px; height:90%; position:fixed; left:200px; top:10%; background-color:#ff6600; overflow-y:auto;}
#content {width:100%; height:90%; position:fixed; left:450px; top:10%; background-color:#00ff66}
그냥 %로 해봤습니다. 파이어폭스만 확인했고 ie 계열은 적용안될수도 있습니다.
position:fixed 에 대해 더 찾아보세요~
아.. 전체를 고정처리하고 저렇게 % 로 잡으면 되는거군요.
너무 복잡하게만 생각했던게 발목을 붙잡은것 같네요.
이것저것 붙여보면서 더 공부해야겠지만..
덕분에 시원하게 해결되니 기분 좋네요.
감사합니다!
너무 복잡하게만 생각했던게 발목을 붙잡은것 같네요.
이것저것 붙여보면서 더 공부해야겠지만..
덕분에 시원하게 해결되니 기분 좋네요.
감사합니다!
이 방식을 사용하게되면.. 약간의 문제점이 있네요.
우선.. 창의 사이즈가 변경되면.. % 로 잡다보니 틀이 변경되지 말아야하는 부분까지 모두 일괄 줄어들면서 흐트러지네요.
head_top, menu_left, list_center 의 width, height 사이즈는 고정이어야하는데..
이 부분에 대한 방법을 찾아봐야겠네요.
우선.. 창의 사이즈가 변경되면.. % 로 잡다보니 틀이 변경되지 말아야하는 부분까지 모두 일괄 줄어들면서 흐트러지네요.
head_top, menu_left, list_center 의 width, height 사이즈는 고정이어야하는데..
이 부분에 대한 방법을 찾아봐야겠네요.
음 뽁스님이 해결해주엇네요
