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

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. А вот куда тень деть не понятно

DjTarik · December 4, 2009

Собствено ФОН1 в HTML, ФОН2 вырезаешь вместе с тенью и кидаешь в BODY. Это самый простой вариант.

А вообще - вот так можно http://forum.htmlbook.ru/index.php?showtopic=17118&hl= тогда проблемы с "неверным" центрированием не будет.

psywalker · December 4, 2009

А вот самый сложный http://psywalker.ru/Forum/Column_height/shadow_1px.html :blink:

VJiK · December 4, 2009

Собствено ФОН1 в HTML, ФОН2 вырезаешь вместе с тенью и кидаешь в BODY. Это самый простой вариант.

Этот вариант не пойдет, тк ФОН2 в BODY не множится дальше 100% (то есть ниже прокручиваешь - там этого фона уже нет).

Сейчас посмотрю вариант psywalker'a =)

А вот самый сложный http://psywalker.ru/Forum/Column_height/shadow_1px.html

В ИЕ7 дергается основная часть относительно футера на 1px.

psywalker · December 4, 2009

Сейчас посмотрю вариант psywalker'a =)
В ИЕ7 дергается основная часть относительно футера на 1px.

Сделай какую нибудь полоску фон нужной высоты и растяни её по ширине на весь футер. Это на кройняк!

VJiK · December 4, 2009

psywalker, в моём случае это дёрганье не критично. А в остальном твой вариант вроде бы идеально работает. Сейчас буду разбираться что там к чему в нем :blink:

Спасибо!

psywalker · December 4, 2009

psywalker, в моём случае это дёрганье не критично. А в остальном твой вариант вроде бы идеально работает. Сейчас буду разбираться что там к чему в нем
Спасибо!

Не за что, лети разбирайся - муха

VJiK · December 4, 2009

div.wrap1 { overflow: hidden; }

А это для чего? Убрал - вроде бы ничего не поменялось...

psywalker · December 4, 2009

div.wrap1 { overflow: hidden; }
А это для чего? Убрал - вроде бы ничего не поменялось...

Да это долгая история, мы там мудрили с задачей одной. Не вникай особо :blink: Главное если что-то убираешь, то всегда всё везде проверяй!

Edited December 4, 2009 by psywalker

VJiK · December 4, 2009

Да это долгая история, мы там мудрили с задачей одной. Не вникай особо Главное если что-то убираешь, то всегда всё везде проверяй!

Ну ясно

Спасибо ещё раз за помощь - выручил

Кстати...

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

Вот это для ИЕ6 можно не делать... фон в ИЕ6 в отличие от других браузеров - при сужении дальше фиксированного блока - не уменьшается

psywalker · December 4, 2009

Ну ясно
Спасибо ещё раз за помощь - выручил
Кстати...
body { width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");}
Вот это для ИЕ6 можно не делать... фон в ИЕ6 в отличие от других браузеров - при сужении дальше фиксированного блока - не уменьшается

Пожалуйста вжик, обращайся ещё

VJiK · December 4, 2009

Фух... Разобрался со всем и сделал :blink:

Вместо двух теней для левой и правой части - сделал одну.

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

<!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 { margin: 0; padding: 0; }

		BODY { background: url(../images/bg.jpg) repeat 0 0; color: #7a6b58; }

		HTML, BODY { height: 100%; min-width: 1249px; }
		.l-base { margin: 0 auto; width: 1249px; }
		.l-container { min-height: 100%; position: relative; overflow: hidden; }
		.l-wrap { padding-bottom: 268px; position: relative; }
		.l-footer { height: 268px; margin-top: -268px; position: relative; }
		.l-bg { position: absolute; width: 1249px; left: 50%; margin-left: -624px; top: 0; bottom: 0; }
		.l-bg .s { position: absolute; width: 1509px; left: -130px; top: 0; bottom: 0; height: 100%; background: url(../images/shadow.png) repeat-y 0 0; }
		.l-bg .bg { position: absolute; top: 0; bottom: 0; left: 0; width: 1249px; height: 100%; background: url(../images/bg_inner.jpg) repeat 0 0; }

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

		.l-container { height: 100%; overflow-y: visible; overflow-x: hidden; }
		.l-bg .s,
		.l-bg .bg { height: expression(document.body.clientHeight+'px'); }
		.l-bg .s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/shadow.png,sizingMethod=scale); //background: none; }

	</style>
	<![endif]-->
</head>
<body>

<div class="l-container">

	<div class="l-bg">
		<div class="s"></div>
		<div class="bg"></div>
	</div>

	<div class="l-wrap l-base">
		Контент
	</div>

</div>

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

</body>
</html>

psywalker · December 5, 2009

Молодец дружище, я верил в тебя :blink:

VJiK · December 5, 2009

Продолжим совершенствовать вариант :blink:

Теперь избавляемся от дёрганья в 1px (в моём варианте он, оказывается, был во всех браузерах). Это происходила из-за разного варианта центрирования для фона и для содержимого. Берем фон в ещё одну обертку и центрируем её с помощью margin: 0 auto; =)

В итоге получаем:

