X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сверстать вот такую штуку?, Помогите пожалуйста гуру
mr_LasVegas
mr_LasVegas
Topic Starter сообщение 31.3.2016, 20:43; Ответить: mr_LasVegas
Сообщение #1


Всем привет, помогите пожалуйста, не могу понять как сверстать правильно, пробовал по разному - все время вкривь и вкось.
Суть вопроса:
Надо сверстать вот такую штуку:
Прикрепленное изображение

Я каждый элемент разделил на 3 элемента, где элемент 1 и 3 это картинка, а 2 это div блок с background нужным цветом, а поверх написан текст.
Прикрепленное изображение

Но не получается соединить все 3 элемента в один, что бы все это правильно отображалось как на первой картинке.

П.С. хотелось бы что бы при уменьшении размера разрешения положение не нарушалось и элемент отображался корректно.

Подскажите пожалуйста :)

Сообщение отредактировал falken - 1.4.2016, 1:46
Причина редактирования: переместил в соответствующий раздел


--------------------
Меняю Webmoney на Qiwi - для личных нужд
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TrustMan
TrustMan
сообщение 31.3.2016, 23:41; Ответить: TrustMan
Сообщение #2


Да не, ТС походу про адаптивность. При изменении размера по ширине скорее всего картинки наползают на div


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 1.4.2016, 1:36; Ответить: falken
Сообщение #3


Цитата(mr_LasVegas @ 31.3.2016, 19:43) *
Подскажите пожалуйста

Используйте псевдоэлементы :after и :before. Все проще, чем кажется. Залейте первую и третью пикчу сюда, покажу на примере в jsfiddle.


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mr_LasVegas
mr_LasVegas
Topic Starter сообщение 1.4.2016, 6:38; Ответить: mr_LasVegas
Сообщение #4


Вот falken
Прикрепленное изображение
Прикрепленное изображение
Спасибо большое! Буду ждать)

Сообщение отредактировал mr_LasVegas - 1.4.2016, 6:38


--------------------
Меняю Webmoney на Qiwi - для личных нужд
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Geers
Geers
сообщение 1.4.2016, 9:59; Ответить: Geers
Сообщение #5


mr_LasVegas
В вашем случае вообще графика не нужна.
Флет тени для слов:
http://ruseller.com/lessons.php?id=1834&rub=32
http://artslab.info/podborki/generatory-dlinnyx-tenej/

И привязать этот Breadcrumbs http://beloweb.ru/wp/krasivyie-hlebnyie-kr...ss-na-css3.html

falken подскажет как. :D

Сообщение отредактировал Geers - 1.4.2016, 10:01


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 1.4.2016, 15:15; Ответить: falken
Сообщение #6


Geers, ну человек решил графикой сделать, так даже проще.

Цитата(mr_LasVegas @ 1.4.2016, 5:38) *
Буду ждать)

https://jsfiddle.net/z4dqzzwm/


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей


Поблагодарили: (4)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
graycat777
graycat777
сообщение 1.4.2016, 16:02; Ответить: graycat777
Сообщение #7


Вариант без графики: https://jsfiddle.net/ebfyc59v/


--------------------


Поблагодарили: (5)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mr_LasVegas
mr_LasVegas
Topic Starter сообщение 1.4.2016, 19:25; Ответить: mr_LasVegas
Сообщение #8


falken, graycat777, спасибо огромное за помощь!! очень выручили! сейчас пойду делать у себя))


--------------------
Меняю Webmoney на Qiwi - для личных нужд
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alexan
Alexan
сообщение 13.4.2016, 15:58; Ответить: Alexan
Сообщение #9


и как у вас, получилось? похвастаться можете?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
webhelper777
webhelper777
сообщение 13.4.2016, 20:32; Ответить: webhelper777
Сообщение #10


вариант без графики предпочтительнее

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
11 Boymaster 1798 17.4.2024, 23:35
автор: Boymaster
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
29 freeax 4806 17.4.2024, 1:19
автор: sergio11
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
148 adw-kupon.ru 19705 8.4.2024, 10:37
автор: Skyworker
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
18 uahomka 3098 5.4.2024, 5:53
автор: Skyworker
Горячая тема (нет новых ответов) Как бездомные хранят деньги?
81 metvekot 13653 31.3.2024, 12:44
автор: Boymaster


 



RSS Текстовая версия Сейчас: 19.4.2024, 7:39
Дизайн