Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.08.2011, 21:21   #1
KorPaEv
Пользователь
 
Аватар для KorPaEv
 
Регистрация: 08.07.2011
Сообщений: 42
По умолчанию Списки и ссылки

Доброго времени суток!

Вопрос в следующем.
Есть контейнер со списком, элементы списка - картинки и ссылки на них сразу.

Картинки имеют определенный размер например 123 на 123, оставляю 2 пикселя на рамку.
Есть бэкграунд для картинки и при наведении на картинку он должен появляться.
Как в css прописать так, чтобы при наведении на эту картинку появлялся бэкграунд но таким же размером как мое исходное изображение??

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

ХТМЛ
Код:
<div id="content_pic">
<div id="content_pic_ul">
<ul>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
</ul>
</div>
</div>
ЦСС
Код:
div#content_pic

	{
	overflow:hidden;
	padding:0 15px;
 	}
	
div#content_pic_ul ul

	{
 	list-style:none;
	margin:0;
	padding:0;
	width:805px;
 	}
	
div#content_pic_ul ul li

	{
 	float:left;
	margin:0 34px 34px 0;
	border:#0033cc 2px inset;
 	}

div#content_pic_ul ul a

	{
 	text-decoration:none;
 	}

div#content_pic_ul ul a:hover

	{
 	background:url(../img/text_ahref.png) no-repeat;
 	}
Так вот у меня бэкграунд заменяется, но он прорисовывается в линии подчеркивания а мне нужно чтобы он применялся во всю ширину картинки и длинну соответственно.
Created by KorPaEv...
KorPaEv вне форума Ответить с цитированием
Старый 18.08.2011, 21:54   #2
kettanaito
Веб-дизайнер
Форумчанин
 
Аватар для kettanaito
 
Регистрация: 11.08.2011
Сообщений: 305
По умолчанию

Задавать background ссылке не вариант. Лучше сделай элементы <li> определенного размера (под твой background) и опиши событие при наведении на них. Должно получиться.
kettanaito вне форума Ответить с цитированием
Старый 18.08.2011, 22:57   #3
TranceSmile
Смайлик :)
Форумчанин
 
Аватар для TranceSmile
 
Регистрация: 12.12.2010
Сообщений: 445
По умолчанию

Я допустим делаю так
Код:
<style>
#mainmenu {
width: 500px;
height:40px;
}
#mainmenu ul {
list-style:none;
display:inline;
}
#mainmenu a {
display:block;
width:100px;
height:40;
text-decoration:none;
background:silver;
}
#mainmenu a:hover{
background:yellow;
}
</style>
<div id=mainmenu>
<ul>
<li><a href="page1"></a></li>
<li><a href="page2"></a></li>
<li><a href="page3"></a></li>
<li><a href="page4"></a></li>
</ul>
</div>
Самый перспективный framework Yii (c)
TranceSmile вне форума Ответить с цитированием
Старый 19.08.2011, 08:41   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Код:
div#content_pic_ul ul a:hover img

	{
 	background:url(../img/text_ahref.png) no-repeat;
 	}
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 19.08.2011, 09:03   #5
KorPaEv
Пользователь
 
Аватар для KorPaEv
 
Регистрация: 08.07.2011
Сообщений: 42
По умолчанию

Всем спасибо, но сделал так

Код:
div#content_pic_ul ul a

        {
        text-decoration:none;
        display:block;
        width:123px;
        height:123px;
        }
Помогло..сразу вопрос, если у меня будет ситуация что я поменяю размеры картинок, нельзя ли поставить размеры 100% чтобы блок сам подстраивался по размер картинки??или же придется вручную менять??
Created by KorPaEv...
KorPaEv вне форума Ответить с цитированием
Старый 19.08.2011, 14:23   #6
TranceSmile
Смайлик :)
Форумчанин
 
Аватар для TranceSmile
 
Регистрация: 12.12.2010
Сообщений: 445
По умолчанию

Код:
div#content_pic_ul ul a

        {
        text-decoration:none;
        display:block;
        min-width:123px;
        width:auto !impotrant;
        min-height:123px;
        height:auto !important;
        }
Должно помочь
Самый перспективный framework Yii (c)
TranceSmile вне форума Ответить с цитированием
Старый 19.08.2011, 17:23   #7
KorPaEv
Пользователь
 
Аватар для KorPaEv
 
Регистрация: 08.07.2011
Сообщений: 42
По умолчанию

Цитата:
Сообщение от TranceSmile Посмотреть сообщение
Код:
div#content_pic_ul ul a

        {
        text-decoration:none;
        display:block;
        min-width:123px;
        width:auto !impotrant;
        min-height:123px;
        height:auto !important;
        }
Должно помочь
Спасибо! Как дела с кроссбраузерностью?
Created by KorPaEv...
KorPaEv вне форума Ответить с цитированием
Старый 19.08.2011, 19:15   #8
TranceSmile
Смайлик :)
Форумчанин
 
Аватар для TranceSmile
 
Регистрация: 12.12.2010
Сообщений: 445
По умолчанию

Цитата:
Сообщение от KorPaEv Посмотреть сообщение
Спасибо! Как дела с кроссбраузерностью?
Должно быть нормально)
Самый перспективный framework Yii (c)
TranceSmile вне форума Ответить с цитированием
Старый 20.08.2011, 12:42   #9
navodri
Пользователь
 
Аватар для navodri
 
Регистрация: 20.04.2011
Сообщений: 11
По умолчанию

с кроссбраузерностью всё гуд!
Как научиться электронике?
http://radiobook.ho.ua/
navodri вне форума Ответить с цитированием
Старый 22.08.2011, 08:39   #10
KorPaEv
Пользователь
 
Аватар для KorPaEv
 
Регистрация: 08.07.2011
Сообщений: 42
По умолчанию

Ок, всем спасибо!
Created by KorPaEv...
KorPaEv вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить имя файла из ссылки(в конце ссылки нет имени файла) Человек_Борща Работа с сетью в Delphi 11 05.06.2011 15:15
Не активен блок Ссылки и списки литературы. Word2010 (14) user__ Microsoft Office Word 4 19.04.2011 10:52
Ссылки в VB 6 serega112000 Помощь студентам 0 02.02.2010 23:42
Ссылки Принц HTML и CSS 1 31.05.2008 15:46