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

Тема в разделе "Верстка", создана пользователем mikas3025, 9 окт 2011.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. mikas3025

    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.gifleft 15px no-repeat;
        
    positionrelative;
        
    height:inherit;
    }
    .
    shp_bodyshd_r {
        
    position:relative;
        
    padding:0px 4px 0 0;
        
    background:url(../../images/shp_side_bg.gifright 15px no-repeat;
    }
    .
    shp_topbg, .shp_tl, .shp_tr  {
        
    position:absolute;
        
    top:0px;
    }
    .
    shp_tl {
        
    background:url(../../images/tpl7-main.pngleft top no-repeat;
        
    left:0px;
        
    height:190px;
        
    width:350px;
        
    right4px;
        
    positionabsolute;
    }
    .
    shp_tr {
        
    background:url(../../images/tpl7-left-bg.gifright top no-repeat;
        
    height:190px;
        
    width:7px;
        
    right4px;
        
    positionabsolute;
    }
    #ct_logo_all {
        
    positionrelative;
        
    width98%;
    }
    #ct_logo_too {
        
    positionrelative;
        
    height185px;
        
    widht75%;
        
    margin-left25%;
    }
    #ct_logo_center {
        
    positionabsolute;
        
    floatleft;
        
    margin30px 0 0 5%;
        
    height150px;
        
    width50%;
    }
    #ct_logo_right {
        
    positionabsolute;
        
    margin20px 0 0 65%;
        
    height200px;
    }
    #container_footer {
        
    padding:3px;
        
    position:relative;
        
    background:#fff url(../../images/shp_bottom_bg.gif) left bottom repeat-x;
        
    padding:5px 0;
    }
    #ct_body_all {
        
    positionrelative;
        
    width100%;
        
    height100%
        
    bordersolid 1px #000;
        
    heightinherit;
    }
    #ct_body_left {
        
    positionabsolute;
        
    width20%;
        
    height100%;
        
    margin: -10px 0 0 0;
    }
    #ct_body_right {
        
    positionrelative;
        
    widht100%;
        
    margin-left20%;
    }
    #ct_body_top {
        
    background:url(../../images/tpl7-centr-1.gif);
        
    positionrelative;
        
    height:100px;
        
    margin:0 0 0 10px;
    }
    #ct_body_down {
        
    positionrelative;
        
    margin:0 0 0 10px;
    }
    #ct_body_top_left {
        
    positionabsolute;
        
    floatleft;
        
    margin25px 0 0 0;
    }
    #ct_body_top_right {
        
    positionrelative;
        
    width300px;
        
    margin-left70%;
    }
    #ct_body_top_left_left {
        
    positionabsolute;
        
    floatleft;
        
    widthauto;
        
    margin0 0 0 10px;
    }
    #ct_body_top_left_right {
        
    positionrelative;
        
    widthauto;
        
    margin0 0 0 300px;
    }
    .
    shp_footerbg_r, .shp_footerbg_l position:absolutebottom:0pxwidth:12pxheight:24px;}
    .
    shp_footerbg_r background:url(../../images/shp_bottom_corn.gifright bottom no-repeatright:-4px;}
    .
    shp_footerbg_l background:url(../../images/shp_bottom_corn.gifleft bottom no-repeatleft:-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>
    Но получается как то не так. Слой с каталогом товаров по высоте выползает за границы слоя на котором написано "ничего не найдено".
    см. картинку:
    [​IMG]
    Много чего читал, дня 3 проимелся но, возможно, мозг уже не тот - не могу понять как сделать, чтобы слой (или чего еще), на котором написано "ничего не найдено" был одинакового размера со слоем каталога товаров, ну и, соответственно если он больше, чем слой с каталогом товаров, то он был больше (это как раз и получается).

    Подскажите, как победить эту коду?
     
  2. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    780
    Симпатии:
    238
  3. lisenque

    lisenque Писатель

    Регистр.:
    6 окт 2011
    Сообщения:
    5
    Симпатии:
    0
    я тоже не спец, но однажды подобную проблему победил присвоив внутреннему контейнеру свойство overflow:auto;
     
  4. awx

    awx Создатель

    Регистр.:
    7 апр 2009
    Сообщения:
    43
    Симпатии:
    4
    Автор, проблема с несоответствием значений position:relative/absolute; у родительского и подчиненного div-а
    (у div на котором каталог скорее всего установлен absolute, вот его надо заменить на relative и наоборот)
     
  5. mikas3025

    mikas3025 Постоялец

    Регистр.:
    23 дек 2007
    Сообщения:
    107
    Симпатии:
    7
    Да вроде все нормально:
    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
     
  6. chessman

    chessman Создатель

    Регистр.:
    5 окт 2011
    Сообщения:
    12
    Симпатии:
    1
    Нужно отбивать контейнеры

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