Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Чередование светлых и темных строчек (https://javascript.ru/forum/dom-window/29439-cheredovanie-svetlykh-i-temnykh-strochek.html)

dotwatt 28.06.2012 00:42
Чередование светлых и темных строчек
 
В этом коде текст располагается вверху каждого слоя.
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>

ksa 28.06.2012 08:57
Цитата:
Сообщение от dotwatt
В этом коде текст располагается вверху каждого слоя.
1). Как его расположить посредине?
Таблички тебе в помощь... :)

ksa 28.06.2012 09:02
Цитата:
Сообщение от dotwatt
Как его расположить посредине?
Как вариант...

<!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>

ksa 28.06.2012 09:04
Цитата:
Сообщение от dotwatt
Является ли мой способ самым эффективным решением задачи
С "прямым" указанием класса решение будет верным даже для старых браузеров.
Хотя есть уже и более лаконичный вариант в ЦСС
http://htmlbook.ru/css/nth-child

Aetae 28.06.2012 09:04
Современное решение:
<!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 - простое решение для текста посередине, не будет работать если строк больше чем одна.

devote 28.06.2012 09:22
Цитата:
Сообщение от Aetae
Современное решение:
ага:
<!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>
и писец современному решению

devote 28.06.2012 09:29
тогда уж вот современное:
<!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>

Aetae 28.06.2012 09:58
devote, читаем посты внимательнее.

P.S. А всякие бредни с превращением div в table и обратно я вообще не перевариваю. =\

devote 28.06.2012 10:32
Цитата:
Сообщение от Aetae
А всякие бредни с превращением div в table и обратно я вообще не перевариваю. =\
ну собственно для этого в CSS и создали эти свойства, что бы не юзать таблицы при обычной верстке.. Тем самым появляется некая гибкость, то что под каждое устройство можно диваки двигать как угодно.. что не скажешь о реальных встроенных таблицах.

dotwatt 29.06.2012 00:08
Спасибо за решения, CSS3 - это просто агонь со своими псевдоклассами.

Теперь у меня назрел еще один вопрос: DIV-ы или таблицы?
Таблицы простые, как два пальца, а слои эти так и норовят друг на друга понаезжать :-E

Deff 29.06.2012 00:17
dotwatt,
таблицы пока наиболее навороченно поддержаны браузом и кроссбраузерны, в отличие от div

ksa 29.06.2012 09:20
Цитата:
Сообщение от dotwatt
Теперь у меня назрел еще один вопрос: DIV-ы или таблицы?
В уставе караульной службы была такая фраза - "часовой, умело действуя штыком и прикладом, должен отражать нападение, до прибытия основных сил"...
Вот и ты умело действуй таблицами и дивами. :)


Часовой пояс GMT +3, время: 11:52.