Блоки

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем ruslan216455, 22 дек 2012.

Статус темы:
Закрыта.
  1. ruslan216455

    ruslan216455

    Регистрация:
    6 ноя 2012
    Сообщения:
    220
    Симпатии:
    22
    Есть 6 блоков выводиться столбиком по 2 шт как сделать что бы после каждого 2 блока выводился border
    Код:
    #uslugi {display: inline-block; float:left; width:445px; height:176px; margin: 29px 0px 20px 29px;  }
    #uslugi ul {}
    #uslugi li {list-style: none;}
     
    #uslugi li img { border: 1px solid #4f8ccf; padding:9px; background: url(../image/img_ten.png) 0px 100% no-repeat; position:relative;  }
    #uslugi li a {margin-left: 336px; background-image: url(../image/more.png); width: 94px; height: 23px; position:absolute;  }
    #uslugi li h2 {width:210px; height:70px; text-align:center; margin-left: 259px; font-family:"bold"; font-size:20px; color: rgb(79,137,200);  text-transform: uppercase;
    margin-top: -197px;  }
    #uslugi li p { text-align:justify; width:178px; height:68px; margin-left: 274px; overflow:hidden; font-family:"tt"; color:black;}
    [​IMG]
     
  2. Lion18

    Lion18

    Регистрация:
    3 дек 2012
    Сообщения:
    253
    Симпатии:
    30
    А html представить? Если линия то в теле прописать <hr > и подгонять его.
     
  3. ruslan216455

    ruslan216455

    Регистрация:
    6 ноя 2012
    Сообщения:
    220
    Симпатии:
    22
    Код:
      <div id="uslugi">
    	  <ul>
    	  <li><img src="image/test1.jpg" width="237" height="175"/></li>
    	  <li><h2>Оформление шарами</h2></li>
    	  <li><p>Цифры из латексных шаров, буквы, символы, знаки и так
    далее и тому прочее. Информация о цвете, размере.</p></li>
    	  <li><a href="#"></a></li>
     
    	  </ul>
    	  </div>
    и таких 6 шт
     
  4. belwh1sper

    belwh1sper

    Регистрация:
    16 дек 2012
    Сообщения:
    19
    Симпатии:
    15
    можно по два div-a uslugi оборачивать в <div style="border-bottom: 1px solid #000;"></div>
     
  5. ruslan216455

    ruslan216455

    Регистрация:
    6 ноя 2012
    Сообщения:
    220
    Симпатии:
    22
    непонял )
     
  6. belwh1sper

    belwh1sper

    Регистрация:
    16 дек 2012
    Сообщения:
    19
    Симпатии:
    15
    ну т.е.
    PHP:
    .row {border-bottom1px solid #000;}
    PHP:
    <div class="row">
        <
    div id="uslugi">...</div>
        <
    div id="uslugi">...</div>
    </
    div>
    <
    div class="row">
        <
    div id="uslugi">...</div>
        <
    div id="uslugi">...</div>
    </
    div>
    <
    div class="row">
        <
    div id="uslugi">...</div>
        <
    div id="uslugi">...</div>
    </
    div>
    и разберитесь с padding и margin-ами, размерами. у вас все за пределы блоков вылазит.
     
  7. ruslan216455

    ruslan216455

    Регистрация:
    6 ноя 2012
    Сообщения:
    220
    Симпатии:
    22
    так не выйдет т.к выводиться блоки будут в массиве
     
  8. belwh1sper

    belwh1sper

    Регистрация:
    16 дек 2012
    Сообщения:
    19
    Симпатии:
    15
    ну и что? в массиве тоже вполне возможно
    PHP:
    <?php
    foreach ($services as $service) {
        if (
    $counter == 0) {
            echo 
    "<div class=\"row\">\n";   
        }
        
    // выводим свой блок услуги
        
    ....   
        
    $counter++;
        if (
    $counter == 2) {
            echo 
    "</div>\n";
            
    $counter 0;       
        }
    }
    ?>
     
    ruslan216455 нравится это.
  9. alex5151

    alex5151

    Регистрация:
    15 ноя 2012
    Сообщения:
    165
    Симпатии:
    26
    Чтобы не создавать новую тему, спрошу здесь. Как сделать чтобы какой-либо блок (например верхнее горизонтальное меню) вёл себя как блок фильтра вот здесь
     
  10. ifish

    ifish

    Регистрация:
    10 янв 2013
    Сообщения:
    22
    Симпатии:
    2
    http://htmlbook.ru/css/nth-child - автору

    alex5151, там реализация таблицей, но лучше используйте списки

    Код:
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
     
    Для li
     
    li {display:inline-block;}
     
  11. pikitos

    pikitos

    Регистрация:
    14 янв 2013
    Сообщения:
    15
    Симпатии:
    1
    Спрошу здесь же тоже про блоки:
    Товары в каталоге оборачиваются в div.
    Как сделать чтобы получить вот такую рамку:
    [​IMG]
     
  12. Lion18

    Lion18

    Регистрация:
    3 дек 2012
    Сообщения:
    253
    Симпатии:
    30
     
  13. IvanCo

    IvanCo

    Регистрация:
    23 дек 2012
    Сообщения:
    56
    Симпатии:
    5
    Одинаковых id у блоков многовато:smile:

    Насколько понял, вопрос именно про рамку (border)? Для блочной верстки я решал задачу так:
    CSS
    Код:
    div {
      overflow: hidden;
    }
    .grid {
      float: left;
      border: 1px solid #000;
      width: 80px;
      height: 80px;
      background: #eee;
      margin: 0;
      border-left: transparent;
      border-top: transparent;
    }
    .grid.top-right {
    border-top: transparent;
    border-right: transparent;
    }
    .grid.right {
      border-right: transparent;
    }
    .grid.bottom-left,
    .grid.bottom {
      border-bottom: transparent;
    }
    .grid.bottom-right {
      border-bottom: transparent;
      border-right: transparent;
    }
    Решение минималистично, кроссбраузерно, легко масштабируется для сетки NxN блоков.

    Например, для 4x4 разметка выглядит так (живьем поиграться можно здесь):

    HTML
    Код:
     
    <div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid top-right"></div>
    </div>
    <div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid right"></div>
    </div>
    <div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid right"></div>
    </div>
    <div>
      <div class="grid bottom-left"></div>
      <div class="grid bottom"></div>
      <div class="grid bottom"></div>
      <div class="grid bottom-right"></div>
    </div>
    В резиновой верстке с изменяемым количеством столбцов расстановка стилей производится скриптом.
     
  14. pikitos

    pikitos

    Регистрация:
    14 янв 2013
    Сообщения:
    15
    Симпатии:
    1
    Спасибо за ссылку. буду разбираться.
    --- добавлено: 16 янв 2013 в 05:06 ---
    Я не могу прописать разные классы для div`ов. У меня скрипт в котором в див с одним классом оборачиваются все товары и получается сетка 3х3.
     
  15. IvanCo

    IvanCo

    Регистрация:
    23 дек 2012
    Сообщения:
    56
    Симпатии:
    5
    Когда я говорил "многовато", то имел в виду не class, а одинаковые id на схеме примера.

    В моем решении все div имеют один и тот же стиль grid, предназначенный как раз для единого оформления всех блоков. А скрипт можно и нужно допиливать под свои задачи.
     
  16. pikitos

    pikitos

    Регистрация:
    14 янв 2013
    Сообщения:
    15
    Симпатии:
    1
    У Вас строиться на классах, а у меня есть только 1 div и все.
    <div class="grid top-right"></div>
    <div class="grid right"></div>
    <div class="grid right"></div>
    <div class="grid bottom-left"></div>
    <div class="grid bottom-right"></div>
     
  17. IvanCo

    IvanCo

    Регистрация:
    23 дек 2012
    Сообщения:
    56
    Симпатии:
    5
    Тогда, если одним стилем нужно создать 9 разных конфигураций рамок, то задача решается так (ссылка на живой код):

    CSS
    Код:
    div {
      width: 246px;
      overflow: hidden;
    }
    .grid {
      float: left;
      border: 1px solid black;
      width: 80px;
      height: 80px;
      background: #eee;
      margin: 0;
      border-left: transparent;
      border-top: transparent;
    }
     
    .grid + .grid + .grid,
    .grid + .grid + .grid + .grid + .grid + .grid {
      border-right: transparent;
    }
     
    .grid + .grid + .grid + .grid {
      border-right: 1px solid black;
    }
     
    .grid + .grid + .grid + .grid + .grid + .grid + .grid {
      border-right: 1px solid black;
      border-bottom: transparent;
    }
     
    .grid + .grid + .grid + .grid + .grid + .grid + .grid + .grid + .grid {
      border-right: transparent;
    }
    HTML
    Код:
    <div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
      <div class="grid"></div>
    </div>
    
    То, что надо?:smile:
     
    belwh1sper и pikitos нравится это.
  18. pikitos

    pikitos

    Регистрация:
    14 янв 2013
    Сообщения:
    15
    Симпатии:
    1
    Да, думаю это то что надо. Спасибо!
     
Статус темы:
Закрыта.