Не могу победить слои

mikas3025

Постоялец
Регистрация
23 Дек 2007
Сообщения
107
Реакции
7
не спец по программированию, делаю новый дизайн (точнее типа рестайлинг существующего) на основе Webassist Shop-script.
сделал такой код:
PHP:
  <style type="text/css">
.all_wrapper {
	text-align:left;
	width:98%;
	margin:0 auto;
	padding:0 0 0 4px;
	background:url(../../images/shp_side_bg.gif) left 15px no-repeat;
	position: relative;
	height:inherit;
}
.shp_bodyshd_r {
	position:relative;
	padding:0px 4px 0 0;
	background:url(../../images/shp_side_bg.gif) right 15px no-repeat;
}
.shp_topbg, .shp_tl, .shp_tr  {
	position:absolute;
	top:0px;
}
.shp_tl {
	background:url(../../images/tpl7-main.png) left top no-repeat;
	left:0px;
	height:190px;
	width:350px;
	right: 4px;
	position: absolute;
}
.shp_tr {
	background:url(../../images/tpl7-left-bg.gif) right top no-repeat;
	height:190px;
	width:7px;
	right: 4px;
	position: absolute;
}
#ct_logo_all {
	position: relative;
	width: 98%;
}
#ct_logo_too {
	position: relative;
	height: 185px;
	widht: 75%;
	margin-left: 25%;
}
#ct_logo_center {
	position: absolute;
	float: left;
	margin: 30px 0 0 5%;
	height: 150px;
	width: 50%;
}
#ct_logo_right {
	position: absolute;
	margin: 20px 0 0 65%;
	height: 200px;
}
#container_footer {
	padding:3px;
	position:relative;
	background:#fff url(../../images/shp_bottom_bg.gif) left bottom repeat-x;
	padding:5px 0;
}
#ct_body_all {
	position: relative;
	width: 100%;
	height: 100%
	border: solid 1px #000;
	height: inherit;
}
#ct_body_left {
	position: absolute;
	width: 20%;
	height: 100%;
	margin: -10px 0 0 0;
}
#ct_body_right {
	position: relative;
	widht: 100%;
	margin-left: 20%;
}
#ct_body_top {
	background:url(../../images/tpl7-centr-1.gif);
	position: relative;
	height:100px;
	margin:0 0 0 10px;
}
#ct_body_down {
	position: relative;
	margin:0 0 0 10px;
}
#ct_body_top_left {
	position: absolute;
	float: left;
	margin: 25px 0 0 0;
}
#ct_body_top_right {
	position: relative;
	width: 300px;
	margin-left: 70%;
}
#ct_body_top_left_left {
	position: absolute;
	float: left;
	width: auto;
	margin: 0 0 0 10px;
}
#ct_body_top_left_right {
	position: relative;
	width: auto;
	margin: 0 0 0 300px;
}
.shp_footerbg_r, .shp_footerbg_l { position:absolute; bottom:0px; width:12px; height:24px;}
.shp_footerbg_r { background:url(../../images/shp_bottom_corn.gif) right bottom no-repeat; right:-4px;}
.shp_footerbg_l { background:url(../../images/shp_bottom_corn.gif) left bottom no-repeat; left:-4px;}
  </style>
<div class="all_wrapper">
  <div class="shp_bodyshd_r">
  <div class="shp_topbg"></div>
  <div class="shp_tl"></div>
  <div class="shp_tr"></div>
<div align="center" id="ct_logo_all">
   <div id="ct_logo_left"><!-- cpt_container_start -->{cpt_logo file='logo.gif' overridestyle=':ww24j7'}<!-- cpt_container_end -->
   </div>
  <div id="ct_logo_too">
   <div id="ct_logo_center"><!-- cpt_container_start -->{cpt_custom_html code='1r2v03ad' overridestyle='1:05i5uf'}<!-- cpt_container_end -->
   </div>
   <div id="ct_logo_right"><!-- cpt_container_start -->{cpt_custom_html code='1r2v03ad' overridestyle='1:05i5uf'}<!-- cpt_container_end -->
   </div>
</div>
</div>
  <div id="container_footer">
