Списки и ссылки

KorPaEv · 18.08.2011

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

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

Картинки имеют определенный размер например 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;
 	}

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

tigra60 · 18.08.2011

Код:

div#content_pic_ul ul a

        {
        text-decoration:none;
        display:block;
        width:123px;
        height:123px;
        }

KorPaEv · 19.08.2011

tigra60 сказал(а):
Код:

div#content_pic_ul ul a { text-decoration:none; display:block; width:123px; height:123px; }

Спасибо помогло...и сразу вопрос, я так понял мы создаем мнимый блок заданных размеров?но если у меня будет ситуация что я поменяю размеры картинок, нельзя ли поставить размеры 100% чтобы блок сам подстраивался по размер картинки??или же придется вручную менять??

tigra60 · 19.08.2011

я так понял мы создаем мнимый блок заданных размеров?

Не совсем так. Для строчного элемента, каким по умолчанию является ссылка, применима только ширина. А чтобы применить и высоту, мы придаем этому элементу свойства блокового. То же самое касается вертикальных отступов и полей. То есть:

Код:

a {
    height:20px;
    margin: 10px 0;
    padding 5px 0;
}

Работать не будет.
Нужно добавить display:block;, но не забывать при этом, что элемент стал блоковым со всеми вытекающими последствиями:

Код:

a {
    height:20px;
    margin: 10px 0;
    padding 5px 0;
    display:block;
}

Лучше всего, просто самому попробовать поиграться с размерами. По умолчанию, блок имеет ширину 100%, а высоту - по высоте содержимого. Возможно, размеры можно вообще не указывать.

Вообще, хорошая практика - указывать размеры картинки в атрибутах тэга IMG:

Код:

<img src="images/picture.jpg alt="Картинко шикарное" width="500" height="200" />

При этом страница не будет припадочно прыгать по мере загрузки, т.к. браузер сразу отведет для картинки необходимое место (даже до загрузки CSS).

KorPaEv · 22.08.2011

tigra60 сказал(а):
я так понял мы создаем мнимый блок заданных размеров?

Нажмите, чтобы раскрыть...

Не совсем так. Для строчного элемента, каким по умолчанию является ссылка, применима только ширина. А чтобы применить и высоту, мы придаем этому элементу свойства блокового. То же самое касается вертикальных отступов и полей. То есть:

Код:

a { height:20px; margin: 10px 0; padding 5px 0; }

Работать не будет.
Нужно добавить display:block;, но не забывать при этом, что элемент стал блоковым со всеми вытекающими последствиями:

Код:

a { height:20px; margin: 10px 0; padding 5px 0; display:block; }

Лучше всего, просто самому попробовать поиграться с размерами. По умолчанию, блок имеет ширину 100%, а высоту - по высоте содержимого. Возможно, размеры можно вообще не указывать.

Вообще, хорошая практика - указывать размеры картинки в атрибутах тэга IMG:

Код:

<img src="images/picture.jpg alt="Картинко шикарное" width="500" height="200" />

При этом страница не будет припадочно прыгать по мере загрузки, т.к. браузер сразу отведет для картинки необходимое место (даже до загрузки CSS).

Спасибо, все стало намного яснее.

Списки и ссылки

KorPaEv

Member

tigra60

Спасатель

KorPaEv

Member

tigra60

Спасатель

KorPaEv

Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей