웹표준 코딩 질문입니다^^
게시됨: 2009 09 16 18:25 35
아래 코드 중에서 제가 #shadow_left div의 백그라운드를 #page div전체 높이만큼 유동적인 크기로 조절하고 싶습니다. height의 속성을 100%로 해도 안되구요. 이게 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=utf-8" />
<style type="text/css">
<!--
body {
margin-left: 0px;
background-image: url(img/background.gif);
background-repeat: repeat-x;
background-attachment: fixed;
margin-top: 0px;
}
#page {
margin:auto;
width:1000px;
text-align:center;
overflow:visible;
}
#logo {
margin:auto;
width:854px;
height:63px;
background-color:#FFF;
}
#shadow_left {
float:left;
width:73px;
background-image:url(img/back_left.png);
background-position:55px;
background-repeat:repeat-y;
}
#shadow_right {
float:right;
width:73px;
padding-bottom:0px;
background-image:url(img/back_right.png);
background-repeat:repeat-y;
}
-->
</style>
</head>
<body>
<div id="page">
<div id="shadow_left"></div>
<div id="shadow_right"></div>
<div id="logo"></div>
<div id="logo"></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=utf-8" />
<style type="text/css">
<!--
body {
margin-left: 0px;
background-image: url(img/background.gif);
background-repeat: repeat-x;
background-attachment: fixed;
margin-top: 0px;
}
#page {
margin:auto;
width:1000px;
text-align:center;
overflow:visible;
}
#logo {
margin:auto;
width:854px;
height:63px;
background-color:#FFF;
}
#shadow_left {
float:left;
width:73px;
background-image:url(img/back_left.png);
background-position:55px;
background-repeat:repeat-y;
}
#shadow_right {
float:right;
width:73px;
padding-bottom:0px;
background-image:url(img/back_right.png);
background-repeat:repeat-y;
}
-->
</style>
</head>
<body>
<div id="page">
<div id="shadow_left"></div>
<div id="shadow_right"></div>
<div id="logo"></div>
<div id="logo"></div>
</div>
</body>
</html>