Помогите с вёрсткой

Статус
В этой теме нельзя размещать новые ответы.
able

able

Гуру форума
Регистрация
5 Апр 2008
Сообщения
221
Реакции
71
Всем привет!

Верстаю блочно :)

В общем задача такая -- посередине есть некий объект, он занимает большую часть экрана. Но если ширина экрана больше, чем ширина объекта, то по бокам надо добавлять бэкграунд (справа и слева -- разный).

Т.е. примерно так:

____________
|..|.............|.|
|1| .....2.....|3|
|_|________|_|

2 - объект, а 1 и 3 -- это поля, которые автоматически появляются при большой ширине экрана и заполняют пустоты какой-либо картинкой/бэкграундом.

Кто поможет?
 
сделай вложенность из 2ух элементов (div или table). Первый это все пространство с полями - там выставляешь в стиле background="нужный_файл", а вложенный элемент делашь без конкретно заданного размера с выравниванием по центру
 
xtorer написал(а):
сделай вложенность из 2ух элементов (div или table). Первый это все пространство с полями - там выставляешь в стиле background="нужный_файл", а вложенный элемент делашь без конкретно заданного размера с выравниванием по центру
Нажмите для раскрытия...

Я так и хотел, но мне необходимы справа и слева разные бекграунды..
 
Сделай три вложенных дива. А позицию бэкграунда для первого и второго дива можно задать в css, что бы они не перекрывали друг друга.
 
Z-index !
сначала верстаем два дива с z-index=1
первый див - влоат лефт, второй див флоат райт
заполняем дивы картинками любым способом
потом верстаем ещё один див с z-index=2 который будет служит ьврапером для основного контента, этот врапер и будет по середине всегда в него же и помещаем весь контент

таким способом можно сделать на любую ширину растягивание!
получается что два дива на первом слое которые слева и справа держаться и ещё один основной див на втором слое который содержит весь контент !
545tvt5cj2uv33t85bb7.jpg

если нужен рабочий пример - пишите, накатаю !
 
dralex, я сделал вот так:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style type="text/css">
<!--
body {
	margin: 0px;
}

#leftbg {
	float: left;
	background: #000000;
	z-index: 1;
	width: 50%;
	height: 910px;
	position: relative;
}

#rightbg {
	float: right;
	background: #CCCCCC;
	z-index: 1;
	width: 50%;
	height: 910px;
	position: relative;
	top: -1820px;
}
#center {
	margin: 0 auto;
	width: 1200px;
	top: 0px;
	position: relative;
	top: -455px;
	z-index: 2;
}

-->
</style></head>

<body>
<script type="text/javascript" src="js/swfobject.js"></script>
<div id="leftbg">1</div>
<div id="center">Требуется Flash-player.</div>
<div id="rightbg">1</div>

<script type="text/javascript">
  var so = new SWFObject("flash/center.swf","center","1200","910","7","#ffffff");
  so.write("center");
</script>

</body>
</html>

всё работает, но появляются длинные вертикальный скроллбары длинной в 2000пикселей.

правильно ли это? и как сделать лучше?
 
Зачем нужно ставить top: -1820px;?
Из-за него и появляется вертикальный скролл.
 
делается примерно так

<div style="overflow: hidden;">
<div style="position: relative; width: 500px;">
текст
<div style="position: absolute; left: -100px; top: 0; width: 100px; height: 50px; background: #ccc;">картинка слева</div>
<div style="position: absolute; right: -100px; top: 0; width: 100px; height: 50px; background: #ddd;">картинка справа</div>
</div>
</div>

в таком случае мин. ширина экрана будет = 500px, а все остальное будет обрезаться, боковые картинки в том числе (на больших разрешениях они будут видимыми).
 
Dewars выдал отличное решение =) вот только кажется мне, что будет проблема в IE6, ждем результатов )
 
BlackPawn написал(а):
Зачем нужно ставить top: -1820px;?
Из-за него и появляется вертикальный скролл.
Нажмите для раскрытия...

Иначе этот див внизу на 1820рх находится.

Dewars написал(а):
делается примерно так

<div style="overflow: hidden;">
<div style="position: relative; width: 500px;">
текст
<div style="position: absolute; left: -100px; top: 0; width: 100px; height: 50px; background: #ccc;">картинка слева</div>
<div style="position: absolute; right: -100px; top: 0; width: 100px; height: 50px; background: #ccc;">картинка слева</div>
</div>
</div>

в таком случае мин. ширина экрана будет = 500px, а все остальное будет обрезаться, боковые картинки в том числе (на больших разрешениях они будут видимыми).
Нажмите для раскрытия...

Сделал по такому макету, но див с контентом не по середине.. а слева. но справа всё дорисовывается
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху