Выравнивание слоев в ячейке

Tata_N · October 18, 2010

Здравствуйте! Надеюсь, что разделом не ошиблась. Извините за чайниковский вопрос, но не получается выравнять слои - наверное что-то неправильно понимаю.

Есть ячейка таблицы, в которую нужно поместить многослойную резиновую шапку (фон из body, все остальные картинки с прозрачным фоном) высотой 288px:

Слой 1: .head2 – здесь лежит картинка 1024 Х 288, выравненная по левому краю , на ней сверху Н1

Слой 2: .head3 – это картинка «правого нижнего угла» - я ее сделала тоже высотой 288, но она приблизительно половину высоты занимает

эти 2 слоя нормально легли и нормально «резинятся» друг относительно друга.

Слой 3: .head4 - на слой 2 нужно наложить логотип, поместить его фоном нельзя, т.к. он меняется (а может можно?) Вот проблема именно с логотипом – он выравнивается по правому краю, но не могу выравнять его по высоте – в том коде, что прилагаю он находится в том месте, где нужно, но код сильно некрасивый с этими переводами строки – хочется в стилях это сделать. В стилях отсюда все убрала, т.к. толку никакого нет: вставляла и vertical-align, padding, margin-top - все, на что фантазии хватило. Наверное, из-за недостатка опыта не чувствую каких-то нюансов

Слой 4: текст <?php echo $text; ?>

Его нужно расположить между логотипом и фрагментом (на фиксированном расстоянии от левого края) картинки слоя 1 и прижать к нижнему краю, так, чтобы он переносился с учетом размера экрана – т.е. у него фиксированное расстояние от правого и левого краев, но переменная длина и высота. - здесь вообще не представляю, как это сделать

А может вообще у меня неправильный подход к вопросу?

Ссылку дать не могу – на Денвере его мучаю, и уже столько перебрала вариантов, что совсем запуталась - логотип все равно стоит в правом верхнем углу. Прилагаю кусок кода (текущее состояние, так сказать), где заполняется ячейка, и CSS:

<body><table border="1"><tr><td><table cellspacing="1"><tr><td colspan="2" class="head2">
<div><h1><?php echo $h1 ?></h1></div>
<div class="head3">
<div class="head4"><br /><br /><br /><br /><br /><br /><br /><br /><?php echo '<img src="'.$binfo.'/'.$name.'-'.$idl.'.gif" title="Сайт о косметике" alt="Сайт про косметику" width="116" height="116" border="0" onclick="window.location.href=fpage"  />';
?></div></div>
<div class="head4"><?php echo $text; ?></div>
</td></tr>

body {
		   margin:6px 6px 6px 6px;
		   background:#4b1d18;
		   color:#FFFFFF;
		   font-size: 13px;
		   line-height:11px;
		   font-family: verdana,lucida,tahoma,arial;
		   text-align:center;
		   min-width:900px;
}

.head2 {
	background:#4b1d18 url(/wp-content/themes/fluid-blue/girls.png) no-repeat top left;
	font-family: tahoma,arial,verdana,lucida;
	font-weight:bold;
	font-size:12px;
	line-height:18px;
	text-align:right;
	padding: 3px 0px 2px 8px;
	width:100%;
	height:288px;
  }
.head3 {
	background: url(/wp-content/themes/fluid-blue/rb244.png) no-repeat top right;
	font-family: tahoma,arial,verdana,lucida;
	font-weight:bold;
	font-size:12px;
	line-height:18px;
	text-align:right;
	margin-top: -21px;
	margin-right:10;
	width:100%;
	height:288px;
  }

.head4 {
   align:right;
   }

table {
  width:100%;
  }
tr {
   height:18px; vertical-align:top;
   }
td {
  vertical-align:top;
  }

Заранее спасибо!

Edited October 18, 2010 by Tata_N

psywalker · October 18, 2010

Давай скриншот того, что хочешь в итоге получить.

Tata_N · October 18, 2010

Вот, типа этого в итоге должно быть (картинка другая - но это ведь неважно?):

psywalker · October 18, 2010

Отлично, а теперь коротко и ясно скажи, что ты хочешь получить.

Tata_N · October 18, 2010

Постараюсь:

1. выравнять логотип в стилях, а не БР-Р-Р-Р (<div class="head4"><br /><br /><br /><br /><br /><br /><br /><br /><?php echo '<img src="'.$binfo.'/'.$name.'-'.$idl.'.gif" title="Сайт о косметике" alt="Сайт про косметику" width="116" height="116" border="0" onclick="window.location.href=fpage" />';

?></div>)

