Перейти к содержимому


Выбрать шаблон и создать сайт

Как вывести картинки на сайте в несколько колонок

#1 Zlowariy

Zlowariy
  • Пользователь
  • 108 сообщений
  • Репутация: 0
0

Отправлено 25 Январь 2015 - 08:45

Добрый день, помогите пожалуйста разобраться тут вот с каким делом, хочу грамотно сделать галерею как на этом сайте http://xn--e1afgbgom...n--p1ai/breeds/! Надо что бы изображения были 2-4 колонки(столбцы), разумеется при нажатии на картинку была ссылка на описание. Пробовал без плагинов и т.д в записях сделать - получается не красиво. Расскажите подробней как осуществить эту мечту?)Да! Кстати, раньше пробовал какой то плагин устанавливать, но увы всё равно не разобрался как надо!)


 

 

  • 0

#2 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 25 Январь 2015 - 11:03

Это исключительно CSS. Делаете блоки со свойством  display:inline-block и внутри них картинки, а там уже по ширине подгоните сколько вам столбцов надо


Даже тот-же сайт, что в примере открывайте и смотрите как там реализовано.


  • 0

#3 Zlowariy

Zlowariy
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: 0

Отправлено 25 Январь 2015 - 14:18

Кажется разобрался, завтра попробую проделать такое) Спасибо!


  • 0

#4 Zlowariy

Zlowariy
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: 0

Отправлено 26 Январь 2015 - 07:41

Что-то я не понял, в конце статьи http://starper55plys...otdelnye-bloki/, про какой он редактор говорит, тот что в wp админ панель=> дизайн=>редактор? 

Это я так понял надо создать свой фаил с разрешением css, и в нём должен быть такой код 

<div style="display: inline; width: 600px;">
<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 1</p>

<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 2</p>

<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 3</p>
</div>

<div style="display: inline; width: 600px;">
<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 4</p>

<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 5</p>

<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 6</p>
</div>

затем как я понял надо обновить файл в этом редакторе wp и заместо style и его значений в этом же редакторе прописывать class=Okno так?


Потом уже в файле style.css вписывать этот класс... куда и как?? Вообщем помогите разобраться пожалуйста


  • 0

#5 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 26 Январь 2015 - 10:59

Что-то я не понял, в конце статьи http://starper55plys...otdelnye-bloki/, про какой он редактор говорит, тот что в wp админ панель=> дизайн=>редактор? Это я так понял надо создать свой фаил с разрешением css, и в нём должен быть такой код

Zlowariy,
1) по вашей ссылке говорится про любой текстовый редактор, например, сгодится блокнот.
2) новый css файл создавать не обязательно, можно добавить код в уже существующий файл
3) приведенный вами код не нужно писать никуда (По ссылке он приводится как промежуточная стадия подбора css-параметров под ваш конкретный случай. И, на самом деле, так подбирать параметры неудобно, гораздо удобнее css стили сразу вынести либо в отдельный файл либо в соответствующий раздел html-кода). Кстати, это не css-код, а html, соответственно, он может быть вставлен только в html-файл.
4) вам потребуется вставить в ваш css-файл примерно такой код:

.okno {
display: inline;
width: 600px;
}

.okno p {
float: left;
font-family: Verdana;
padding: 10px;
font-size: 14px;
margin: 3px 3px 3px 5px;
width: 170px;
height: 200px;
border-radius: 5px;
box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;
}

а в html-файле код следует добавить такой:

<div class="okno">
  <p>Блок 1</p>
  <p>Блок 2</p>
  <p>Блок 3</p>
</div>
<div class="okno">
  <p>Блок 4</p>
  <p>Блок 5</p>
  <p>Блок 6</p>
</div>

Сообщение отредактировал yury: 26 Январь 2015 - 11:05

  • 0

#6 Zlowariy

Zlowariy
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: 0

Отправлено 26 Январь 2015 - 11:23

yury, Бегу применять, спасибо)


  • 0

#7 Zlowariy

Zlowariy
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: 0

Отправлено 26 Январь 2015 - 11:55

yury, Эм а где этот html файл, в папке с темой нету таких файлов с разрешением html. Есть на сервере где тема сайта файл style.css=>редактировать=> и там уже внизу есть функция "просмотр html" - это? Там редактировать надо? Я открыл, увидел помимо вперемешку написанного "кода" свои блоки... Только они чу-чуть криво расположены, но на сайте не видно.

Ещё такой вопрос, в какой именно отрезок кода мне это все вставлять что бы мои блоки были видны на определённой странице или как узнать? У меня там 3 файла: style.css, style.ie6.css И style.ie7.css


  • 0

#8 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 26 Январь 2015 - 19:08

Zlowariy,

я CMS (Системами управления контентом) не пользуюсь, так что подсказать, где конкретно у вас контент редактируется мне сложно. Попробуйте задать свой вопрос в тематическом разделе форума:  Системы управления контентом (CMS)


  • 0

#9 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 26 Январь 2015 - 19:27

Ищите папку templates и в ней файлы с расширением tpl это и есть html шаблоны. Добавлять код нужно во все файлы, только его нужно адаптировать по каждый по своему, так как браузеры ie6 и ie7 очень капризные к css свойствам 


  • 0

#10 Zlowariy

Zlowariy
    Topic Starter
  • Пользователь
  • 108 сообщений
  • Репутация: 0

Отправлено 29 Январь 2015 - 12:58

Ок, я бы все палец вверх нажал бы да ещё нету 10 сообщений, так-что просто спасибо)


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru