Помогите немного с версткой

[LoLonas1k]

Помогите немного с версткой

Кому не впадлу дайте совет по верстке пожалуйста.
Строю из 9 дивов (каждый 100х100px) квадрат 3х3. Выравнивание по левому краю.
Как после 3 блока сделать перенос вниз не используя смещения типа left, top и тд. ?

 

[Honorocker]

Ну так поместите все ваши дивы в один большой див фиксированного размера , выровняйте его как вам надо . Помещайте туда дивы и когда вся ширина будет занята блок автоматом перескочит вниз . Верстал последний раз с год назад , но по идеи за этот год ничего глобального не произошло =)

 

[LoLonas1k]

Ну как вариант, но впоследствии все это будет генерироваться циклом ПХП. И получается создание большого дива придется выносить из тела цикла-не очень красиво как по мне. Может еще варианты?

 

[Honorocker]

Я так понимаю вариант с шаблонизаторами вы не рассматривали ? Если использовать тот же Symphony , то не нужно будет придумывать html-велосипед , и всё будет красиво . Ну а если всё же нет , то как вариант выставить размер body фиксированный , но не уверен по правде говоря ...

 

[Kompot]

<div>
<div style="float:left; height:100px; width: 100px">1</div>
<div style="float:left; height:100px; width: 100px">2</div>
<div style="float:left; height:100px; width: 100px">3</div>
<div style="clear:both; width:100%; height: 0px;"></div>
<div style="float:left; height:100px; width: 100px">4</div>
<div style="float:left; height:100px; width: 100px">5</div>
<div style="float:left; height:100px; width: 100px">6</div>
<div style="clear:both; width:100%; height: 0px;"></div>
<div style="float:left; height:100px; width: 100px">7</div>
<div style="float:left; height:100px; width: 100px">8</div>
<div style="float:left; height:100px; width: 100px">9</div>
<div style="clear:both; width:100%; height: 0px;"></div>
</div>

 

[Серый Fолк]

Ну как вариант, но впоследствии все это будет генерироваться циклом ПХП. И получается создание большого дива придется выносить из тела цикла-не очень красиво как по мне. Может еще варианты?

И что тут некрасивого?

<div>
<?php
foreach($a as $b):
echo '<div></div>';
endforeach;
?>
</div>

 

[Honorocker]

И что тут некрасивого?

Мисье смущает html-код вне скрипта

 

[AS0kol]

Еще так можно:

<style type="text/css">
  div {
    background-color: #a1a1a1;
    border: 1px solid black;
    [U]display: inline-block;[/U]
    height: 100px;
    margin: 5px;
    width: 100px;
  }
</style>
<div>1</div>
<div>2</div>
<div>3</div>
<br>
<div>4</div>
<div>5</div>
<div>6</div>
<br>
<div>7</div>
<div>8</div>
<div>9</div>

 

[lala-fa]

и как этот вопрос относится к программированию? Есть же ветка вебмастер

 

[Серый Fолк]

и как этот вопрос относится к программированию? Есть же ветка вебмастер

Многие считают HTML языком программирования

 

[Del]

Как после 3 блока сделать перенос вниз не используя смещения типа left, top и тд. ?

Вот так:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

<style type="text/css">
  div {
    float: left;
    width: 100px; height: 100px;
    margin: 5px;
    border: 1px solid black;
  }
  div:nth-child(3n) {
    clear: right;
  }
</style>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

и как этот вопрос относится к программированию? Есть же ветка вебмастер

"Вебмастер" seo-шники и "зацените-мой-сайт" окупировали.

Многие считают HTML языком программирования

Это и есть программирование. Декларативное программирование. Ну а javascript - программирование вполне в привычном всем виде.

 

[Honorocker]

А газетчики , которые занимаются версткой бумажных изданий , тоже программисты ?

 

[Серый Fолк]

А газетчики , которые занимаются версткой бумажных изданий , тоже программисты ?

ДЕКЛАРАТИВНЫЕ программисты

Это и есть программирование. Декларативное программирование. Ну а javascript - программирование вполне в привычном всем виде.

Конечно. И человек, который форматирует строку в ворде - программист.

 

[Del]

Т.е. архитекторы БД, SQL-разработчики по вашему тоже не программисты?

И что тут некрасивого?

<div>
<?php
foreach($a as $b):
echo '<div></div>';
endforeach;
?>
</div>

то что решение не универсально, требуется писать код под конкретный случай.
Это как писать:

if (a == 1) {
...
} else if (a == 2) {
...
} else if (a == 3) {
...
}

когда проверки не нужны вообще.

 

[Серый Fолк]

Т.е. архитекторы БД, SQL-разработчики по вашему тоже не программисты?

Нет, вы правы. Наверное, их называют архитекторами бд и sql-разработчиками ошибочно, на самом деле они программисты. Почитайте о программировании. В вашем понимании, судя по всему, программистом является всякий, умеющий делать нечто, неподвластное начинающему юзеру.
P.S. Видимо, из-за таких юзверы считают, что сисадмин обязан починить чайник/телефон etc

 

[Del]

Телефон как раз - зона ответственности сисадмина, как и вся слаботочка, жаль у нас многие "сисадмины" даже не знают какая пара должна использоваться для телефонии по стандарту.

Я так и не понял из вашего ответа, считаете ли вы SQL-разработчиков - программерами или нет. А если нет, то в чем же кардинальное отличие написания SQL-запросов от CSS (особенно учитывая что в CSS тоже есть вычисления и мат. функции).

Я читал вот это: https://en.wikipedia.org/wiki/Declarative_programming

 

[Серый Fолк]

то что решение не универсально, требуется писать код под конкретный случай.
Это как писать:

if (a == 1) {
...
} else if (a == 2) {
...
} else if (a == 3) {
...
}

когда проверки не нужны вообще.

Был конкретный вопрос - был дан конкретный ответ. Универсального решения никто не просил, да и как было отмечено выше - вопрос к программированию отношения не имеет (как бы вам ни хотелось считать язык РАЗМЕТКИ языком программирования)

 

[Del]

JavaScript кстати, - программирование?

Универсального решения никто не просил, да и как было отмечено выше - вопрос к программированию отношения не имеет (как бы вам ни хотелось считать язык РАЗМЕТКИ языком программирования)

топикстартер просил

А XSLT - считаем за программирование?

 

[Серый Fолк]

JavaScript кстати, - программирование?

топикстартер просил

А XSLT - считаем за программирование?

тс просил решение по html/css

 

[Del]

тс просил решение по html/css

ну я выше на чистом CSS и написал решение. Можно fallback на jQuery cделать, там по-сути одна строка, но это для IE8 и младше, а тут вот-вот уже 10-той выйдет.