Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.06.2012, 00:42
Интересующийся
Отправить личное сообщение для dotwatt Посмотреть профиль Найти все сообщения от dotwatt
 
Регистрация: 08.10.2011
Сообщений: 16

Чередование светлых и темных строчек
В этом коде текст располагается вверху каждого слоя.
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>
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2012, 08:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,157

Сообщение от dotwatt
В этом коде текст располагается вверху каждого слоя.
1). Как его расположить посредине?
Таблички тебе в помощь...
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2012, 09:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,157

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2012, 09:04
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,157

Сообщение от dotwatt
Является ли мой способ самым эффективным решением задачи
С "прямым" указанием класса решение будет верным даже для старых браузеров.
Хотя есть уже и более лаконичный вариант в ЦСС
http://htmlbook.ru/css/nth-child
Ответить с цитированием
  #5 (permalink)  
Старый 28.06.2012, 09:04
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,521

Современное решение:
<!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 - простое решение для текста посередине, не будет работать если строк больше чем одна.
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 28.06.2012, 09:22
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от 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>
и писец современному решению
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #7 (permalink)  
Старый 28.06.2012, 09:29
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

тогда уж вот современное:
<!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>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #8 (permalink)  
Старый 28.06.2012, 09:58
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,521

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

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

Последний раз редактировалось Aetae, 28.06.2012 в 10:01.
Ответить с цитированием
  #9 (permalink)  
Старый 28.06.2012, 10:32
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Aetae
А всякие бредни с превращением div в table и обратно я вообще не перевариваю. =\
ну собственно для этого в CSS и создали эти свойства, что бы не юзать таблицы при обычной верстке.. Тем самым появляется некая гибкость, то что под каждое устройство можно диваки двигать как угодно.. что не скажешь о реальных встроенных таблицах.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #10 (permalink)  
Старый 29.06.2012, 00:08
Интересующийся
Отправить личное сообщение для dotwatt Посмотреть профиль Найти все сообщения от dotwatt
 
Регистрация: 08.10.2011
Сообщений: 16

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Чередование изображениц с предварительной занрузкой Dom27 Элементы интерфейса 3 11.09.2010 23:48