안녕하세요~
CSS 초보자입니다....^^
CSS를 이용한 DIV 레이아웃과 관련하여 2가지 문의를 드려봅니다.
아래 소스로 레이아웃을 잡았습니다.
--------------------------------------------------------------------------
<!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>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; width:100%; height:100%;}
#header {
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 10px 0px;}
#left{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 10px 0px 0px;
float:left;}
#content{
width:650px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
float:left;}
#right{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 10px;
float:left;}
#footer{
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:10px 0px 0px 0px;
float:left;}
</style>
<head>
<title>div 태그로 레이아웃 설정</title>
<style type="text/css">
body { text-align:center; width:100%; height:100%;}
#header {
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 10px 0px;}
#left{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 10px 0px 0px;
float:left;}
#content{
width:650px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;
float:left;}
#right{
width:160px; height:200px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:0px 0px 0px 10px;
float:left;}
#footer{
width:990px; height:100px; background-color:Yellow; border:groove 1px silver;
padding:0px 0px 0px 0px; margin:10px 0px 0px 0px;
float:left;}
</style>
</head>
<body leftmargin="3" marginwidth="3" topmargin="3" marginheight="3">
<div id="header">Navigator</div>
<div style="width:990px;">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
-----------------------------------------------------------------
<궁금증 1>
첨부한 그림에서 보시다시파 "Right" 칸이 아래로 밀려납니다.... ㅡ.ㅡ;;
무엇이 잘못되었는지, 어느 부분을 수정하면 되는지 도움 말씀 부탁드립니다.
<궁금증 2>
첨부한 그림에서 보시면 좌측, 우측에 보시면 파란색 박스로 배너를 달려고 합니다.
인터넷 검색해서 비슷한 유형의 소스들을 퍼다가 붙혀 보았는데... 내공부족으로 안됩니다.... ㅠ.ㅠ
위 소스를 어떻게 구현하면 되는지... 함께 도움 말씀 부탁드립니다~
이곳 부산에는 이제 벛꽃망울둘이 제법 커졌습니다.
다음주면 활짝 만개를 할것 같군요.
주말에 봄내음 맏으면서 즐거운 시간 보내시기 바랍니다.
감사합니다~
2012.4.6
부산에서 SIR 사용자 드림
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기