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



 

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

Открыть тему
Тема закрыта
> Проблема с версткой резинового дива, Тянущийся блок с закругленными углами
mrTall
mrTall
Topic Starter сообщение 31.8.2011, 18:18; Ответить: mrTall
Сообщение #1


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

Группа: User
Сообщений: 64
Регистрация: 17.5.2011
Поблагодарили: 17 раз
Репутация:   5  


Верстаю сайт, столкнулся с тривиально проблемой начинающих верстальщиков.
имеется блок
Прикрепленный файл  Untitled_1.jpg ( 48,67 килобайт ) Кол-во скачиваний: 12


наши услуги нужно сверстать резиновым, было принято решение сделать спрайт, и позиционировать бекграунд.
css напоминает что-то такое
.left-menu ul div {
    height: 31px;
    width:200px;
    background: url(img/left-menu-sprite.png) no-repeat left -31px;
    padding-left:12px;
    display:block;
}
.left-menu ul div{

    height:31px;
    /*background: url(img/left-menu-sprite.png) no-repeat right 0px;*/
    padding-right:12px;
}

Вот сам спрайт
Прикрепленный файл  left_menu_sprite.png ( 1,82 килобайт ) Кол-во скачиваний: 11

Незнаю где я допускаю ошибку, точнее вроде знаю, но не нашел решение. Подскажите как правильно реализовать такой блок 1 дивом, и 1 спрайтом.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
programmer92
programmer92
сообщение 31.8.2011, 21:27; Ответить: programmer92
Сообщение #2


Участник
***

Группа: Banned
Сообщений: 229
Регистрация: 12.6.2011
Из: Роддома
Поблагодарили: 57 раз
Репутация:   18  


А почему
CODE
.left-menu ul div{
повторяется 2 раза?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 31.8.2011, 21:56; Ответить: lostprophet
Сообщение #3


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

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


Все гораздо проще. Посмотрите тут как сверстан пункт меню и повторите так же.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mrTall
mrTall
Topic Starter сообщение 1.9.2011, 12:00; Ответить: mrTall
Сообщение #4


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

Группа: User
Сообщений: 64
Регистрация: 17.5.2011
Поблагодарили: 17 раз
Репутация:   5  


2 programmer92 изначально было не верно написано, сейчас отдальный клас там.
2 lostprophet Да пример хороший, спасибо. Если не выйдет сделать 1 дивом, сделаю как на сайте бигдуглас.

Но вопрос остается вопросом. 1 спрайт, 1 див, это возможно?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
CoolMaster
CoolMaster
сообщение 1.9.2011, 14:15; Ответить: CoolMaster
Сообщение #5


Новичок
*

Группа: User
Сообщений: 18
Регистрация: 15.8.2011
Поблагодарили: 7 раз
Репутация:   1  


Но вопрос остается вопросом. 1 спрайт, 1 див, это возможно?

Возможно, если правильно понял html-конструкцию. Задайте 1 часть спрайта для ul, а вторую - для div.
В css будет примерно(!) так:
.menu ul, .menu ul div{background:url(image.png) no-repeat left top;
.menu ul{background-position:значение значение;}
.menu ul div{background-position:значение значение;}


Как ошибка, не сохраняйте прозрачность, иначе квадратные углы "длинной" части справйта перекроют "короткую".
Думаю поможетsmile.gif

Сообщение отредактировал CoolMaster - 1.9.2011, 14:16


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


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

Группа: User
Сообщений: 64
Регистрация: 17.5.2011
Поблагодарили: 17 раз
Репутация:   5  


1 дивом так и не вышло реализовать. Банально залили 1 картинкой. У кого выйдет сделать резиновый див с бекграундом отпишитесь, интересно.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bloome
Bloome
сообщение 14.9.2011, 22:40; Ответить: Bloome
Сообщение #7


клоновод
**

Группа: Banned
Сообщений: 58
Регистрация: 12.9.2011
Поблагодарили: 2 раза
Репутация:   -4  


чтобы сделать резиновым, все размеры не в пикселях а в процентах указывайте))


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Проблема индексации в Google
12 Saitcena 2953 22.11.2017, 17:34
автор: metvekot
Открытая тема (нет новых ответов) Проблема с 301 редиректом в htaccess
не срабатывает с (без www) на www
14 danc1r0k 1989 2.11.2017, 14:44
автор: vadosseo
Открытая тема (нет новых ответов) Нужны наркотики? Не проблема
Скачай ТОР и покупай
17 PostBrigada 1197 29.9.2017, 11:55
автор: ECurEx
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема выбора ниши для заработка
15 lektor2010 1275 11.4.2017, 21:18
автор: SeoKot
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема с группой в фейсбуке
9 Swissi 1335 21.1.2017, 20:11
автор: Swissi


 



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