2. расположить описание между логотипом и картинкой, чтобы оно занимало то пространство, которое между ними будет. Сейчас, по тому коду, что я привела, оно располагается ПОД шапкой, выравненное по правому краю на всю ширину шапки.

Надеюсь, что у меня получилось?

psywalker · October 18, 2010

1)

выравнять логотип в стилях

Выровнять по какому краю? Или по-середине, по вертикали?

2) Сделай по следующему принципу. Две колонки(это будет лого и картинка) по бокам, а по-середине контент(текст)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3 Колонки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 700px;}

	div.left,
	div.right { float: left; background: red; width: 300px;}
	div.right { float: right;}

	div.content { overflow: hidden; background: blue;}
</style>

<!--[if IE 6]>
<style type="text/css">

	body {width:expression(document.documentElement.clientWidth < 960 ? "960px" : "auto");}

	div.left { margin-right: -3px;}
	div.right {margin-left: -3px;}

	div.content {zoom: 1;}
</style>
<![endif]-->

</head>

<body>

	<div class="left">LEFT</div>

	<div class="right">RIGHT</div>
	<div class="content">CONTENTВы, как веб-разработчик, должны дорожить каждой минутой своего драгоценного времени, а не тратить его на «повторное изобретение колеса». Совсем необязательно из раза в раз создавать одни и те же макеты веб-страниц сайта, когда можно использовать готовые.

Готовые шаблоны хороши как раз тем, что для получения конечного результата достаточно внести в них незначительные корректировки и конечный продукт готов. При этом экономится уйма времени, которое, как известно, деньги!</div>


</body>
</html>

Tata_N · October 19, 2010

1) Выровнять по какому краю? Или по-середине, по вертикали?

Логотип должен располагаться в правом нижнем углу (с отступами, конечно, от нижнего и правого краев). Выравнивание вправо у меня получилось, а по вертикали - нет. Если я не ставлю БР-Р-Р-Р, то логотип располагается в правом ВЕРХНЕМ углу.

2) Сделай по следующему принципу. Две колонки(это будет лого и картинка) по бокам, а по-середине контент(текст)

на 3 колонки разбить не получится - левая картинка в реале не имеет четких границ, от нее идет "хвост" почти до логотипа. Я могла бы, наверное, разбить на 2 колонки - отделить логотип, но как тогда наложить Н1, чтобы он был прижат к правому краю? - у него длина 95 символов, - и он должен тогда располагаться поверх двух ячеек. Отдельной строкой таблицы <tr> Н1</tr> - не получится из-за картинки.

Edited October 19, 2010 by Tata_N

psywalker · October 19, 2010

Логотип должен располагаться в правом нижнем углу

Контейнер делаешь релатив, а логотип абсолютом и координируешь куда нужно.

на 3 колонки разбить не получится - левая картинка в реале не имеет четких границ, от нее идет "хвост" почти до логотипа. Я могла бы, наверное, разбить на 2 колонки - отделить логотип, но как тогда наложить Н1, чтобы он был прижат к правому краю? - у него длина 95 символов, - и он должен тогда располагаться поверх двух ячеек. Отдельной строкой таблицы <tr> Н1</tr> - не получится из-за картинки.

Я не совсем понял, что нужно, но если есть возможность, то сделай две колонки, а заголовок наложи так же как и логотип в первом случае абсолютом.

Tata_N · October 19, 2010

Контейнер делаешь релатив, а логотип абсолютом и координируешь куда нужно.

Спасибо! Вроде поняла, вечером попробую и напишу о результатах.

Насчет колонок подумаю.

psywalker · October 19, 2010

Спасибо! Вроде поняла, вечером попробую и напишу о результатах.
Насчет колонок подумаю.

Давай, удачи тебе

Tata_N · October 20, 2010

Мамадарагая как все оказалось запущено!

в общем, проблема у меня оказалась в том, что я не понимаю, кто относительно кого и на как далеко выравнивается.

Сегодня меня посетила удачная мысль - я на все стили навесила разноцветные рамки - теперь хоть понятно, кто какого размера и относительно кого и куда "гуляет" по шапке.

Я так и чувствовала, что чего-то важного недопонимаю

psywalker · October 20, 2010

Мамадарагая как все оказалось запущено!
в общем, проблема у меня оказалась в том, что я не понимаю, кто относительно кого и на как далеко выравнивается.
Сегодня меня посетила удачная мысль - я на все стили навесила разноцветные рамки - теперь хоть понятно, кто какого размера и относительно кого и куда "гуляет" по шапке.
Я так и чувствовала, что чего-то важного недопонимаю

Молодец. Практикуйся больше.

Sign In

Выравнивание слоев в ячейке

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information