Помогите сверстать простой шаблон

kein · 03.01.2010

Что-то ни как не могу сверстать шаблон

Такие требования:
Шаблон занимает 100% ширины и высоты, никакого скрола.
Часть "В". Высота задается в пикселях.
Остальное по высоте экрана занимает зеленая область, которая содержит в себе другие части:
D - ширина 100%, высота в пикселях(например 30пх)
E,A и C по высоте на столько на сколько возможно(начиная от D и до B).
Е и С в ширину фиксированные(40 и 240пх) а область А занимает все оставшееся место.

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

И желательно это сделать без таблиц.

toxin · 03.01.2010

А посмотрите лучше вот ету статейку, я уверен вы найдете не мало интерестного и полезного для себя
http://www.w3school.ru/blog/web-development/free-css-layouts-and-templates.html

С уважением toxin...

gor · 03.01.2010

Накидал посмотри может где-то ,что проглядел

Код:

<!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=utf-8" />
<title>Untitled Document</title>
<style>
body,html{padding:0;margin:0;width:100%;height:100%}
</style>
</head>

<body>
<!--green -->
<div id="green" style="height:100%;">
<!--D -->
<div id="D" style="width:100%;height:30px;background:#66FFFF;position:absolute;top:0;z-index:100">
Box D
</div>
<!--D -->


<!--E -->
<div id="E" style="width:40px;background:#0099FF;float:left;height:100%;position:absolute;z-index:10;">
	<div style="margin-top:30px;margin-bottom:100px">
Box E
	</div>
</div>
<!--E -->

<!--A -->
<div id="A" style="background:#CCFFCC;height:100%;width:100%;right:240px;position:absolute;z-index:1;">
	<div style="margin-left:280px;margin-bottom:100px;margin-top:30px">
		This A-boxThis box       
	</div>
</div>
<!--A -->

<!--C -->
<div id="C" style="width:240px;background:#66FF99;float:right;height:100%;">
	<div style="margin-bottom:100px;margin-top:30px">
		This C-box
        
	</div>
</div>
<!--C -->


</div>
<!--green -->
<div id="B" style="width:100%;background:#c00;height:100px; clear:both;position:absolute;bottom:0px;z-index:200">
Box B height 100px
</div>
</body>
</html>

kein · 04.01.2010

@toxin
про сайт с шаблонами я знаю. Но того который мне нужен я не нашел, а делая основываясь на других шаблонах я не достиг нужного результат(верстка мое слабое место

)
@gor
Почти то что надо, но проблема, что в div'е A может быть некий контент, который будет больше высоты блока А, и тогда нужна прокрутка, в пределах видимости блока, но не получается. Я с такой же проблемой столкнулся когда делал сам.

toxin · 04.01.2010

kein, я в верстке не силен, чем мог помог...

С уважением toxin...

gor · 04.01.2010

Задайте в стилях блока A свойство overflow:auto; и будет вам скролл

Код:

<!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=utf-8" />
<title>Untitled Document</title>
<style>
body,html{padding:0;margin:0;width:100%;height:100%}
</style>
</head>

<body>
<!--green -->
<div id="green" style="height:100%;">
<!--D -->
<div id="D" style="width:100%;height:30px;background:#66FFFF;position:absolute;top:0;z-index:100">
Box D
</div>
<!--D -->


<!--E -->
<div id="E" style="width:40px;background:#0099FF;float:left;height:100%;position:absolute;z-index:10;">
	<div style="margin-top:30px;margin-bottom:100px">
Box E
	</div>
</div>
<!--E -->

<!--A -->
<div id="A" style="background:#CCFFCC;height:100%;width:100%;right:240px;position:absolute;z-index:1;overflow:auto">
	<div style="margin-left:280px;margin-bottom:100px;margin-top:30px;">
	
        
	</div>
</div>
<!--A -->

<!--C -->
<div id="C" style="width:240px;background:#66FF99;float:right;height:100%;">
	<div style="margin-bottom:100px;margin-top:30px">
		This C-box
        
	</div>
</div>
<!--C -->


</div>
<!--green -->
<div id="B" style="width:100%;background:#c00;height:100px; clear:both;position:absolute;bottom:0px;z-index:200">
<h1>Box B height 100px</h1>
</div>
</body>
</html>

Помогите сверстать простой шаблон

kein

Частный случай

toxin

Well-Known Member

gor

Well-Known Member

kein

Частный случай

toxin

Well-Known Member

gor

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей