[재등록] 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)
오류 주소 :
아래 질문을 등록하였으나, 댓글로는 이미지를 첨부 할 수 없는 문제로 다시 등록하게 되었습니다.
상단 첨부 이미지를 보시면 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)
첨부파일
댓글 4개
11년 전
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 에 대해 더 찾아보세요~
11년 전
아.. 전체를 고정처리하고 저렇게 % 로 잡으면 되는거군요.
너무 복잡하게만 생각했던게 발목을 붙잡은것 같네요.
이것저것 붙여보면서 더 공부해야겠지만..
덕분에 시원하게 해결되니 기분 좋네요.
감사합니다!
너무 복잡하게만 생각했던게 발목을 붙잡은것 같네요.
이것저것 붙여보면서 더 공부해야겠지만..
덕분에 시원하게 해결되니 기분 좋네요.
감사합니다!
11년 전
이 방식을 사용하게되면.. 약간의 문제점이 있네요.
우선.. 창의 사이즈가 변경되면.. % 로 잡다보니 틀이 변경되지 말아야하는 부분까지 모두 일괄 줄어들면서 흐트러지네요.
head_top, menu_left, list_center 의 width, height 사이즈는 고정이어야하는데..
이 부분에 대한 방법을 찾아봐야겠네요.
우선.. 창의 사이즈가 변경되면.. % 로 잡다보니 틀이 변경되지 말아야하는 부분까지 모두 일괄 줄어들면서 흐트러지네요.
head_top, menu_left, list_center 의 width, height 사이즈는 고정이어야하는데..
이 부분에 대한 방법을 찾아봐야겠네요.
돼지코구뇽
11년 전
음 뽁스님이 해결해주엇네요
게시판 목록
그누4 질문답변
그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.
기존 게시물은 열람만 가능합니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 66354 |
이주석님아
|
11년 전 | 2768 | |
| 66353 | 11년 전 | 2091 | ||
| 66352 | 11년 전 | 2765 | ||
| 66351 |
mybiz
|
11년 전 | 2347 | |
| 66350 |
alexseo
|
11년 전 | 2391 | |
| 66349 | 11년 전 | 3966 | ||
| 66348 | 11년 전 | 2593 | ||
| 66347 | 11년 전 | 2810 | ||
| 66346 |
겸손1935
|
11년 전 | 2247 | |
| 66345 |
금나와라뚝딱
|
11년 전 | 2537 | |
| 66344 | 11년 전 | 2493 | ||
| 66343 |
Mariplay
|
11년 전 | 2378 | |
| 66342 |
포도주스와
|
11년 전 | 2728 | |
| 66341 | 11년 전 | 2954 | ||
| 66340 | 11년 전 | 3382 | ||
| 66339 | 11년 전 | 2400 | ||
| 66338 |
그누초보님
|
11년 전 | 1993 | |
| 66337 |
퇴근후밥상
|
11년 전 | 3172 | |
| 66336 |
그누초보님
|
11년 전 | 2148 | |
| 66335 |
오래된미래
|
11년 전 | 2088 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기