CSS 코딩 너무 어려워요..가르쳐 주세요.(레이아웃 잡기) 정보
CSS 코딩 너무 어려워요..가르쳐 주세요.(레이아웃 잡기)
본문
자유게시판에 이런글을 올려도 될런지...안된다면 바로 삭제할께요.
웹접근성과 편리성, 그리고 웹표준에 맞게 div 코딩을 독학으로 배우고 있는데요
레이아웃 잡는것 부터 막히네요. 쩝.
아래 그림처럼 레이아웃을 잡을려고 하는데요
아래는 제가 드림위버로 잡아본 레이아웃 코드인데
submenu div가 main menu 옆으로 붙어버리네요. 아래로 내려와야 하는데...
어떻게 하면 가장 간단하게 레이아웃을 잡을수 있을까요?
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
width:880px;
margin:0 auto;
font-size:0.85em;
}
#logo {
margin: 0px;
padding: 0px;
width: 200px;
float: left;
}
#topmenu {
margin: 0px;
padding: 0px;
}
#topmenu ul {
list-style:none;
margin:0;
padding:0;
}
#topmenu li {
float:left;
}
#outlogin {
margin: 0px;
padding: 0px;
text-align: right;
}
#topsubmenu {
margin: 0px;
padding: 0px;
}
#maintitle { /* 타이틀이미지 영역 */
margin: 0px;
padding: 0px;
margin-bottom: 10px;
clear: both;
}
#index #primaryContent { /* 메인페이지 우측영역 */
margin: 0px;
padding: 0px;
width:409px;
float:right;
margin-bottom: 10px;
}
#index #sideContent { /* 메인페이지 좌측영역 */
margin: 0px;
padding: 0px;
width:409px;
margin-bottom: 10px;
}
#sub #primaryContent { /* 서브페이지 우측(컨텐츠)영역 */
margin: 0px;
padding: 0px;
width:670px;
float:right;
margin-bottom: 10px;
}
#sub #sideContent { /* 서브페이지 좌측(서브메뉴)영역 */
margin: 0px;
padding: 0px;
width:200px;
margin-bottom: 10px;
}
#footer { /* 카피라이터 영역 */
margin: 0px;
padding: 0px;
clear:both;
}
-->
</style>
<link href="printcss.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body id="index">
<div id="outlogin">outlogin</div>
<div id="logo"><img src="003/img/main_02.gif" width="200" height="56" /></div>
<div id="topmenu">
<ul>
<li><a href="/003/sub.php?pageNum=01&subNum=01">조선궁궐소개</a></li>
<li><a href="/003/sub.php?pageNum=01&subNum=01">경복궁</a></li>
<li><a href="/003/sub.php?pageNum=01&subNum=01">창덕궁</a></li>
<li><a href="/003/sub.php?pageNum=01&subNum=01">창경궁</a></li>
<li><a href="/003/sub.php?pageNum=01&subNum=01">덕수궁</a></li>
<li><a href="/003/sub.php?pageNum=01&subNum=01">게시판</a></li>
</ul>
</div>
<div id="topsubmenu">sub</div>
<div id="maintitle"> maintitle </div>
<div id="primaryContent">주내용<br />
</div>
<div id="sideContent">side<br />
</div>
<div id="footer">footer</div>
</body>
</html>
0
댓글 13개
main menu 영역이 커지면(브라우져 보기 텍스트 크기 가장크게) sub menu가
로고 밑에 붙어 버리는....
빠른 관심 감사합니다.
아....
이 습관 고쳐야해.. ㅠㅠ
margin: 0px;
padding: 0px;
height: 20px;
}
빠른 관심 감사합니다.
#topmenu {
margin: 0px;
padding: 0px;
height: 1.2em;
}
#menu float:left 전체로 하나잡이시구요
#menu .mainmenu
#menu .submenu
로 하시면 될뜻하는데요 ^_^ 아님말구요 ㅋㅋㅋ
880-200=680
==================
#topmenu {
margin: 0px;
padding: 0px;
width: 680px;
}
==================
그리고
body에다 정의하지마시고
==============================
body {
margin:0;
text-align:center;
}
#bodyWrap {
margin:0 auto;
width:1004px;
text-align:left;
position:relative;
}
=========================
이런식으로 전체 div하나로 감싸서 짜시는게 좋을듯합니다.
홈페이지가 중앙정렬/왼쪽정렬/오른쪽정렬 필요할때 바꾸셔야 할테니깐요...
정렬을 위한 거라면 body 에서 margin을 0으로 하면 되는데요. 물론 오른쪽 정렬은 안되지만요. 홈피 오른쪽 정렬을 거의 없는거 같아서요. 저는 코딩을 최대한 간소하게 하고자 body 에다 직접 넓이를 줬습니다.
그리고 width 값을 줘서 레이아웃을 짜는 방법도 괜찮은 생각이긴 합니다만
버전이 낮은 익스플로러에서는 880 - 200 = 680 식이 성립되지 않고
아래줄로 떨어진다고 책에서 봤습니다. 이런 문제를 해결할려면 결국 익스플로러를 위한 CSS를 별도로 넣어야 한다고 하구요.(핵을 사용해야 한다고 합니다.)
그러니까 880 - 200 = 679.9 라는 넓이를 익스플로러를 위해서 먼저 주고
880 - 200 = 680 이라는 원래값을 한번더 정의해줘야 한다고 합니다.([CSS 마스터전략],[실용예제로 배우는 웹표준] 이라는 책)
코딩을 간결하게 할려는게 저의 의도입니다. 완변한건 없겠지만요.
제가 너무 복잡하게 생각하는건지.,,,아무튼 답변 고맙습니다.
http://abcd.com/home/v1/....
이런식으로 작업합니다.
script.css그누걸로 사용하지요
v1/안에있는걸로만 만지작거릴려고 하는짓이지요.
그래서 body에 안넣고 bodywrap을 하나더 만들어 고 안에서만 만지작거립니다.
싸이즈문제는
그럼 679.9로 하시면 됩니다.
<ul><li></li></ul>사용하시면 지금처럼 입력내용만큼으로 땡겨와버리니깐.
하단 sub가 옆으로 들러붙겠지요...
