div 레이아웃관련 정보
div 레이아웃관련
본문
이렇게 잡아봣는데.
구조는 간단한거 같은데 본문을 나눠서 좌측메뉴를 달려는데 첨이라 못하겠네요,.아시는 분 부탁드립니다~.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
body, div { margin:0; padding:0}
#header_bg { height:100px;}
#navi_bg { height:70px; background:#ffffcc}
#container_bg { height:600px; background:#ffffff}
#footer_bg { height:100px; background:#99ff99}
#header, #navi, #container, #footer { width:800px;margin:0 auto; border:2px solid #333333; height:100%}
#header {}
#header:after { content:""; clear:both; display:block; }
#header h1 { width:100px; float:left}
#header #topmenu{ float:right}
#header li { display:inline; margin-right:20px;}
#navi { text-align:center;}
#navi li { display:inline; margin-right:50px;}
#container {}
#contents1 {height:200px; border:1px solid #ff3333}
#contents2 {height:200px; border:1px solid #ff3333}
#contents3 {height:200px; border:1px solid #ff3333}
</style>
</head>
<body>
<div id="header_bg">
<div id="header">
<h1>로고</h1>
<div id="topmenu">
<ul>
<li>로그인</li>
<li>회원가입</li>
<li>사이트맵</li>
<li>고객센터</li>
</ul>
</div>
</div>
</div>
<div id="navi_bg">
<div id="navi">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</div>
</div>
<div id="container_bg">
<div id="container">
<div id="contents1">
</div>
<div id="contents2">
</div>
<div id="contents3">
</div>
</div>
</div>
<div id="footer_bg">
<div id="footer">
<address>
주소..........
</address>
</div>
</div>
</body>
</html>
구조는 간단한거 같은데 본문을 나눠서 좌측메뉴를 달려는데 첨이라 못하겠네요,.아시는 분 부탁드립니다~.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
body, div { margin:0; padding:0}
#header_bg { height:100px;}
#navi_bg { height:70px; background:#ffffcc}
#container_bg { height:600px; background:#ffffff}
#footer_bg { height:100px; background:#99ff99}
#header, #navi, #container, #footer { width:800px;margin:0 auto; border:2px solid #333333; height:100%}
#header {}
#header:after { content:""; clear:both; display:block; }
#header h1 { width:100px; float:left}
#header #topmenu{ float:right}
#header li { display:inline; margin-right:20px;}
#navi { text-align:center;}
#navi li { display:inline; margin-right:50px;}
#container {}
#contents1 {height:200px; border:1px solid #ff3333}
#contents2 {height:200px; border:1px solid #ff3333}
#contents3 {height:200px; border:1px solid #ff3333}
</style>
</head>
<body>
<div id="header_bg">
<div id="header">
<h1>로고</h1>
<div id="topmenu">
<ul>
<li>로그인</li>
<li>회원가입</li>
<li>사이트맵</li>
<li>고객센터</li>
</ul>
</div>
</div>
</div>
<div id="navi_bg">
<div id="navi">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</div>
</div>
<div id="container_bg">
<div id="container">
<div id="contents1">
</div>
<div id="contents2">
</div>
<div id="contents3">
</div>
</div>
</div>
<div id="footer_bg">
<div id="footer">
<address>
주소..........
</address>
</div>
</div>
</body>
</html>
댓글 전체