Небольшая помощь по цсс

нужно чтобы вокруг картинки на расстояние 3пикселя была рамка
вроде все правильно

.content {
padding: 2px;
border: 1px solid #ccc;
}


<a class="content" href="" ><img src="01.jpg" width=140 height=200 ></a>

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

Рейтинг как всегда

.content img {
padding: 3px ;
border: 1px solid #ccc;
}

Вокруг имаги будет отступ в 3px. И рамка в 1px.

+8 я поставил...
по проблему это не решает...
отсупа нету
а насчет 3 и 2 - это я просто опечатался

Код:

.content img { margin: 3px; border: 1px solid #ccc; }

цвет бэкграунда ещё укажи

Код:

.content img { margin: 3px; border: 1px solid #ccc; background-color: #fff; }

нет обводка не отсупает

Код:

<style> .content { margin: 2px; padding: 2px; border: 1px solid #ccc; } </style> <a class="content" href="" ><img src="images/tbg.gif" width=140 height=200  border="0"></a>

неа

Kn, всё как ты написал в первом посте, только класс добавляй к картинке, а не к ссылке

Попробуй так

Код:

<a href="" ><img src="images/tbg.gif" width=140 height=200  border="0" class="content"></a>

то есть не линку, а картинке задавать

ну или ещё изъёбней - вставлять всё это в <span> и ему класс задавать

действительно, так только в ИЕ работает
...
а такой вариант тебе чем не нравится? всюду работает:

Код:

<style> .content { padding: 3px; border: 1px solid #ccc; width:140px; } </style> <div class="content"><a href="" ><img src="images/tbg.gif" width=140 height=200  border="0"></a></div>

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

Keep3r Спасибо!
Все дело оказалось в том что не указан документ тайп....

А если усложнить задачу что бы при наведение на картинку стайл менялся
A.content:visited IMG { padding: 3px ; border: 1px solid #ccc; background:f1eccf;}
A.content:active IMG { padding: 3px ; border: 1px solid #ccc; background:f1eccf;}
A.content:hover IMG { padding: 3px ; border: 1px dashed #ccc; background:000;}
A.content:link IMG { padding: 3px ; border: 1px solid #ccc; background:f1eccf;}

не прокатило

в span засунь картику - сработает

у меня не сработало

поправь a.content:link на a.content
заработает в опере и фф. как сделать в ие - не знаю

просто сделать обводку которая меняется при наведение не проблема .. а вот отсупающая обводка и меняющийся бекграунд у меня ен получилось сделать

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

.content img {
padding: 3px ;
border: 1px solid #ccc;
background:f1eccf;
}

Скинь ссылку на страницу, в которой ты хочешь это сделать.

З.Ы Если это тумбы, то есть вид кода такой <a href="#"><img src="#" /></a> то можно использовать следущую возможность.

.content a:hover img {border: 1px solid #нужный_цвет}

Мне надо не просто обводку а отстояющию на Х писелей и чтобы цвет фона менялся...

не совсем уверен в том что тебе нужно именно это

Код:

<style type="text/css"> <!-- .1{padding: 3px; border: 2px solid #000000;} .2{padding: 3px; border: 2px solid #FF0000;} --> </style> <a href="http://www.minimaximus.com"><img src="minimaximus.jpg" width="182" height="146" onMouseOver="this.className='1'" onMouseOut="this.className='2'"></a>

в опере работатет, там уж в цсс под свои нужды подработай.
п.с. совет на будуюшее : ЦСС в опере и ИЕ никогда не подогнать так чтобы они отображались одинаково, ибо заебетесь! проверенно.

а да ... хочу +16

Kn писал:

Кто нить знает как проапргрейдить вот этот стиль, чтобы при наведение менялся бекграунд и цвет обводки .content img { padding: 3px ; border: 1px solid #ccc; background:f1eccf; }

.content a:hover img {
padding: 3px ;
border: 1px solid новый_цвет;
background: новый_цвет;
}

меняется и цвет границы и бекграунд (обводка это бордер?)
работает в опере и в IE

minimaximus: я так сам умею не подходит
Petek: именно так я и пробовал - не работает

Kn писал:

minimaximus: я так сам умею не подходит Petek: именно так я и пробовал - не работает

а, сорри, у меня работало так как я использовал не класс .content, а #content

вот правильный вариант для класса

img.content {
padding: 3px ;
border: 1px solid #FFFFFF;
background: #00CCFF;
}
a:hover img.content {
padding: 3px ;
border: 1px solid #FF6600;
background: #00CC33;
}

а к нужной картинке надо добавить class="content"