Я пытаюсь создать коробку, которая содержит несколько интерактивных элементов, содержащихся в их собственных DIV.
Конечным результатом должен быть блок, содержащий изображение и фон, а также список интерактивных элементов."заголовки" каскадом вниз.
Вот код для моего сайта: (вот ссылка на пример того, как этот код выглядит: http://www.culebraislandvacationrentals.com/stackoverflow.hmtl)
<body>
<div id="page">
<div id="logo">
<a href="http://www.culebraislandvacationrentals.com/nonsaleable/index.html">
<img src="http://www.culebraislandvacationrentals.com/nonsaleable/images/logo.png" height="70"></a>
</div>
<div id="tab">
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
<!--:tab-->
<div id="header-tabs">
<img src="http://www.culebraislandvacationrentals.com/nonsaleable/images/tab/new_back.png">
<div id="header-tab-anchor-left">
<img src="http://www.culebraislandvacationrentals.com/nonsaleable/images/tab/yamaha.png">
</div>
<!--:header-tab-anchor-left-->
</div>
<!--:header-tabs-->
</div>
</body>
CSS
body {
background-color: #FFF;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
#page {
width: 900px;
text-align: left;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
}
#logo {
width: 300px;
height: 75px;
background-color: #999;
padding: 0;
float: left;
}
#tab {
width: 600px;
height: 75px;
background-color: #999;
padding: 0;
float: left;
}
#tab ul {
padding: 0;
margin: 0 auto;
list-style: none;
line-height: normal;
}
#tab li {
padding-top: 12px;
float: left;
}
#tab a {
display: block;
height: 35px;
margin-right: 1px;
padding: 16px 40px 0px 40px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
border: none;
}
#header-tabs {
width: 225px;
height: 265px;
background-color: #000;
float: left;
z-index: 5;
}
#header-tab-anchor-left {
position: relative;
left: 15px;
top: 15px;
z-index: 6;
}
Проблема в том, что я хочу, чтобы div "header-tab-anchor-left" находился внутри div "header-tab" таким образом, чтобы изображение "Yamaha" в нижней частистраница будет находиться под заголовком «Новый» в коробке.
По какой-то причине все, что я могу сделать, это сидеть под коробкой, а не внутри.