<!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 { margin: 0; padding: 0; }

		BODY { background: url(../images/bg.jpg) repeat 0 0; color: #7a6b58; }

		HTML, BODY { height: 100%; min-width: 1249px; }
		.l-base { margin: 0 auto; width: 1249px; }
		.l-container { min-height: 100%; position: relative; overflow: hidden; }
		.l-wrap { padding-bottom: 268px; position: relative; }
		.l-footer { height: 268px; margin-top: -268px; position: relative; }
		.l-bg { position: absolute; width: 100%; left: 0; top: 0; bottom: 0; height: 100%; }
		.l-bg .w { width: 1249px; margin: 0 auto; top: 0; bottom: 0; height: 100%; position: relative; }
		.l-bg .s { position: absolute; width: 1509px; left: -130px; top: 0; bottom: 0; height: 100%; background: url(../images/shadow.png) repeat-y 0 0; }
		.l-bg .bg { position: absolute; top: 0; bottom: 0; left: 0; width: 1249px; height: 100%; background: url(../images/bg_inner.jpg) repeat 0 0; }

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

		.l-container { height: 100%; overflow-y: visible; overflow-x: hidden; }
		.l-bg .s,
		.l-bg .bg { height: expression(document.body.clientHeight+'px'); }
		.l-bg .s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/shadow.png,sizingMethod=scale); //background: none; }

	</style>
	<![endif]-->
</head>
<body>

<div class="l-container">

	<div class="l-bg">
		<div class="w">
			<div class="s"></div>
			<div class="bg"></div>
		</div>
	</div>

	<div class="l-wrap l-base">
		Контент
	</div>

</div>

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

</body>
</html>

Edited December 5, 2009 by VJiK

psywalker · December 5, 2009

Молодец, не останавливайся Вжик, продолжай :blink:

VJiK · December 5, 2009

Ды вроде всё... проблем нету.

Куда уж дальше-то :blink:

PS 150е сообщение - теперь у мя статус "продвинутый"

Edited December 5, 2009 by VJiK

psywalker · December 5, 2009

Ды вроде всё... проблем нету.
Куда уж дальше-то
PS 150е сообщение - теперь у мя статус "продвинутый"

Молодец, а следующая ступень - эксперт

VJiK · December 5, 2009

А для эксперта - сколько сообщений необходимо?

psywalker · December 5, 2009

А для эксперта - сколько сообщений необходимо?

500

Но это не даёт самого главного - знаний, а их уже дают книги, так что лучше не быть экспертом, а знать и уметь разбираться в своём деле. :blink:

Edited December 5, 2009 by psywalker

VJiK · December 5, 2009

Ну это мне ещё долго тут активничать на форуме )))

mishka · December 5, 2009

Может лучше просто вырезать длинную полоску бг вместе с тенью и прорепитить на боди по игрику и посередине по иксу. Вместо того чтобы так сильно загромождать код.

Правда дергание в 1px останется.

Edited December 5, 2009 by mishka2

DjTarik · December 5, 2009

Может лучше просто вырезать длинную полоску бг вместе с тенью и прорепитить на боди по игрику и посередине по иксу. Вместо того чтобы так сильно загромождать код.
Правда дергание в 1px останется.

Я уже так предлагал - ответили, что типо фон до низу не растянется (если высота 100%). Но ведь можно его и в дополнительный див запихнуть - проблема сразу исчезнет. Смещение в 1 пиксель останется - это да. Но с таким фоном, как у автора - будет незаметно.

mishka · December 5, 2009

Я уже так предлагал - ответили, что типо фон до низу не растянется (если высота 100%). Но ведь можно его и в дополнительный див запихнуть - проблема сразу исчезнет. Смещение в 1 пиксель останется - это да. Но с таким фоном, как у автора - будет незаметно.

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

Без никаких дивов дополнительных все тянется как надо.

VJiK · December 5, 2009

Может лучше просто вырезать длинную полоску бг вместе с тенью и прорепитить на боди по игрику и посередине по иксу. Вместо того чтобы так сильно загромождать код.
Правда дергание в 1px останется.

Такой вариант понятен и имеет право на существование, но не в моём случае... Здесь критичен был момент дерганья + с длинной полоской не универсально и размер файла (этой полоски) большой.

Собственно, я бы так и сделал, если бы не нашел решения :blink:

Я уже так предлагал - ответили, что типо фон до низу не растянется (если высота 100%). Но ведь можно его и в дополнительный див запихнуть - проблема сразу исчезнет. Смещение в 1 пиксель останется - это да. Но с таким фоном, как у автора - будет незаметно.

Вы предлагали другой вариант (см. сообщения 3 и 4 в этой теме).

А если в доп. див запихнуть - не будет футер прибиваться.

Не надо советовать то, что не проверено.

Edited December 5, 2009 by VJiK

mishka · December 5, 2009

Такой вариант понятен и имеет право на существование, но не в моём случае... Здесь критичен был момент дерганья + с длинной полоской не универсально и размер файла (этой полоски) большой.

Ну если это дергание критично, то конечно надо искать выход.

А вот насчет картинки несоглашусь. Не так уж намного она увеличится по весу. И это не так плохо в сравнении с слишком запутанным кодом.

Выложи плс решение.

Edited December 5, 2009 by mishka2

VJiK · December 5, 2009

Ну если это дергание критично, то конечно надо искать выход.
А вот насчет картинки несоглашусь. Не так уж намного она увеличится по весу. И это не так плохо в сравнении с слишком запутанным кодом.
Выложи плс решение.

Ну картинка у меня получалось существенных размеров и чуть увеличить код - стоило уменьшения размера картинки :blink:

Решение выкладывал - см. сообщение #14 в этой теме.

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

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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information