12 ноября 2008 в 15:47
Дано: fieldgroup в cck, в нем выводится поле image, изображения добавляются и выводятся по уроку от andron13 (через imagecache, уменьшенное(скалированное) изображение).
При добавлении новости и изображений все они сбиваются к левому краю и выводятся одно под другим.
Вопрос: как организовать вывод изображений одно ЗА другим (в строку) и по центру? Ну или по крайней мере просто по центру, пусть уже остается в столбец...
p.s. Ну вот почему нету свойства float:center? 
Комментарии
float знаете, а в строку - нет? Ох, юлите, дружок!
увы... я все узнаю путем научного тыка и аналогии... где-то что-то подсмотрю потом включаю логику и делаю наподобие то что мне надо...
сейчас вот погуглил, кручусь вокруг display:block Но что-то вкурить не могу никак.
вот стиль для вывода поля изображения:
div.field-field-screens {
float: left;
margin-right: 10px;
margin-bottom: 0px;
}
что сюда впихнуть чтобы они были по центру и одна за другой в строку?
не помогает ничего, допустим я уже знаю как можно вывести все изображения по центру, все поле image, но как сделать чтобы они выводились не в столбец а в линию?
по фаербагу нашел что изображения выводятся в field-item odd и field-item even, эти блоки растянуты по всей ширине, как теперь можно их изменить чтобы справа они прилегали к рисунку? как в общем айтемы в поле выводить в строку? например по 2 штуки в строку?
и только пожалуйста, не надо ответом типа "Вьюс тебе в помощь.." объясните хоть немного, КАК? я уже научился делать через вьюшки страницы и блоки, но а как просто поменять в них стандартный вывод ноды в контент блок?
1) найдите родительские блоки изображений
2) Если вы хотите отображать изображения в строку нужно задать родительскому блоку float: left; затем фиксированную ширину, например 150px и фиксированную высоту - и будет вам счастье, отображаться будет в браузерах с ie6 и выше
Если у вас друпал 6, как вариант берете views и добавляете поля с изображениями (в настройках ставите отображение превьюшек) и тип отображения grid и выбираете сколько столбцов надо + я бы еще фильтрацию по типу материалов добавил. - вьюз будет делать отображение ваших картинок в
<div>
<img style="float:left">
<img style="float:left">
<img style="float:left">
</div>
</div>
чтот в этом духе
РЕШЕНО
немного подитожим:
Необходимо было настроить вывод скриншотов в блоке в несколько рядов, по центру.
Изображения выводятся в поле cck - imagefield с помощью модуля imagecache.
в imagecache создано правило Масштабирования (Scale) - width: 150px; (настроил под себя).
В общем, в настройке вывода изображений руководствовался уроком от andron13.
Далее, чтобы организовать вывод изображений в несколько колонок в заранее созданный файл /sites/all/themes/image-style.css вписываем такой код:
text-align:center;
float:left;
width:100%;
}
div.field-field-screenshots .field-item {
float:left;
width:33%;
text-align:center;
margin: 5px 0px;
}
(подмечу, что я удалил строчки созданные из видеоурока про Imagecache+cck, тут они просто не нужны)
теперь немного о настройке image-style.css файле:
1.Вместо screenshots впишите Ваше название поля image.
2.width:33%; - для 3 колонок, аналогично: 50% - для 2-х, 25% - для четырех...
Данный стиль применяется только к указанному блоку field-field-screenshots и не затрагивает остальные, поэтому другие данные будут выводиться так же как и раньше. Так же это поле можно добавлять в группы и табы через cck отображение не страдает.
Скриншот того что получилось можно посмотреть в прикрепленном файле, работает аналогично во всех имеющихся у меня на сей момент браузерах - Firefox 3;opera 9.27, 9.5;safari 3; IE 7+
Не решенные мной мелкие проблемы: можно как-то поставить минимальную ширину блока? потому что если уменьшать страницу, то изображения сдвигаются и налаживаются друг на друга.. хотя на практике вряд ли кому-то это нужно будет, но все-таки...
p.s. Ну вот почему нету свойства float:center?
margin: 0 auto;