Форум АНТИЧАТ - [HTML, Css] - Задай вопрос, получи ответ

#11

18.01.2008, 13:33

Helios

Постоянный

Регистрация: 14.01.2007

Сообщений: 459

Провел на форуме:
1469995

Репутация: 589

Отправить сообщение для Helios с помощью ICQ

Цитата:

Сообщение от -=lebed=-

Может и легче, но я хочу через CSS сделать сие дело...

Up: вот сделал как рекомендовал Helios

Код:

<body>
<table align="center" id="1" cellspacing="0" cellpadding="0">
  <tr>
    <th><span class="logo1"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="285" height="36"/></a></span></th>
    <th><span class="logo2"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="178" height="36"/></a></span></th>
    <th><span class="logo3"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="205" height="36"/></a></span></th>
  </tr>
</table>
</body>

style.css

Код:

body {
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0;
}

a
{
  background: top left;
}
a:hover
{
  background-position: bottom left;
}

.logo1 a img 
	{
	background: url(images/logo_1.png);
	}
	
.logo1 a:hover img
{
	background-position: bottom left;	 
}

.logo2 a img 
	{
	background: url(images/logo_2.png);
	}
	
.logo2 a:hover img
{
	background-position: bottom left;	 
}

.logo3 a img 
	{
	background: url(images/logo_3.png);
	}
	
.logo3 a:hover img
{
	background-position: bottom left;	 
}

Т.е. фоновая картинка в два раза больше ячейки таблицы по высоте, в начале отображается верхняя часть, при наведении курсора - нижняя. В принципе всё работает ок! Но в IE ячейки таблицы обраблены рамкой синего цвета, в Опере такого нету - там всё норм. В чём трабл?

Код:

body {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

* a img {border: none 0px;}
a img {border: none 0px;}

.logo1 a img {background: url(images/logo_1.png) no-repeat top left;}
.logo1 a:hover img {background-position: bottom left;}
	

.logo2 a img {background: url(images/logo_2.png) no-repeat top left;}
.logo2 a:hover img {background-position: bottom left;}

.logo3 a img {background: url(images/logo_3.png) no-repeat top left;}
.logo3 a img:hover {background-position: bottom left;}

Так будет лучше и оптимальнее, + убрана рамка вокруг картинок в ссылке

Последний раз редактировалось Helios; 18.01.2008 в 14:14..