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



 

Здравствуйте, гость ( Вход | Регистрация )

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


UX/UI Designer
*****

Группа: Active User
Сообщений: 749
Регистрация: 9.4.2010
Из: Moscow
Поблагодарили: 291 раз
Репутация:   67  


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

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

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

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

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

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


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


Участник
***

Группа: User
Сообщений: 159
Регистрация: 12.5.2015
Поблагодарили: 51 раз
Репутация:   8  


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


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


online
*******

Группа: Super Moderator
Сообщений: 3818
Регистрация: 23.3.2011
Поблагодарили: 4172 раза
Репутация:   371  


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

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


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


UX/UI Designer
*****

Группа: Active User
Сообщений: 749
Регистрация: 9.4.2010
Из: Moscow
Поблагодарили: 291 раз
Репутация:   67  


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

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


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


Старожил
******


Группа: Active User
Сообщений: 1231
Регистрация: 13.4.2011
Поблагодарили: 654 раза
Репутация:   95  


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


online
*******

Группа: Super Moderator
Сообщений: 3818
Регистрация: 23.3.2011
Поблагодарили: 4172 раза
Репутация:   371  


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

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

https://jsfiddle.net/z4dqzzwm/


--------------------
здесь может быть ваша ссылка


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


Частый гость
**

Группа: User
Сообщений: 51
Регистрация: 8.4.2015
Из: Украина
Поблагодарили: 24 раза
Репутация:   10  


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


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


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


UX/UI Designer
*****

Группа: Active User
Сообщений: 749
Регистрация: 9.4.2010
Из: Moscow
Поблагодарили: 291 раз
Репутация:   67  


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


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


Новичок
*

Группа: User
Сообщений: 16
Регистрация: 15.3.2016
Поблагодарили: 0 раз
Репутация:   0  


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


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 9.4.2016
Поблагодарили: 0 раз
Репутация:   0  


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

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыкак сохранить на компьютер баннер html5 ?
9 lamun 645 Вчера, 23:18
автор: lamun
Открытая тема (нет новых ответов) Как зайти через прокси в Webmoney?
8 metvekot 849 Вчера, 22:48
автор: anchous
Открытая тема (нет новых ответов) Как обменять WM в Apple приложении?
1 GlazunOFF 411 26.5.2018, 18:25
автор: JOHNY
Открытая тема (нет новых ответов) Как закачать файлы на фтп прямо из другого фтп?
Сабж
1 stixia007 396 25.5.2018, 15:22
автор: wertu
Открытая тема (нет новых ответов) Как защитить свои данные в общественном Wi-Fi?
9 unazekoff 361 25.5.2018, 10:22
автор: spomoni


 



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