Помогите советом по верстке

[dropoff]

Привет всем.

Делаю проект в котором на главной странице необходимо выводить блоки как на скриншоте - http://i056.radikal.ru/1007/6d/5b4c2226a6ba.gif

Сейчас сделал такой вывод с помощью mooMasonry(mootools в проекте используется), но он у меня как-то не корректно работает в IE 6 и 7(сам где-то с версткой напорол немного). Не критично, конечно, но IE бывает еще вешает скрипт и пишет, что скрипт долго выполняется, а это уже проблема.

Не могу найти решения для вывода таких колонок без JS, а на чистом CSS, да и опыта маловато.

Может кто сталкивался с таким выводом? Был бы признателен за помощь!

Заранее спасибо.

[psywalker]

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

[dropoff]

Колонками не то будет. Нужна последовательность вывода блоков по мере их добавления, а если колонками, то последовательность нарушиться.

Нужно как бы так:

1 - 2 - 3

4 - 5 - 6

7 - 8 - 9

а если колонками, то будет так

1 - 4 - 7

2 - 5 - 8

3 - 6 - 9

Шаблонизатор у меня smarty, я если честно и не знаю как вывод там организовать колонками такой

[psywalker]

Ну тут тогда JS в помощь. Допустим поочереди засовывать блоки в колонки, делать проверку, если их длина уже равна 3, то тогда начинать с первой и т.д.

[dropoff]

Т.е. стандартными средствами CSS такое не реализовать?

[s0rr0w]

JS там нафиг не нужен

{capture name='col1' assign='col1'}{/capture}
{capture name='col2' assign='col2'}{/capture}
{capture name='col3' assign='col3'}{/capture}

{foreach from=$arr item='block' name='i'}
 {if $smarty.foreach.i.iteration%3 == 0}
  {capture name='col3' assign='col3'}
	{$col3}
	{$block}
  {/capture}
 {elseif $smarty.foreach.i.iteration%3 == 0}
  {capture name='col2' assign='col2'}
	{$col2}
	{$block}
  {/capture}
 {else}
  {capture name='col1' assign='col1'}
	{$col1}
	{$block}
  {/capture}
 {/if}
{/foreach}

<div class="col1">{$col1}</div>
<div class="col2">{$col2}</div>
<div class="col3">{$col3}</div>

[psywalker]

Ну я так понял это Смарти, я его не знаю, поэтому и предложил, что думал

[s0rr0w]

Ну я так понял это Смарти, я его не знаю, поэтому и предложил, что думал

Это смарти. Клевейшая штука. Правда третью версию они перенаворотили. Медленнее второй раза в три. Пока что. Может со временем что-то улучшат, но особо на это надеяться не нужно.

[psywalker]

Это смарти. Клевейшая штука. Правда третью версию они перенаворотили. Медленнее второй раза в три. Пока что. Может со временем что-то улучшат, но особо на это надеяться не нужно.

Понял, буду знать, надеюсь, что в будущем познакомлюсь с ним поближе

[DDX]

Чтобы не создавать отдельную тему спрошу тут.

Можно ли средствами HTML и CSS как то ограничить либо блок div, либо ячейку таблицы table таким образом, чтобы текст набранный внутри блока или ячейки никогда не выходил за пределы их границ (в случае если текста очень много), а автоматически переносился на следующую строку.

[s0rr0w]

Чтобы не создавать отдельную тему спрошу тут.

Можно ли средствами HTML и CSS как то ограничить либо блок div, либо ячейку таблицы table таким образом, чтобы текст набранный внутри блока или ячейки никогда не выходил за пределы их границ (в случае если текста очень много), а автоматически переносился на следующую строку.

Для этого есть мягкие переносы ­

Но с ними есть куча проблем.

[dropoff]

s0rr0w, спасибо. Но, что-то не пойму как правильно в шаблоне сделать.

Сейчас вывод у меня такой.

{foreach name=aussen from=$aTopics item=oTopic}
{assign var="oBlog" value=$oTopic->getBlog()}
{assign var="oUser" value=$oTopic->getUser()}
{assign var="oVote" value=$oTopic->getVote()}

// заголовки, дата, комментарии и т.д..

