Проблема с версткой макета

VJiK · December 4, 2009

Сижу мучаю макет... не представлю как это сделать, может здесь смогу помочь :blink:

Вот макет: http://predvoditelev.ru/del/maket.zip (2.7mb)

Превью:

Общий фон (тёмносерая текстура) - размножаем (ФОН1).

Основная часть (светлосерая текстура) - размножаем (ФОН2). Эта часть фикс. по ширине - распологаем по центру.

Тень от основной части должна уходить за пределы экрана без появления прокрутки (ТЕНЬ).

Футер прибиваем к низу.

Код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Заголовок страницы</title>
	<style type="text/css">

		html, body, h1, h2, h3, h4, h5, h6, form, ul, ol, li, p, table, td, th, img { margin: 0; padding: 0; border: 0; }

		BODY { background: #130706 url(../images/bg.jpg) repeat 0 0; color: #7a6b58; font: 12px/15px Arial, Helvetica, sans-serif; }

		HTML, BODY { height: 100%; }
		.l-all { margin: 0 auto; width: 1250px; height: 100%; }
		.l-container { min-height: 100%; }
		.l-wrap { padding-bottom: 268px; }
		.l-footer { height: 268px; margin-top: -268px; }

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

		.l-container { height: 100%; }

	</style>
	<![endif]-->
</head>
<body><div class="l-all">

<div class="l-container"><div class="l-wrap">
	Основная часть
</div></div>

<div class="l-footer">
	Подвал
</div>

</div></body>
</html>

Собствено ФОН1 в BODY, ФОН2 в l-container. А вот куда тень деть не понятно

Светлана Г. · December 5, 2009

Не понятна эта запись:

<div class="l-wrap l-base">

В таблице стилей описаны эти классы поотдельности.

Пожалуйста, разъясните, как это работает.

Спасибо заранее.

VJiK · December 5, 2009

Не понятна эта запись:
<div class="l-wrap l-base">
В таблице стилей описаны эти классы поотдельности.
Пожалуйста, разъясните, как это работает.
Спасибо заранее.

Всё просто - этот слой использует CSS обоих классов.

DjTarik · December 5, 2009

Где это фон до низа тянутся небудет? Если его на боди повесить.
Без никаких дивов дополнительных все тянется как надо.

Для того, чтобы прижать футер книзу - ставим боди и хтмл - 100% по васоте. А следовательно, фон у боди растянется именно на 100% экрана - а всё, что будет идти ниже - будет без фона.

Вы предлагали другой вариант (см. сообщения 3 и 4 в этой теме).
А если в доп. див запихнуть - не будет футер прибиваться.
Не надо советовать то, что не проверено.

В доп див - тоже 100% - и футер любым способом - и через отрицателный маржин - и через позиционирование.

В той теме, что я приводил - мы это уже обсуждали как с mishka2, так и с psywalker

mishka · December 5, 2009

Для того, чтобы прижать футер книзу - ставим боди и хтмл - 100% по васоте. А следовательно, фон у боди растянется именно на 100% экрана - а всё, что будет идти ниже - будет без фона.

Еще как тянется.

<!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></title>
	<style type="text/css">
	html{
		height:100%;
	}
	body{
		margin:0;
		height:100%;
		background:url(bg-body.gif) repeat-y 50% 0;
	}
	#wrapper{
		min-height:100%;
	}
	* html #wrapper{
		height:100%;
	}
	#main{
		width:800px;
		margin:0 auto;
		overflow:hidden;
		padding:0 0 50px;
	}
	#footer{
		width:800px;
		height:50px;
		margin:-50px auto 0;
		background:#62b0ff;
		overflow:hidden;
		position:relative;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div id="main">
		<p>Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.</p>
		<p>Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.</p>
		<p>Ligula lorem Vestibulum enim Quisque pede tellus ut magna Aenean orci. Elit sapien feugiat Vestibulum orci neque purus pretium at laoreet Integer. Phasellus penatibus convallis pellentesque ac Phasellus nunc Curabitur Donec interdum dictumst. Tincidunt hac elit accumsan est adipiscing vel.</p>
		<p>Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.</p>
		<p>Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.</p>
		<p>Ligula lorem Vestibulum enim Quisque pede tellus ut magna Aenean orci. Elit sapien feugiat Vestibulum orci neque purus pretium at laoreet Integer. Phasellus penatibus convallis pellentesque ac Phasellus nunc Curabitur Donec interdum dictumst. Tincidunt hac elit accumsan est adipiscing vel.</p>
	</div>
