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


Новый статус (1)
*******

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


<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


Новый статус (1)
*******

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыкак сохранить на компьютер баннер html5 ?
9 lamun 630 Вчера, 23:18
автор: lamun
Открытая тема (нет новых ответов) Как зайти через прокси в Webmoney?
8 metvekot 824 Вчера, 22:48
автор: anchous
Открытая тема (нет новых ответов) Подскажите аналог sape
13 _fan_ 2485 Вчера, 12:46
автор: Motorocker
Открытая тема (нет новых ответов) Как обменять WM в Apple приложении?
1 GlazunOFF 407 26.5.2018, 18:25
автор: JOHNY
Открытая тема (нет новых ответов) Подскажите хостинг в Украине
7 Infacto 1504 25.5.2018, 19:41
автор: Infacto


 



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