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


Пользователь месяца
ShowPrint ShowPrint 1-й за Сентябрь
Очков активности: 283 2 темы, 21 сообщение, 7 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Medvedoc
    #1

    Medvedoc
    Очков активности: 426 8 тем, 47 сообщений, 4 балла репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 120 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 96 Вне конкурса за определение пользователя месяца

  • Фотография WGN
    #4

    WGN (worldgamenews.com)
    Очков активности: 73.5 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #5

    Алексей111 (xvideo24.ru)
    Очков активности: 61.5 8 тем, 17 сообщений, 1 балл репутации

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 54 0 тем, 12 сообщений, 3 балла репутации

  • Фотография yuran
    #7

    yuran (yurbol.ru)
    Очков активности: 30 1 тема, 17 сообщений, 1 балл репутации

  • Фотография Zevss
    #8

    Zevss (domles43.ru)
    Очков активности: 15 1 тема, 7 сообщений, 1 балл репутации

  • Фотография devpro
    #9

    devpro
    Очков активности: 13.5 0 тем, 9 сообщений, 1 балл репутации

  • Фотография MashaJans
    #10

    MashaJans
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 26.09.2018
  • Яндекс выдача: 16.10.2018
Топ 5 участников по репутации


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

#1 Zlowariy

Zlowariy
  • Неактивные
  • 108 сообщений
  • Репутация: 0
0

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

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


 

 

  • 0

#2 Ixman

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

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

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


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


  • 0


#3 Zlowariy

Zlowariy
    Topic Starter
  • Неактивные
  • 108 сообщений
  • Репутация: 0

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

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


  • 0

#4 Zlowariy

Zlowariy
    Topic Starter
  • Неактивные
  • 108 сообщений
  • Репутация: 0

Отправлено 26 January 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
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 26 January 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 January 2015 - 11:05

  • 0

#6 Zlowariy

Zlowariy
    Topic Starter
  • Неактивные
  • 108 сообщений
  • Репутация: 0

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

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


  • 0

#7 Zlowariy

Zlowariy
    Topic Starter
  • Неактивные
  • 108 сообщений
  • Репутация: 0

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

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

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


  • 0

#8 yury

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

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

Zlowariy,

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


  • 0

#9 Ixman

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

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

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


  • 0


#10 Zlowariy

Zlowariy
    Topic Starter
  • Неактивные
  • 108 сообщений
  • Репутация: 0

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

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


  • 0

robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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