Блоки

Есть 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;}

 

А html представить? Если линия то в теле прописать <hr > и подгонять его.

 

Код:

  <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 шт

 

можно по два div-a uslugi оборачивать в <div style="border-bottom: 1px solid #000;"></div>

 

непонял )

 

ну т.е.

PHP:

.row {border-bottom: 1px 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-ами, размерами. у вас все за пределы блоков вылазит.

 

так не выйдет т.к выводиться блоки будут в массиве

 

ну и что? в массиве тоже вполне возможно

PHP:

<?php
foreach ($services as $service) {
    if ($counter == 0) {
        echo "<div class=\"row\">\n";   
    }
    // выводим свой блок услуги
    ....   
    $counter++;
    if ($counter == 2) {
        echo "</div>\n";
        $counter = 0;       
    }
}
?>

 

Чтобы не создавать новую тему, спрошу здесь. Как сделать чтобы какой-либо блок (например верхнее горизонтальное меню) вёл себя как блок фильтра вот здесь

 

http://htmlbook.ru/css/nth-child - автору

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

Код:

<ul>
<li></li>
<li></li>
<li></li>
</ul>
 
Для li
 
li {display:inline-block;}

 

Спрошу здесь же тоже про блоки:
Товары в каталоге оборачиваются в div.
Как сделать чтобы получить вот такую рамку:

 

Одинаковых id у блоков многовато

Насколько понял, вопрос именно про рамку (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>

В резиновой верстке с изменяемым количеством столбцов расстановка стилей производится скриптом.

 

Спасибо за ссылку. буду разбираться.
--- добавлено: 16 янв 2013 в 05:06 ---

Я не могу прописать разные классы для div`ов. У меня скрипт в котором в див с одним классом оборачиваются все товары и получается сетка 3х3.

 

Когда я говорил "многовато", то имел в виду не class, а одинаковые id на схеме примера.

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

 

У Вас строиться на классах, а у меня есть только 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>

 

Тогда, если одним стилем нужно создать 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>

То, что надо?

 

Да, думаю это то что надо. Спасибо!