Форум Сайтостроение Веб-строительство

Проблема с вёрсткой таблицы – дёрганье ячеек...

T1
На сайте с 10.07.2012
Offline
115
Trader1985
1064

Здравствуйте, уважаемые веб-строители!

Вот, решил тоже освоить азы CSS и HTML вёрстки :D:

В общем, склепал статическую страницу для своего ГС:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>

<style>
table {
width: 630px;
margin: auto; 
text-align: center; 
font-weight: bold;
border-spacing: 10px;
}
td {
border-width: 1px;
border-style: solid;
}
td:hover {
border-width: 3px;
border-style: solid;
color: red;
}
table img{
width: 100%;
}
a:hover {
color: red;
}
a {
color: black;
text-decoration: none;
}
</style>

</head>
<body>

<table >
<tr>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
</tr>

<tr>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
</tr>

<tr>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
</tr>

<tr>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
</tr>

<tr>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>
<td style="border-width:0px"></td>
<td style="border-width:0px"></td>
</tr>

</table>


</body>
</html>

Однако, есть небольшая проблемка:

у меня при наведении мышки, в CSS для ячейки указывается свойство td:hover { border-width: 3px; а ДО наведения, у таблицы ячейки ширина один пиксель td {border-width: 1px;.

В общем, при наведении курсора мышки: таблица дёргается, так как два пикселя прибавляются.

Вопрос: объясните пожалуйста, как схоронить жирность при наведении курсора, но убрать дёрганье ячеек?

Р
На сайте с 07.02.2013
Offline
178
рецидивист
#1

можно уменьшить размер ячейки при наведении

можно применить ::after или ::before

можно border заменить на box-shodow

можно задать размеры td и прописать в td:hover box-sizing:border-box;

Интересно, а как правильно сделать?

---------- Добавлено 26.04.2014 в 23:03 ----------

Сделал так: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Документ без названия</title>



<style>

ul{width: 440px;margin:0 auto;padding:0;}

li{display:block;float:left;width:96px;height:146px;margin:5px;text-align:center;padding:2px;}

li:hover{background:red;}

a{width:90px;height:140px;display:block;border:1px solid #000;padding:2px;background:#FFF;}

a:hover{border:1px solid red;}

.clear{clear:both;}



</style>



</head>



<body>



<ul>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<li><a href="" target="_blank"><p>ТЕКСТ</p><img src="Картинка.jpeg" alt="Картинка"></a></li>

<div class="clear"></div>



</ul>



</body>

</html>

А как правильно сделать?

---------- Добавлено 26.04.2014 в 23:10 ----------

Сделал ещё так: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Документ без названия</title>



<style>

table {

width: 630px;

margin: auto; 

text-align: center; 

font-weight: bold;

border-spacing: 10px;

}

td {

border:1px solid #FFF;

padding:3px;

}

td:hover {

border: 1px solid red;

background:red;

}

table img{

width: 100%;

}

a:hover {

color: red;

border:1px solid red;

}

a {

color: black;

text-decoration: none;

display:block;

background:#FFF;

border:1px solid #000;

padding:5px;

}

</style>



</head>

<body>



<table >

<tr>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

</tr>



<tr>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

</tr>



<tr>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

</tr>



<tr>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

</tr>



<tr>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td><a href="" target="_blank">ТЕКСТ<img src="Картинка.jpeg" alt="Картинка"></a></td>

<td style="border-width:0px"></td>

<td style="border-width:0px"></td>

</tr>



</table>





</body>

</html>

А как всё таки правильно сделать?

Я понимаю, "голь на выдумки хитра", но как правильно?

Помогите убрать отступы у Hover-меню 43% посетителей заходят с
T1
На сайте с 10.07.2012
Offline
115
Trader1985
#2

Спасибо! Второй вариант – то что надо! 🍻

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий