Макет страницы

[Alex777-777]

Всем привет,

 

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

 

 

Подскажите, куда копать, какие методы использовать?

 

Спасибо.

[Sergik+]

Проще всего картинками, еще наверное можно с помощью SVG. Не слишком сложно.

Вообще дизайнеру руки надо оторвать за такой макет, он достаточно сложен для новичка.

Edited August 21, 2014 by Sergik+

[npofopr]

Зачем svg?

Обычные блоки абсолютно спозиционированные.

Копайте в сторону position: absolute;

[Sergik+]

SVG для хардкора )

[Galaxy]

border-radius, box-shadow, ну и стрелочки через before или after кидать

[Sergik+]

border-radius, box-shadow, ну и стрелочки через before или after кидать

Круг такой легко через border-radius а вот как именно такие стрелочки нарисовать ?

[Galaxy]

в фотошопе вырезать.

[Sergik+]

Блин чота не подумал даже )

[vera17]

Вот подробное руководство:

http://htmlbook.ru/blog/kak-sdelat-slovesnyi-puzyr-na-css3-bez-kartinok

[npofopr]

Вот подробное руководство:

http://htmlbook.ru/blog/kak-sdelat-slovesnyi-puzyr-na-css3-bez-kartinok

там немного другой булит, с более сложной стрелочкой.

[web911]

Как  вариант http://htmlbook.ru/css/nth-of-type

См. пример на этой же странице

[Alex777-777]

Зачем svg?

Обычные блоки абсолютно спозиционированные.

Копайте в сторону position: absolute;

 

Я наверное неправильно спросил и мне стали предлагать, как нарисовать овал со стрелочкой.

Вопрос другой, такие картинки на прозрачном фоне уже есть, и текст к каждой картинке задан.

 

Задача как минимум, расположить их в таком порядке, текст напротив хвостика, а картинки слева-справа

с перекрытием, как я нарисовал.

 

Задача как максимум, дополнительно, чтобы с переходом на портрет (смарт/планшет) картинки становились одна под другой, а текст возле хвостика, то есть картинки сдвинулись вместе с текстом.

 

Пока мои скудные знания говорят, что нужно копать вложенные DIV.

[Sergik+]

Сделать за вас ? Или вы хотите разобраться, если разобраться то пару недель вам придется

попотеть. Для вас это достаточно сложно, у вас недостаточно начальных знаний.

[Alex777-777]

Сделать за вас ? Или вы хотите разобраться, если разобраться то пару недель вам придется

попотеть. Для вас это достаточно сложно, у вас недостаточно начальных знаний.

 

За меня делать не нужно. Просто учитывая сжатые сроки, надеялся, что получу ответ типа, да правильно, копай DIV, или с DIV ничего не выйдет, копай другое.

[Sergik+]

Все делается на div, я и говорю у вас не достаточно знаний.

[Alex777-777]

Все делается на div, я и говорю у вас не достаточно знаний.

Спасибо. Если с SQL, OLAP и многим другим разобрался, то и с DIV и их выравниванием разберусь, 

[npofopr]

Спасибо. Если с SQL, OLAP и многим другим разобрался, то и с DIV и их выравниванием разберусь, 

расставляйте блоки через позиционирование.

Самый быстрый вариант и работающий.

Обертке position: relative; Внутренним объектам position: absolute; Дальше уже двигайте как надо. Для мобильных и т.п. для нужных разрешений через Медиа Запросы меняйте позиции или убираете position: absolute; и они должны будут друг под другом встать. 

[Alex777-777]

 

Спасибо. Если с SQL, OLAP и многим другим разобрался, то и с DIV и их выравниванием разберусь, 

расставляйте блоки через позиционирование.

Самый быстрый вариант и работающий.

Обертке position: relative; Внутренним объектам position: absolute; Дальше уже двигайте как надо. Для мобильных и т.п. для нужных разрешений через Медиа Запросы меняйте позиции или убираете position: absolute; и они должны будут друг под другом встать. 

 

Спасибо, понял куда копать. Нашел несколько книжек, также спасибо lynda.com, tutsplus и video2brain за отличные видеокурсы. Есть чем заняться на выходные

[Sergik+]

Прочитайте "Большая книга CSS3" Дэвида Макфарланда, вообще все ответы там найдете.

[Galaxy]

Новичкам лучше Мейер  - Каскадные таблицы стилей.

[Alex777-777]

Прочитайте "Большая книга CSS3" Дэвида Макфарланда, вообще все ответы там найдете.

 

Смотрел, слишком много воды. Я выбрал Learning Web Design, 4th Edition "A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" By Jennifer Robbins. Тоже есть вода, но на английском я ее не так замечаю, плюс книга в epub, легко читать на планшете. А в видеокурсах на мониторе я могу больше рассмотреть, чем на иллюстрациях в книгах и их можно смотреть в фоне.

[Alex777-777]

Новичкам лучше Мейер  - Каскадные таблицы стилей.

 

Это для меня слишком нудно. Я новичок только в CSS. С html, php, MySQL лет 15 назад немного игрался. А так большой опыт программирования, правда не WEB.

 

А с видеокурсов я выбрал

lynda.com (CSS: Page Layouts; CSS: Core Concepts: CSS Positioning Best Practices);

tutsplus (CSS Tips & Tricks);

Video2Brain (Exploring CSS Positioning).

У меня не стоит задача стать верстальщиком, мне только необходимо добавить стили в тему вордпресс, чтобы я мог оформить страницу/пост как мне нужно. До этой проблемы, я справлялся. Но с макетом, как я привел в начале темы, с налета у меня ничего не вышло.

 

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

 

В любом случае спасибо за совет.

[Sergik+]

Из видео курсов единственный вменяемый  курс Андрея Бернацкого

"Практика резиновой верстки", там 4 урока со второго сразу начинайте.

[Alex777-777]

Из видео курсов единственный вменяемый  курс Андрея Бернацкого

"Практика резиновой верстки", там 4 урока со второго сразу начинайте.

А в чем проблема с lynda.com? IMHO очень приличные курсы с четкой градацией, основы, концепция, специализация, то есть без воды.

 

PS. Курс Андрея Бернацкого гляну, спасибо.

Edited August 23, 2014 by Alex777-777

[Sergik+]

 

Из видео курсов единственный вменяемый  курс Андрея Бернацкого

"Практика резиновой верстки", там 4 урока со второго сразу начинайте.

А в чем проблема с lynda.com? IMHO очень приличные курсы с четкой градацией, основы, концепция, специализация, то есть без воды.

 

PS. Курс Андрея Бернацкого гляну, спасибо.

 

Lynda классные курсы но мой английский не очень, сейчас чуть подтянул английский,

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

 + веб разработка )

[Alex777-777]

Спасибо всем откликнувшимся.

 

Все, что нужно - сделал. Теперь буду разбираться для себя в остальном, так как данный случай частный и работает только в рамках темы вордпресс. Делал через вложенные DIV, картинки вправо/влево через float, позиционирование через margin. Так как сайт для внутреннего пользования - проверил на используемых браузерах/планшетах/смартфонах - все в пределах нормы.