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



 

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Подскажите, как такое верстается
kharikein
kharikein
Topic Starter сообщение 30.1.2011, 12:43; Ответить: kharikein
Сообщение #1


Прошлый ник: azatkh
*****

Группа: Active User
Сообщений: 570
Регистрация: 20.1.2008
Из: KZ
Поблагодарили: 81 раз
Репутация:   28  


товарищи верстальщики, подскажите, как такое сверстать.
Прикрепленное изображение

второй день мучаюсь, а валидно сверстать не получается sad.gif

вот кнопки, которые там используются:
Прикрепленное изображение
Прикрепленное изображение


--------------------
1
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Doomz
Doomz
сообщение 30.1.2011, 12:54; Ответить: Doomz
Сообщение #2


Участник
***

Группа: User
Сообщений: 246
Регистрация: 21.10.2009
Из: Харьков
Поблагодарили: 107 раз
Репутация:   21  


Делаешь список: заголовок, картинка, цена, описание, кнопки. У красной кнопки выставить z-index больше чем у синей. Рамку наверное делать бордером, а что бы она уезжала под заголовок и кнопки использовать тот же z-index. Как-то так


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 30.1.2011, 12:59; Ответить: lostprophet
Сообщение #3


Топовый постер
*******

Группа: Super Moderator
Сообщений: 2565
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3172 раза
Репутация:   292  


<div style="float: left; position: relative; z-index: 3;"><img src="post-829-1296376965.png" /></div>
<div style="float: left; position: relative; left: -10px; z-index: 2;"><img src="post-829-1296376971.png"  /></div>
<div style="clear:both;"></div>


Not IE6

Я так понимаю, что кнопки нужны?

Сообщение отредактировал lostprophet - 30.1.2011, 13:04


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zulicjan
Zulicjan
сообщение 30.1.2011, 13:00; Ответить: Zulicjan
Сообщение #4


НЕАДЕКВАТ!!!!111
******

Группа: Banned
Сообщений: 1359
Регистрация: 7.10.2008
Из: интернет
Поблагодарили: 482 раза
Репутация:   63  


тут будет большая заморочка с кросс браузерностью. Так как каждый браузер это дело по разному выведет! Это не простая проблема, нужно стили для каждого браузера прописывать. А решение выше думаю оптимальное. Ставить 2 кнопки рядом и css налягивать одну на ругую. Так же и наезд на бордер - через css смещение по оси я вниз.

Но геморой обеспечен! Как с браузерами, так и расширениями экрана
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Doomz
Doomz
сообщение 30.1.2011, 13:20; Ответить: Doomz
Сообщение #5


Участник
***

Группа: User
Сообщений: 246
Регистрация: 21.10.2009
Из: Харьков
Поблагодарили: 107 раз
Репутация:   21  


Блин! А ещё можно кнопки просто сделать одной картинкой, а сверху натянуть прозрачный фон и сделать его ссылкой, так кажется меньше всего гемора будет.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kharikein
kharikein
Topic Starter сообщение 30.1.2011, 15:34; Ответить: kharikein
Сообщение #6


Прошлый ник: azatkh
*****

Группа: Active User
Сообщений: 570
Регистрация: 20.1.2008
Из: KZ
Поблагодарили: 81 раз
Репутация:   28  


lostprophet, position relative бронирует место под объект. И при таком методе смещения получится большое белое поле между текстом и кнопками.

Doomz, таким методом не реализовать потом реакцию кнопок при наведении и нажатии

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 30.1.2011, 16:57; Ответить: lostprophet
Сообщение #7


Топовый постер
*******

Группа: Super Moderator
Сообщений: 2565
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3172 раза
Репутация:   292  


kharikein, ну и что?))
Задаете фон белый для слоя и получаете
белые поля по бокам от кнопок.

справа от правой кнопки.

Да, и причем тут текст?

Сообщение отредактировал lostprophet - 30.1.2011, 16:56


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bitrixoid
bitrixoid
сообщение 30.1.2011, 17:03; Ответить: bitrixoid
Сообщение #8


клоновод
******

Группа: Banned
Сообщений: 1951
Регистрация: 27.4.2009
Поблагодарили: 1118 раз
Репутация:   166  


Если у кнопок не предусмотрено никакой динамики + если блок фиксированной ширины, то самое лучшее и удобное решение - задать фоном для родительского блока целиком весь нижний бордер вместе с кнопками, а ссылки уже позиционировать поверх.

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

Сообщение отредактировал bitrixoid - 30.1.2011, 17:04


--------------------
клоновод


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kharikein
kharikein
Topic Starter сообщение 30.1.2011, 17:22; Ответить: kharikein
Сообщение #9


Прошлый ник: azatkh
*****

Группа: Active User
Сообщений: 570
Регистрация: 20.1.2008
Из: KZ
Поблагодарили: 81 раз
Репутация:   28  


bitrixoid, Ширина фиксированная, высота динамичная. Кнопки динамичный с обратной реакцией на ховер и клик. Не хотите попробовать сверстать, если есть время?

lostprophet, не понял вашей реакции. Мне нужно чтобы шаблон был сверстан именно так, как он есть на картинке, а не как получится по ходу дела.

Сообщение отредактировал kharikein - 30.1.2011, 17:24


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bitrixoid
bitrixoid
сообщение 30.1.2011, 17:41; Ответить: bitrixoid
Сообщение #10


клоновод
******

Группа: Banned
Сообщений: 1951
Регистрация: 27.4.2009
Поблагодарили: 1118 раз
Репутация:   166  


Сегодня нет. Завтра вечером может быть, если решения не найдёте. А лучше выложите куда нить уже сверстанную часть, чтобы доступно онлайн было, через фаербаг может быстренько получится внести правки.


--------------------
клоновод
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
0 PostBrigada 308 Сегодня, 0:32
автор: PostBrigada
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
8 PostBrigada 925 Сегодня, 0:14
автор: PostBrigada
Открытая тема (нет новых ответов) Видеомаркетинг как инструмент развития интернет-магазина
11 PostBrigada 2144 Вчера, 20:30
автор: galikfor
Открытая тема (нет новых ответов) Facebook палит прокси. Кто как решает эту проблему?
28 Twickbot 3613 Вчера, 20:26
автор: galikfor
Открытая тема (нет новых ответов) Обман пользователей мобильного интернета, о как =)
11 RMak 1486 Вчера, 12:53
автор: RMak


 



RSS Текстовая версия Сейчас: 15.12.2017, 4:51
Дизайн