css 레이아웃 잘 아시는 분요? 정보
css 레이아웃 잘 아시는 분요?본문
오류가 나는곳의 주소를 알려주시면 더 빠르고 정확하게 답변 받을 수 있습니다.
오류 주소 :
http://www.playnow.co.kr/link/1e489a1e1efb/0.gif //참고이미지 제가 포토샵으로 제 상황을 그렸습니다. 참 #box 가 #container 입니다.
<p>
위 그림처럼 레이아웃을 짜고 있습니다.
근데 문제가 일단 가운데 정렬이 안 되는 것 같고..
#top에 들어가 있는 배경이미지가 잘 나타나던게
#content에 글자 아무거나 넣으면 사라져 버립니다.
도대체 왜 이러는지 모르겠어요 제가 서툴러서 코딩을 잘 못 하는것 같습니다.
살펴봐 주세요...
고맙습니다.
제가 사용한 코드입니다.
<!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" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<meta http-equiv="imagetoolbar" content="no" />
<title></title>
<style>
#container {
width:900px;
background-color:#000;
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px;
border: 0;
}
#top {
width:auto; height:560px;
background-image: url("./img/topBg.jpg"); /* 배경이미지 사이즈가 width:900px height:560px; 입니다. */
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
#content {
width: 900px;
height: 350px;
clear: both;
color: #EEE;
}
#copyright {
width: 900px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="top"></top>
<div id="content">잠깐 공사중</div>
<div id="copyright"></div>
</div>
</body>
</html>
일일이 하드코딩 하는거라...힘드네요 휴..
오류 주소 :
http://www.playnow.co.kr/link/1e489a1e1efb/0.gif //참고이미지 제가 포토샵으로 제 상황을 그렸습니다. 참 #box 가 #container 입니다.
<p>
위 그림처럼 레이아웃을 짜고 있습니다.
근데 문제가 일단 가운데 정렬이 안 되는 것 같고..
#top에 들어가 있는 배경이미지가 잘 나타나던게
#content에 글자 아무거나 넣으면 사라져 버립니다.
도대체 왜 이러는지 모르겠어요 제가 서툴러서 코딩을 잘 못 하는것 같습니다.
살펴봐 주세요...
고맙습니다.
제가 사용한 코드입니다.
<!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" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<meta http-equiv="imagetoolbar" content="no" />
<title></title>
<style>
#container {
width:900px;
background-color:#000;
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px;
border: 0;
}
#top {
width:auto; height:560px;
background-image: url("./img/topBg.jpg"); /* 배경이미지 사이즈가 width:900px height:560px; 입니다. */
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
#content {
width: 900px;
height: 350px;
clear: both;
color: #EEE;
}
#copyright {
width: 900px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="top"></top>
<div id="content">잠깐 공사중</div>
<div id="copyright"></div>
</div>
</body>
</html>
일일이 하드코딩 하는거라...힘드네요 휴..
댓글 전체
자세히는보지않았지만..
<div id="top"></top> <- 잘못됐죠?
가운데정렬은 #container에 {text-align:center;margin:0 auto;} 추가
<div id="top"></top> <- 잘못됐죠?
가운데정렬은 #container에 {text-align:center;margin:0 auto;} 추가
전체를 감싸주는 div를 하나 만드셔야 될것 같아요..(그래야 가운데정렬이 됩니다..)
예를 들어..
<div style="width:100%;text-align:center">
<div id="contain">
<div id="top"></div>
<div id="content"></div>
<div id="copyright"></div>
</div>
</div>
예를 들어..
<div style="width:100%;text-align:center">
<div id="contain">
<div id="top"></div>
<div id="content"></div>
<div id="copyright"></div>
</div>
</div>
<style>
body{text-align:center;} /* ie에서 가운데 정렬을 위한 스타일 */
#container {width:900px; margin:0px auto; text-align:left;} /*margin:0 auto를 적용하면 가운데 정렬이 됩니다 텍스트 얼라인을 왼쪽으로 하는 이유는 위에 바디스타일에서 가운데 정렬을 했기 때문이구요~~*/
#top {width:900px; height:560px; background-: url("./img/topBg.jpg") center top no-repeat; /* 배경이미지 사이즈가 width:900px height:560px; 입니다. */ }
#content {width: 900px; height: 350px; color: #EEE;}
#copyright {width: 900px; height: 100px;}
</style>
스타일을 위에처럼 해보세요~~ㅋ 제가 하는 방식입니다~;;
body{text-align:center;} /* ie에서 가운데 정렬을 위한 스타일 */
#container {width:900px; margin:0px auto; text-align:left;} /*margin:0 auto를 적용하면 가운데 정렬이 됩니다 텍스트 얼라인을 왼쪽으로 하는 이유는 위에 바디스타일에서 가운데 정렬을 했기 때문이구요~~*/
#top {width:900px; height:560px; background-: url("./img/topBg.jpg") center top no-repeat; /* 배경이미지 사이즈가 width:900px height:560px; 입니다. */ }
#content {width: 900px; height: 350px; color: #EEE;}
#copyright {width: 900px; height: 100px;}
</style>
스타일을 위에처럼 해보세요~~ㅋ 제가 하는 방식입니다~;;