</div>
<div id="footer">
	footer
</div>
</body>
</html>

psywalker · December 5, 2009

Ххааха, тема пошла по 10-му кругу. А я не учавствую ребят :blink:

DjTarik · December 5, 2009

Еще как тянется.

O_o... Блин... Вроде работает. Да 100пудова был какой-то затуп, почему я отказался от такого варианта. Вспомню (когда протестю) - отпишу обязательно. А пока признаю - вариант действительно работает. =)))

Буду разбираться...

VJiK · December 5, 2009

В доп див - тоже 100% - и футер любым способом - и через отрицателный маржин - и через позиционирование.
В той теме, что я приводил - мы это уже обсуждали как с mishka2, так и с psywalker

Привидите пример с двумя дивами 100% по высоте, пожалуйста.

psywalker · December 5, 2009

O_o... Блин... Вроде работает. Да 100пудова был какой-то затуп, почему я отказался от такого варианта. Вспомню (когда протестю) - отпишу обязательно. А пока признаю - вариант действительно работает. =)))
Буду разбираться...

У меня тоже кстати был, точно помню..странная тема, щас проверяю, всё нормал работает, прикол :blink:

mishka · December 5, 2009

O_o... Блин... Вроде работает. Да 100пудова был какой-то затуп, почему я отказался от такого варианта. Вспомню (когда протестю) - отпишу обязательно. А пока признаю - вариант действительно работает. =)))

У меня тоже кстати был, точно помню..странная тема, щас проверяю, всё нормал работает, прикол

Магия :blink:

на самом деле если на html задать какойто бг(например #fff), то тогда небудет работать, просто это надо знать и иметь ввиду.

Привидите пример с двумя дивами 100% по высоте, пожалуйста.

Непонял вопроса. Я буду рад если будем на ТЫ.

VJiK · December 5, 2009

Непонял вопроса. Я буду рад если будем на ТЫ.

Окей =)

Вот что-то подобное - чтобы wrap1 и wrap2 тянулся на всю высоту, и футер был прибит к низу.

В wrap1 и wrap2 бэкграунды должны тянутся на всю высоту.

Edited December 5, 2009 by VJiK

mishka · December 5, 2009

<!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></title>
	<style type="text/css">
	html{
		height:100%;
	}
	body{
		margin:0;
		height:100%;
		background:url(bg-body.gif) repeat-y 50% 0;
	}
	#wrapper{
		height:100%;
	}
	.wrap{
		min-height:100%;
		width:800px;
		margin:0 auto;
		background:#ff0;
	}
	* html .wrap{
		height:100%;
	}
	#main{
		width:100%;
		overflow:hidden;
		padding:0 0 50px;
	}
	#footer{
		width:800px;
		height:50px;
		margin:-50px auto 0;
		background:#62b0ff;
		overflow:hidden;
		position:relative;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap">
		<div id="main">
			<p>Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.</p>
			<p>Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.</p>
			<p>Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.</p>
			<p>Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.</p>
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>
</body>
</html>

Edited December 5, 2009 by mishka2

VJiK · December 5, 2009

mishka2, в твоём примере можно задать бг только для одного слоя - .wrap.

Необходимо чтобы можно было задавать бг для 2х слоёв (или 3х, если учитывать то, что можно бг в BODY засунуть).

Sign In

Проблема с версткой макета

Question

Link to comment

Share on other sites

37 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information