<div id="ct_body_all">
    <div id="ct_body_left">
    <!-- cpt_container_start -->{cpt_custom_html code='0a5i24lc' overridestyle='1:wtr798'}{cpt_category_tree overridestyle='1:wpe3jv'}<!-- cpt_container_end --> 
    </div>
    <div id="ct_body_right">
       <div id="ct_body_top">
           <div id="ct_body_top_left">
              <div id="ct_body_top_left_left"><!-- cpt_container_start -->{cpt_auxpages_navigation select_pages='selected' auxpages='4:7:22' view='vertical' overridestyle='1:1'}<!-- cpt_container_end -->
              </div>
              <div id="ct_body_top_left_right"><!-- cpt_container_start -->{cpt_auxpages_navigation select_pages='selected' auxpages='12:18:21' view='vertical' overridestyle='1:1'}<!-- cpt_container_end -->
              </div>
           </div>
           <div id="ct_body_top_right">
             <p>&nbsp;</p>
             <p>&nbsp;</p>
           <p></p>
           <p><!-- cpt_container_start -->{cpt_product_search overridestyle='1:z1u93x'}<!-- cpt_container_end --></p>
           </div>
       </div>
       <div id="ct_body_down"><!-- cpt_container_start -->{cpt_auxpages_navigation select_pages='selected' auxpages='4' view='horizontal' overridestyle=':5vfwbu'}{cpt_maincontent overridestyle=':k31kau'}<!-- cpt_container_end -->
       </div>
    </div>
</div>
    <div class="shp_footerbg_r"></div>
    <div class="shp_footerbg_l"></div>
  </div>
</div>
</div>
<div class="shp_copyright"><i>&copy; <a href="{$smarty.const.CONF_FULL_SHOP_URL}"><u>{$smarty.const.CONF_SHOP_NAME}</u></a>.
  </i><br />
</div>
<strong>
<script type="text/javascript">
roundElems();
</script>
</strong>
Но получается как то не так. Слой с каталогом товаров по высоте выползает за границы слоя на котором написано "ничего не найдено".
см. картинку:
Layers.jpg

Много чего читал, дня 3 проимелся но, возможно, мозг уже не тот - не могу понять как сделать, чтобы слой (или чего еще), на котором написано "ничего не найдено" был одинакового размера со слоем каталога товаров, ну и, соответственно если он больше, чем слой с каталогом товаров, то он был больше (это как раз и получается).

Подскажите, как победить эту коду?
 
я тоже не спец, но однажды подобную проблему победил присвоив внутреннему контейнеру свойство overflow:auto;
 
Автор, проблема с несоответствием значений position:relative/absolute; у родительского и подчиненного div-а
(у div на котором каталог скорее всего установлен absolute, вот его надо заменить на relative и наоборот)
 
Да вроде все нормально:
PHP:
<div id="ct_body_all">
    <div id="ct_body_left">
    <!-- cpt_container_start -->{cpt_custom_html code='0a5i24lc' overridestyle='1:wtr798'}{cpt_category_tree overridestyle='1:wpe3jv'}<!-- cpt_container_end --> 
    </div>
    <div id="ct_body_right">
       <div id="ct_body_top">
           <div id="ct_body_top_left">
              <div id="ct_body_top_left_left"><!-- cpt_container_start -->{cpt_divisions_navigation divisions='29' view='horizontal' overridestyle='1:w5gjwe'}{cpt_divisions_navigation divisions='35' view='horizontal' overridestyle='1:cujg1r'}{cpt_divisions_navigation divisions='32' view='horizontal' overridestyle='1:5hckss'}<!-- cpt_container_end -->
              </div>
              <div id="ct_body_top_left_right"><!-- cpt_container_start --><!-- cpt_container_end -->
              </div>
           </div>
           <div id="ct_body_top_right">
             <p>&nbsp;</p>
             <p>&nbsp;</p>
           <p></p>
           <p><!-- cpt_container_start -->{cpt_product_search overridestyle='1:z1u93x'}<!-- cpt_container_end --></p>
           </div>
       </div>
       <div id="ct_body_down"><!-- cpt_container_start -->{cpt_auxpages_navigation select_pages='selected' auxpages='' view='vertical' overridestyle='1:1'}{cpt_auxpages_navigation select_pages='selected' auxpages='4' view='horizontal' overridestyle=':5vfwbu'}{cpt_maincontent overridestyle=':k31kau'}<!-- cpt_container_end -->
       </div>
    </div>
</div>

<div id="ct_body_all"> - родительский (как мне кажется) элемент, у него position:relative, а <div id="ct_body_left"> - в котором каталог - у него position:absolute
 
Нужно отбивать контейнеры

Нужно каждый контейнер отбивать пустым
HTML:
<div style="clear:both;">
и тогда на шапку ничто не будет наезжать, ни шапка ни на что не съедет.
 
Назад
Сверху