{$oTopic->getTextShort()} // контент

// теги, автор и т.д...

{/foreach}

[s0rr0w]

s0rr0w, спасибо. Но, что-то не пойму как правильно в шаблоне сделать.

Сейчас вывод у меня такой.

{foreach name=aussen from=$aTopics item=oTopic}
{assign var="oBlog" value=$oTopic->getBlog()}
{assign var="oUser" value=$oTopic->getUser()}
{assign var="oVote" value=$oTopic->getVote()}

// заголовки, дата, комментарии и т.д..

{$oTopic->getTextShort()} // контент

// теги, автор и т.д...

{/foreach}

Расстановка мягких переносов может быть сделана

1. На момент создания контента, автором, вручную

2. На момент сохранения контента в базу, автоматически

3. При выводе контента, автоматически, при момощи модификатора

Самый лучший вариант - номер один. Потом второй, потом третий.

[dropoff]

Ответ был направлен наверно DDX?

[s0rr0w]

Ответ был направлен наверно DDX?

А, если тебе, то нужно {$oTopic->getTextShort()} вставить вместо {$block}

[dropoff]

Ок. Вставил.

Выводит в 1 колонке 7 записей, во второй вообще пусто, в третьей 3 записи.

Получается, что выводит не понятно как-то.

[s0rr0w]

Потому что я писал без проверки, а там у меня ошибка

{elseif $smarty.foreach.i.iteration%2 == 0}

[dropoff]

s0rr0w, огромное СПАСИБО! Все получилось как надо.

Не знал про capture совсем. Оказывается все просто получается

[s0rr0w]

s0rr0w, огромное СПАСИБО! Все получилось как надо.

Не знал про capture совсем. Оказывается все просто получается

Список смарти-тегов находится тут

http://www.smarty.net/manual/ru/

[dropoff]

Ага. Я листал мануалы по smarty, но там очень много всего, пока еще не все там просмотрел.

Столкнулся с еще одной проблемой(может ночной запуп)

У меня шаблон резиновый. Как можно разместить три колонки так, чтобы отступы били как на скрине - http://looloo.ru/?v=macbhx1z20c6nz1hd8xy21yz4zmyg85.gif ?

Красные линии - края шаблона. там отступов не должно быть, а вот где синие линии надо одинаковый отступ.

Из конструкции которую помогли сделать(спасибо еще раз), получилось, что имеем три контейнера col1, col2 и col3. Что-то не могу придумать, как сделать только отступы одинаковые внутри и при этом сохранить одинаковую ширину колонок.

[s0rr0w]

Ага. Я листал мануалы по smarty, но там очень много всего, пока еще не все там просмотрел.

Столкнулся с еще одной проблемой(может ночной запуп)

У меня шаблон резиновый. Как можно разместить три колонки так, чтобы отступы били как на скрине - http://looloo.ru/?v=macbhx1z20c6nz1hd8xy21yz4zmyg85.gif ?

Красные линии - края шаблона. там отступов не должно быть, а вот где синие линии надо одинаковый отступ.

Из конструкции которую помогли сделать(спасибо еще раз), получилось, что имеем три контейнера col1, col2 и col3. Что-то не могу придумать, как сделать только отступы одинаковые внутри и при этом сохранить одинаковую ширину колонок.

<div class="colContainer">
 <div class="col1"></div>
 <div class="col2"></div>
 <div class="col3"></div>
</div>

.colContainer { overflow: hidden; margin-right: -10px; }
.col1, .col2, .col3 { float: left; width: 33%; margin-right: 10px; }

Типа такого

[dropoff]

Наконец-то выбрался.

Спасибо за пример, но у меня почему-то правая(третья) колонка падает вниз. Т.е. не влазят по ширине.

Сейчас пытался что-то сделать, так и не получилось, сделать ровно колонки, как на скрине привел.

И в нете тоже не могу найти подходящих примеров, чтобы и резиновая была ширина и три колонки резиновые.

[Searcher]

Может плохо искали... Например так: http://layouts.ironmyers.com/100_percent_L...s/layout/?id=28

Ну и всякие другие шаблоны:

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

http://csstemplater.com/

[dropoff]

Спасибо за подборку ссылок! Видимо не правильно искал.