Чередование светлых и темных строчек
В этом коде текст располагается вверху каждого слоя.
1). Как его расположить посредине? 2). Является ли мой способ самым эффективным решением задачи (чтобы светлые и темные строчки чередовались - я создаю для каждой из них новый слой)?
<html>
<head>
<style type="text/css">
.row_a
{
background: #eee;
height: 30px;
}
.row_b
{
background: #ddd;
height: 30px;
}
</style>
</head>
<body>
<div class="row_a" <p>this is div number 1</p></div>
<div class="row_b" <p>this is div number 2</p></div>
<div class="row_a" <p>this is div number 3</p></div>
<div class="row_b" <p>this is div number 4</p></div>
<div class="row_a" <p>this is div number 5</p></div>
</body></html>
|
Цитата:
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
table {
width: 100%;
margin: 0;
padding: 0;
border-spacing: 0;
}
.row_a {
background: #eee;
height: 30px;
}
.row_b {
background: #ddd;
height: 30px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tr>
<td class="row_a"><p>this is td number 1</p></td>
</tr>
<tr>
<td class="row_b"><p>this is td number 2</p></td>
</tr>
<tr>
<td class="row_a"><p>this is td number 3</p></td>
</tr>
<tr>
<td class="row_b"><p>this is td number 4</p></td>
</tr>
<tr>
<td class="row_a"><p>this is td number 5</p></td>
</tr>
</table>
</body>
</html>
|
Цитата:
Хотя есть уже и более лаконичный вариант в ЦСС http://htmlbook.ru/css/nth-child |
Современное решение:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div p
{
background: #eee;
height: 30px;
line-height:30px;
}
div p:nth-child(2n)
{
background: #ddd;
}
</style>
</head>
<body>
<div>
<p>this is div number 1</p>
<p>this is div number 2</p>
<p>this is div number 3</p>
<p>this is div number 4</p>
<p>this is div number 5</p>
</div>
</body></html>
line-height - простое решение для текста посередине, не будет работать если строк больше чем одна. |
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div p
{
background: #eee;
height: 30px;
line-height:30px;
}
div p:nth-child(2n)
{
background: #ddd;
}
</style>
</head>
<body>
<div>
<p>this is div number 1</p>
<p>this is div number 2</p>
<p>this is div number 3<br />ОПА!!!!</p>
<p>this is div number 4</p>
<p>this is div number 5</p>
</div>
</body></html>
и писец современному решению |
тогда уж вот современное:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {
display: table-row;
}
div.table {
display: table;
width: 100%;
}
div p {
height: 40px;
display: table-cell;
vertical-align: middle;
background: #eee;
}
div:nth-child(2n) p
{
background: #ddd;
}
</style>
</head>
<body>
<div class="table">
<div><p>this is div number 1</p></div>
<div><p>this is div number 2</p></div>
<div><p>this is div number 3<br />ОПА!!!!</p></div>
<div><p>this is div number 4</p></div>
<div><p>this is div number 5</p></div>
</div>
</body></html>
|
devote, читаем посты внимательнее.
P.S. А всякие бредни с превращением div в table и обратно я вообще не перевариваю. =\ |
Цитата:
|
Спасибо за решения, CSS3 - это просто агонь со своими псевдоклассами.
Теперь у меня назрел еще один вопрос: DIV-ы или таблицы? Таблицы простые, как два пальца, а слои эти так и норовят друг на друга понаезжать :-E |
| Часовой пояс GMT +3, время: 06:40. |