Здравствуйте, коллеги!
Не могу понять как сделать !
Задача такая: Установить content_area_border_l (на схеме красного цвета) так, что бы по высоте он был как content_area, а по ширине 10px (и находился слева).
Структура резиновая: то-есть при увеличении высоты content_area, content_area_border_l тоже вытягивается.
Схематически все выглядит так:
Вот что я сделал:
HTML
<div id="content_area">
<div id="content_area_border_l">
</div>
<div id="content_area_title">
<div id="content_area_fx1">
</div><!--content_area_fx1-->
<div id="content_area_title_txt">
</div><!--content_area_title_txt-->
<div id="content_area_fx2">
</div><!--content_area_fx2-->
<div id="content_area_fx3">
</div><!--content_area_fx3-->
</div><!--content_area_title-->
<div id="content_area_txt">
</div><!--content_area_txt-->
<div id="content_area_footer">
<div id="content_area_fx4">
</div>
<div id="content_area_fx5">
</div>
<div id="content_area_fx6">
</div>
</div><!--content_area_footer-->
</div><!--content_area-->
CSS:
#content_area{
width:auto;
height:auto;
margin: -80px auto 0 auto;
background: url(../images/bg_dark.png);
}
#content_area_border_l{
width:10px;
height:auto;
margin: 0px auto 0 auto;
background: url(../images/content_area_border_l.png);
float:left;
}
#content_area_title{
width:auto;
height:auto;
margin: 0px auto 0 auto;
}
#content_area_fx1{
width:14px;
height:47px;
margin: 0px auto 0 auto;
background:url(../images/content_area_fx1.png);
float:left;
}
#content_area_title_txt{
height:47px;
margin: 0px auto 0 auto;
background:url(../images/content_area_title_txt.png);
float:left;
}
#content_area_fx2{
width:42px;
height:47px;
margin: 0px auto 0 auto;
background:url(../images/content_area_fx2.png);
float:left;
}
#content_area_fx3{
width:225px;
height:56px;
margin: 0px auto 0 auto;
background:url(../images/content_area_fx3.png);
float:right;
}
#content_area_txt{
width:auto;
height:auto;
margin: 0px auto 0 auto;
padding-bottom:20px;
background: url(../images/bg_dark.png);
}
#content_area_footer{
height:38px;
margin: 0px auto 0 auto;
}
#content_area_fx4{
width:468px;
height:38px;
margin: 0px auto 0 auto;
background:url(../images/content_area_fx4.png);
float:left;
}
#content_area_fx5{
width:auto;
height:38px;
margin: 0px auto 0 auto;
background:url(../images/content_area_fx5.png);
}
#content_area_fx6{
width:128px;
height:38px;
margin: -38px auto 0 auto;
background:url(../images/content_area_fx6.png);
float:right;
}
ЗАРАНЕЕ БЛАГОДАРЕН
19.11.2021, 14:06:15