[Решено] Вывод картинок горизонтально
5 марта 2011 в 12:21
Всем добрый день! Недавно столкнулся с проблемой горизонтального вывода картинок, использовал модуль colorbox. Нетрудно было узнать, что надо использовать «display: inline;», но вот где именно — непонятно.
Вопрос, как мне и подсказали, решился правкой .css файла. Для темы, которую я использую, это файл style.css.
Всего-навсего достаточно было добавить такой код:
.node .field-item {
display: inline;
}
display: inline;
}
Надеюсь, кому-нибудь пригодится.
- Блог
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Комментарии
ОГРОМНОЕ тебе спасибо)
два дня парился)
Гениально!
Я вставил ваш код в stile.css, "превью" встали в 2 столбца, но фото стали слитны, можно как то их разделить между собой и как можно увеличить количество превью?
Да, разделить можно. Для этого надо настроить отступ, попробуйте свойство padding. Увеличить количество по горизонтали? Можно, по умолчанию влезает столько, сколько может влезть. Поэтому увеличьте ширину содержащего превью элемента.
Спасибо
Спасибо большое, помогло
Вот только как сделать так, чтобы в разных типах контента оно выводилось по разному?
Где именно вставлять код? (Простите за глупый вопрос. Так как я новичок в друпале)
раз уж этот вопрос столь популярен у новичков, немного дополню решение..
более точный вариант будет таким:
.node .field-name-field-gallery .field-item {
display: inline;
}
вместо выделенного gallery пропишите машинное название созданного вами поля для галереи
вставлять этот код нужно *.css вашей темы (например - sites/all/themes/vasha_tema/css/styles.css)
Спасибо большое, очень помогло!
Подскажите пожалуйста в чем может быть проблема, сделал вроде как и советуют здесь, а все равно чего-то не выстраиваются они в ряд =(. Подробности на скринах.
З.Ы.
для темы есть только 1 *.css файл style.css
замените нижние подчеркивания на дефисы и к item добавте s
Спасибо за ответ, помогло
Спасибо, очень долго искал решение, понятно было что всё на самом деле просто, но вот что и куда добавлять нашёл именно здесь.
У меня вопрос, после вставки кода, картинки расположены достаточно далеко друг от друга как сделать чтобы расстояние было величиной в 2-3 пробела, если знаете, подскажите пожалуйста
Расстояние между картинками регулируется свойствами css margin и padding. Найдите в вашем файле описания стилей (например, style.css), где прописаны эти свойства и попробуйте изменить их значение. Значения могут быть в пикселях (например, margin-left: 10px;) поэтому вы можете даже более точно, чем в 2-3 пробела определить расстояние.
.node .field-name-field-gallery .field-item img {
margin: 2px;
}
или типа того
Спасибо за помощь
Большое спасибо!)
Подскажите, у меня в материале ССК несколько полей в каждом поле выпадающий список сейчас они в столбик, это некрасиво и много места, КАК СДЕЛАТЬ их в линию друг за другом???
я прикрепил картину ... (если что)
п.с. Пожалуйста если можно подробнее где именно в каком файле,что написать и т.д.....просто я новичок!
.node .views-exposed-form .views-exposed-widget {
float: left;
}
примерно так. прописывать туда же
"вставлять этот код нужно *.css вашей темы (например - sites/all/themes/vasha_tema/css/styles.css)"
Что то у меня не получается, это моя тема она должна быть именно моей или стандартная подойдет (типа Garland)- я в ее styles.css ставлю, Может не туда ставлю строчку или можно в любое место в этом файле?
ваша тема - та, которая используется в данный момент. чтобы подсказать точнее, мне нужна ссылка
Я использую тему Garland
C:\WebServers\home\mysite.ru\www\themes\garland\style.css - эта ссылка?
я имел виду ссылку на сайт. а вообще firebug + css вам в помощь
Спасибо
А кто нибудь может подсказать, как соединить картинки в Colorbox`е? То есть на странице отдельной к примеру 5 фотографий, но одна из них показывается отдельно от других. Я просто не помню, что именно в настройках Colorbox`а надо сделать, где именно ставить галочку.
Разобрался, галку надо ставить на против "Per page gallery".
Но есть такой вопрос, что именно надо прописать в CCS, что скрыть фотографии и оставить только одну, как в этом примере?
ответ здесь
Полезный топик в закладки, спасибо за решение
У меня такая же проблема, как и у
http://www.drupal.ru/comment/reply/58421/373933
Тема гарланд. В ней уже есть стили для данных дивов в самом конце файла ксс:
float: left;
border: 5px;
margin: 5px;
}
.field-name-uc-product-image {
float: left;
border: 5px;
margin: 5px;
}
Я ниже них добавляю
display: inline;
}
Но ничего не меняется. Пробовал всяко-разно менять, но так ничего и не вышло.
Грешу на clearfix в родительском диве
<div class="field field-name-body field-type-text-with-summary field-label-hidden clearfix">Имеющий такую структуру:
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
Пробовал переопредить, но либо делаю неправильно, либо проблема не в нём.
clearfix тут не при чём. Пробовал в другой теме, в которой он не появляется, всё равно резльутат тот же - картинки выводятся столбиком.
Люди, помогите пожалуйста. Весь уже измучался. Имеем стандартные темы гарланд или бартик.
Имеет такую структуру вывода: http://rghost.ru/36897675/image.png
Пробовал, как советовали выше, добавлять в ксс файл:
display: inline;
}
Через firebug вижу, что к field-items добавился стиль, но картинки попрежнему в столбике.
Может этот метод уже не работает? Тогда подскажите другой.
О, боги! Проблему нашёл и она заключалась в том, что вместо
.field-items
надо было писать
.field-item
И ладно, чёрт с этим, разобрался. Но скажите мне почему так?! Ведь в коде ясно указано field-items, к тому же выше тоже советовали дописать её.
Ну и внесу небольшую лепту:
Как вывести картинки в линию с подписями под ними.
<?php if (!$label_hidden) : ?>
<div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>: </div>
<?php endif; ?>
<div class="field-items"<?php print $content_attributes; ?>>
<?php foreach ($items as $delta => $item) : ?>
<div class="image-main">
<div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
<div class = "field-alt"><?php print $item['#item']['alt']; ?></div>
<div class = "field-title"><?php print $item['#item']['title']; ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
//основной код взят от сюда - http://drupalace.ru/lesson/primer-perekrytiya-shablona-cck
в css-файле прописывайте
display:inline;
}
.image-main {
width: ширина-картинок px;
float:left;
}
Надеюсь кому-нибудь поможет.
p.s. буду очень рад если скажите почему используется такой код
<div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>вместо такого
<div class="field-item"> <?php print $delta % 2 ? 'odd' : 'even'; ?><?php print $item_attributes[$delta]; ?><?php print render($item); ?></div>див класс не закрывается сразу же, а включает себя пхп
Ни дня покоя! Возможно я опять где-то сильно неправ, но на данный момент не могу понять где.
В чем заковырка?
упд:Выяснил что теперь строка
}
Не несёт никак не учавствует. Вывод картинок задаётся в
}
Перепробовал всякие комбинации и стилевые значения. Лучше чем на скрине в аттаче получить на удалось.
упд:Картина начала проясняться. Wronginline - вот что получаем если чуть расширить основное поле
Сам спросил, сам же и отвечаю. Всё дело оказалось в том, что миниатюры... были разного размера!!1
Куда вставлять код
display: inline;
}
в Corolla 7?
Там нет styles.css. Вставлял в другие файлы .css - не помогает, все равно выводит картинки вертикально.
Ну и: поле картинки у меня field_image, поэтому код вставляю такой:
display: inline;
}
Вот решение для Corolla 7.x-3.0-rc1
Код вставляем sites/all/themes/corolla/css/fields.css
{
float: left;
}
РЕШЕНО:
Немного поправил код для Corolla 7.x-3.0-rc1
Теперь изображения в ноде горизонтально и не слипаются.
float: left;
margin-bottom: 15px;
margin-right: 15px;
}
ВАЖНО:
В настройках темы должны быть выставлены параметры для Image Setting:
Alignment - flu view: нет
Alignment - teaser vidv: нет
rampage
.node .field-item {
display: inline;
}
Спасибо большое!
Всем добрый день! Использую тему Elegant Theme от Devsaran.com В css прописал
.node .field-name-field-photo .field-item {
display: inline;
}
photo - мое имя поля для галереи
ноль реакции. В других темах работает проверял. Может кто сталкивался.
попробуй убрать .node У меня так пошло.