Page 1 of 1
div로 레이아웃을 짤때...
Posted: 2006 04 04 10:34 46
by Tyburn
Code: Select all
<!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>
<title>TEST PAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin: 0;
font-family: tahoma;
}
#top {
width: 980px;
background-color: #cccccc;
margin: 10px auto auto 10px;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
font-weight: bold;
font-size: 12pt;
}
#left {
width: 120px;
background-color: #cccccc;
margin: 10px 0 0 10px;
padding-top: 150px;
padding-bottom: 150px;
font-weight: bold;
font-size: 12pt;
text-align: center;
}
</style>
</head>
<body>
<div id="top">top</div>
<div id="left">left</div>
</body>
</html>
div로 레이아웃을 짜는 연습을 하고 있습니다.
보시다시피 top div와 left div가 존재하는데요, right div도 하나 더 만드려고 합니다.
그런데 div태그 밑에 새로운 div를 추가하면 div가 가로로 나열되지 않고 아래로 내려가 버립니다.
즉,
[ top div ]
[left div] [right div]
이런식으로 되지 않고
[ top div ]
[left div]
[right div]
이렇게 되어버린다는 거지요..
초보인 저로서는 어떻게 해결해야 할지 난감합니다. (table에 익숙해져 있다 보니 div를 익히는 것이 어렵습니다.. ㅠㅠ)
position: absolute 속성을 사용하지 않고 left와 right div가 가로로 나열되게 하려면 어떻게 해야 하나요?
Posted: 2006 04 04 11:22 53
by hyeonseok
내용이 많아서 여기서 다 설명 드리기는 힘들 것 같고요.
실전 웹표준 가이드(
http://mozilla.or.kr/docs/web-developer/standard/ )의 CSS Layout부분을 참조하시가 바랍니다.
가이드를 보시고도 문제가 발생하면 다시 질문 올려 주세요.
Posted: 2006 04 04 13:46 34
by oragi
div는 블록 엘레멘트입니다.
블록 엘레멘트는 div, p, table, ul, li 와 같이 연속되서 쓰여지는 경우 수직적으로
보여집니다.
블록 엘레멘트를 수평적으로 보이게 만들려면 포지셔닝을 하시거나
float를 주어 일반적인 흐름과는 다른 흐름을 만들어 주셔야 합니다.
Posted: 2006 04 06 13:30 04
by 하얀 나비
#left {
width: 120px;
background-color: #cccccc;
margin: 10px 0 0 10px;
padding-top: 150px;
padding-bottom: 150px;
font-weight: bold;
font-size: 12pt;
text-align: center;
float:left;
}
float:left 를 추가하시면 될 겁니다.
맞습니다 맞고요
Posted: 2006 04 10 18:12 54
by 연봉3000주는데없수?
#left {
float: left;
.
.
.
.
.
}
// float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)
#right {
margin-left : 200px; /*좌측이 서브메뉴라고 봤을때 적당히 띄워주는값 ㅋㅋ*/
.
.
.
.
}
을 넣으시면 먹힌다는거죠~~ 후후.. 함해보시길~
Posted: 2006 04 28 02:29 07
by iLmoL
float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)
음... 파이어폭스에서 제대로 왜 표현이 안되는지요,,,?
오히려 IE 에서 오른쪽 DIV 와 왼쪽 DIV 에 float 을 준 후 margin 값을 잘못 지정하게 되면 깨지는 경우가 있기는 합니다만,,
오른쪽 왼쪽 값 다 float 을 적용하시면 정렬이 잘 되게 되어있습니다.
Re: 맞습니다 맞고요
Posted: 2006 04 28 10:50 50
by hiphapis
연봉3000주는데없수? wrote:// float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)
width 값이 넘는것일 수 도 있겠네요..
padding, margin 같은걸로 인해 width 가 넘는건 아닌지요..?