Форум

dotwatt · #1 (**permalink**) 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 · #2 (**permalink**) 28.06.2012, 08:57

Сообщение от dotwatt

В этом коде текст располагается вверху каждого слоя.
1). Как его расположить посредине?

Таблички тебе в помощь...

ksa · #3 (**permalink**) 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 · #4 (**permalink**) 28.06.2012, 09:04

Сообщение от dotwatt

Является ли мой способ самым эффективным решением задачи

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

Aetae · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 28.06.2012, 09:58

devote, читаем посты внимательнее.

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

devote · #9 (**permalink**) 28.06.2012, 10:32

Сообщение от Aetae

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

ну собственно для этого в CSS и создали эти свойства, что бы не юзать таблицы при обычной верстке.. Тем самым появляется некая гибкость, то что под каждое устройство можно диваки двигать как угодно.. что не скажешь о реальных встроенных таблицах.

dotwatt · #10 (**permalink**) 29.06.2012, 00:08

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

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

Форум

Справочник

Discord чат

Курсы javascript