국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
-
Tyburn
- Posts: 33
- Joined: 2006 02 02 20:32 31
-
Contact:
Post
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가 가로로 나열되게 하려면 어떻게 해야 하나요?
-
oragi
- Posts: 37
- Joined: 2005 10 24 18:45 46
- Location: 이세상의 가장 구석진 곳 ...
-
Contact:
Post
by oragi »
div는 블록 엘레멘트입니다.
블록 엘레멘트는 div, p, table, ul, li 와 같이 연속되서 쓰여지는 경우 수직적으로
보여집니다.
블록 엘레멘트를 수평적으로 보이게 만들려면 포지셔닝을 하시거나
float를 주어 일반적인 흐름과는 다른 흐름을 만들어 주셔야 합니다.
결국 모든 것을 해야 하는 것은 나 자신이다...
-
하얀 나비
Post
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 를 추가하시면 될 겁니다.
-
연봉3000주는데없수?
Post
by 연봉3000주는데없수? »
#left {
float: left;
.
.
.
.
.
}
// float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)
#right {
margin-left : 200px; /*좌측이 서브메뉴라고 봤을때 적당히 띄워주는값 ㅋㅋ*/
.
.
.
.
}
을 넣으시면 먹힌다는거죠~~ 후후.. 함해보시길~
-
iLmoL
- Posts: 16
- Joined: 2004 10 21 06:04 07
- Location: USA
-
Contact:
Post
by iLmoL »
float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)
음... 파이어폭스에서 제대로 왜 표현이 안되는지요,,,?
오히려 IE 에서 오른쪽 DIV 와 왼쪽 DIV 에 float 을 준 후 margin 값을 잘못 지정하게 되면 깨지는 경우가 있기는 합니다만,,
오른쪽 왼쪽 값 다 float 을 적용하시면 정렬이 잘 되게 되어있습니다.
한국의 웹표준 꼭 찾아옵니다.
-
hiphapis
- 서포터즈
- Posts: 179
- Joined: 2005 02 25 16:03 12
- Location: Heaven
-
Contact:
Post
by hiphapis »
연봉3000주는데없수? wrote:// float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)
width 값이 넘는것일 수 도 있겠네요..
padding, margin 같은걸로 인해 width 가 넘는건 아닌지요..?
Users browsing this forum: No registered users and 2 guests