묻고답하기
스킨 제작중인데 div 관련 질문입니다
2009.04.23 21:37
안녕하세요
스킨을 제작중인데 사이트는 다음과 같습니다
그런데 아무리 해도 로고와 메뉴가 붙지를 않네요 -_-;
일단 layout.html 소스입니다
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>스킨 제작</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" />
<title>Example</title>
<style type="text/css">body {
background-color: #FFFFFF;
}
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<!-- 레이아웃 시작 -->
<div> <div id ="topInnerBox">
<div> <a href="http://aiesecskku.org"><img src="./images/logo.gif" alt="" class="iepngfix" /></a>
</div>
<div> <script type="text/javascript">displayMultimedia("http://aiesecskku.org/menu.swf", "700","107",false);</script>
</div>
</div>
</div>
{$content}
<!-- 레이아웃 끝-->
</div>
<div style="width:1025px; height:54px; position:absolute; left:-3px; top:726px; z-index:1;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><img src="images/blue_w_descriptor.gif" width="1024" height="53" border="0"></td>
<td width="20%"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
</div>
<div></div>
</body>
</html>
layout.css 의 코드입니다
@charset "utf-8";
/* 퍼블리싱을 위하여 임시로 만든 css, 스킨 제작시 삭제 */
body {
margin:0;
padding:0;
}
img {
border:0;
}
form {
margin:0;
padding:0;
}
/* 상단 로고 + 검색폼 + 메뉴 표시 최외곽 */
#topBox {
height:107px;
background:transparent url("../images/back.gif") repeat-x left top;
positon;
}
/* 상단 로고 + 검색폼 + 메뉴가 들어가는 가로 1028 크기의 가운데 정렬 영역 */
#topInnerBox {
width:1028px;
height:107px;
margin:0 auto;
}
/* 로고 박스 */
#logoBox {
width:230px;
height:107px;
text-align:center;
float:left;
overflow:hidden;
}
/* 상단 메뉴 영역 및 관련된 버튼 스타일 */
#menuBox {
width;700;
height;107;
margin:0;
padding:0;
list-style:none;
clear:both;
float:right;
position;absolute;
}
/* 내용 영역, 내용의 좌우 그림자 효과를 위해 가로크기 + 12*2 를 하고 가운데 정렬 */
#contentBox {
width:1052px;
margin:0 auto 30px auto;
overflow:hidden;
}
/* 내용의 왼쪽 그림자 효과 */
#contentLeftBGBox {
width:1052px;
background:transparent url("../images/left_bg.png") repeat-y left top;
behavior:url(./common/js/iePngFix.htc);
overflow:hidden;
}
/* 우측 그림자 효과를 지정 */
#contentRightBGBox {
width:1052px;
background:transparent url("../images/right_bg.png") repeat-y right top;
behavior:url(./common/js/iePngFix.htc);
overflow:hidden;
}
/* 왼쪽 서브 메뉴와 내용을 포함하는 영역 */
#contentInnerBox {
width:1028px;
margin:0 12px 0 12px;
background-color:#FFFFFF;
overflow:hidden;
}
/* 왼쪽 서브 메뉴. 크기를 max인 238px로 지정 */
#leftMenuBox {
width:234px;
float:left;
padding:10px 0 30px 0;
}
#leftMenuBox .leftSideLoginBox {
width:198px;
margin:0 20px 15px 20px;
}
#leftMenuBox .leftSideMenuBox {
width:190px;
height:300px;
margin:0 14px;
padding:31px 10px 0 10px;
background:transparent url("../images/left_side_menu_bg.jpg") no-repeat left top;
}
#leftMenuBox .leftSideMenuBox ul {
padding:0;
margin:0 5px;
list-style:none;
}
#leftMenuBox .leftSideMenuBox ul li {
padding:4px 0 5px 14px;
}
#leftMenuBox .leftSideMenuBox ul li.main {
background-color:#F2F2F2;
border:1px solid #E8E8E8;
}
#leftMenuBox .leftSideMenuBox ul li.main a {
color:#3E3E3E;
}
#leftMenuBox .leftSideMenuBox ul li.sub {
background-color:#FFFFFF;
border-top:1px dotted #EEEEEE;
}
#leftMenuBox .leftSideMenuBox ul li.first {
border-top:none;
}
#leftMenuBox .leftSideMenuBox ul li.sub a {
color:#818181;
}
#leftMenuBox .leftSideMenuBox ul li a {
font-family:arial;
font-size:9pt;
text-decoration:none;
}
/* 내용 출력 */
#mainContentBox {
width:786px;
float:left;
padding:10px 0 30px 0;
}
/* 하단 그림자 효과 지정 */
#contentBottomBGBox {
overflow:hidden;
}
#contentBottomBGBox .leftBottomBG {
float:left;
}
#contentBottomBGBox .contentBottomBG {
width:1028px;
height:12px;
float:left;
background:transparent url("../images/bottom_bg.png") repeat-x left top;
behavior:url(./common/js/iePngFix.htc);
}
#contentBottomBGBox .rightBottomBG {
float:right;
}
#header h2 { position:absolute; top:75px; right:0px;}
ㅠㅠ 도대체 왜 메뉴랑 로고 div 가 따로 노는걸까요 ㅠㅠ 초보한테 도움을 주세요! ㅠㅠ
1. 올려주신 소스와 실제 페이지의 소스에 차이가 있습니다. 실제 소스를 보면 로고와 플래시는 같은 div 안에 속하네요.
2. layout.html의 소스에 topInnerBox 하의 div 태그들을 포함한 대부분의 div 태그들의 아이디가 없습니다.
3. CSS 코드에서 topInnerBox가 상단 로고 + 검색폼 + 메뉴의 영역이라는데, 검색폼은 보이지 않습니다.