Здесь уже наверно достали вопросами про див вёрстку, но вроде читал пробовал и не могу допереть как это сделать. Опыт в CSS и вёрстки с дивами нулевой... Требуется создать резиновый шаблон не только по высоте но и по ширине. Шабон состоит из: 1. 6 колонок 2. Каждая калонка имеет шапку (неподвижную с точными кардинатами ширины и высоты 5 колонка ширина не известна она растягивается) 3. Растягиваемую середину (в зависимости от длины контекста) 4. Низ имеет определёную высоту и ширину и прижат к низу контекста, если такового нет ли он меньше размеров окна то, то к низу окошка браузера 5. 5колонка растягивается и ввысоту и в ширину. Делал 6 колонок потом в нутри них позиционировал относительно них ещё по три дива (Шапка, растягиваемая середина и футтер в 6ой 4ре). Это как должно быть (разрывами показаны растягивающиеся слои)  То как я это делал (как оказалось криво  ) | Код |
<!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" />
<style type="text/css">
html {
height:100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
width: 100%;
height:auto !important;
height: 100%;
max-height: 100%;
width:auto !important;
width: 100%;
max-width:: 100%;
background-color: #000000;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #FF0000;
}
a:active {
color: #FFFFFF;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#Colum1 {
position:absolute;
left:0px;
top:0px;
width:47px;
height:100%;
z-index:0;
background-color: #FFFFFF;
}
#Colum2 {
position:absolute;
left:47px;
top:0px;
width:24px;
height:100%;
z-index:0;
background-color: #FFFFFF;
}
#Colum3 {
position:absolute;
left:71px;
top:0px;
width:471px;
height:100%;
z-index:0;
background-color: #FFFFFF;
}
#Colum4 {
position:absolute;
left:542px;
top:0;
width:163px;
height:100%;
z-index:0;
background-color: #FFFFFF;
}
#Colum5 {
position:absolute;
left:705px;
top:0px;
right: 292px;
height:100%;
width: auto;
z-index:0;
background-color: #FFFFFF;
}
#Colum6 {
position:absolute;
left:auto;
top:0px;
width: 292px;
height:100%;
z-index:0;
background-color: #FFFFFF;
right: 0px;
}
#Part11 {
position:static;
left:0px;
top:0px;
width:47px;
height:625px;
z-index:1;
background-image: url(images/skin/p11.jpg);
}
#Part12 {
position:static;
left:0px;
top:625px;
width:47px;
height: 100%;
z-index:1;
background-color: #120000;
}
#Part13 {
position:static;
left:0px;
top:auto;
width:47px;
height:126px;
z-index:1;
background-image: url(images/skin/p13.jpg);
bottom: 0px;
}
#Part21 {
position:static;
left:0px;
top:0px;
width:24px;
height:333px;
z-index:1;
background-image: url(images/skin/p21.jpg);
}
#Part22 {
position:static;
left:0px;
top:333px;
width:24px;
height: 100%;
z-index:1;
background-image: url(images/skin/p22.jpg);
}
#Part23 {
position:static;
left:0px;
top:auto;
width:24px;
height:443px;
z-index:1;
background-image: url(images/skin/p23.jpg);
bottom: 0px;
}
#Part31 {
position:static;
left:0px;
top:0px;
width:471px;
height:333px;
z-index:1;
background-image: url(images/skin/p31.jpg);
}
#Part32 {
position:static;
left:0px;
top:333px;
width:471px;
height:100%;
z-index:1;
background-image: url(images/skin/p32.jpg);
}
#Part33 {
position:static;
left:0px;
top:auto;
width:471px;
height:434px;
z-index:1;
background-image: url(images/skin/p33.jpg);
bottom: 0px;
}
#Part41 {
position:static;
left:0px;
top:0px;
width:163px;
height:382px;
z-index:1;
background-image: url(images/skin/p41.jpg);
}
#Part42 {
position:static;
left:0px;
top:0px;
width:163px;
height:100%;
z-index:1;
background-image: url(images/skin/p42.jpg);
}
#Part43 {
position:static;
left:0px;
top:auto;
width:163px;
height:385px;
z-index:1;
background-image: url(images/skin/p43.jpg);
bottom: 0px;
}
#Part51 {
position:static;
left:0px;
top:0;
right: 292px;
height:382px;
width: auto;
z-index:1;
background-image: url(images/skin/p51.jpg);
/* bottom: 0px;*/
}
#Part52 {
position:static;
left:0px;
top:382px;
right: 292px;
width:auto;
height:auto;
z-index:1;
bottom: 240px;
background-color: #080000;
}
#Part53 {
position:static;
left:0px;
width:100%;
height:385px;
z-index:1;
background-image: url(images/skin/p53.jpg);
bottom: 0px;
}
#Part61 {
position:static;
left:0px;
top:0px;
width:292px;
height:240px;
z-index:1;
background-image: url(images/skin/p61.jpg);
}
#Part62 {
position:static;
left:0px;
top:240px;
width:292px;
height:142px;
z-index:1;
background-image: url(images/skin/p62.jpg);
}
#Part63 {
position:static;
left:0px;
top:382px;
width:292px;
height:100%;
z-index:1;
background-image: url(images/skin/p63.jpg);
}
#Part64 {
position:static;
left:0px;
top:auto;
width:292px;
height:385px;
z-index:1;
background-image: url(images/skin/p64.jpg);
bottom: 0px;
}
</style>
</head>
<body>
<div id="Colum1">
<div id="Part11"></div>
<div id="Part12"></div>
<div id="Part13"></div>
</div>
<div id="Colum2">
<div id="Part21"></div>
<div id="Part22"></div>
<div id="Part23"></div>
</div>
<div id="Colum3">
<div id="Part31"></div>
<div id="Part32">
<!-- ##CONTEXT## -->
<div align="center">Сайт находится в разработке<br><br><img src="images/uc.jpg" /></div>
</div>
<div id="Part33"></div>
</div>
<div id="Colum4">
<div id="Part41">
<!-- ##HISTORY## -->
</div>
<div id="Part42"></div>
<div id="Part43">
<!-- ##PHOTO## -->
</div>
</div>
<div id="Colum5">
<div id="Part51"></div>
<div id="Part52"></div>
<div id="Part53"></div>
</div>
<div id="Colum6">
<div id="Part61"></div>
<div id="Part62">
<!-- ##CALENDAR## -->
</div>
<div id="Part63"></div>
<div id="Part64"></div>
</div>
<body>
</html>
|
А вот как выглядит моя сборка... в опере худо бедно... в эксплоере вообще труба ( Моя кривая сборкаОчень надеюсь кто нибудь поможет собрать  |
Резиновая страничка на DIVах помогите, Помогите с созданием резинового шаблона 
Дата 29.7.2007, 23:28 (
Загрузка ...
