| |
|
|
| | Что надо?
http://savepic.net/304625.png
Что выходит?
http://savepic.net/312820.png
Код
<!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 {
height:100%; width:100%; margin:0;
}
.header {
width:100%;
height:250px;
background-color:green;
}
.content {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto 0;
}
.footer {
height:50px;
background-color:red;
clear:both;
}
.left {
background-color:yellow;
top:-70px;
left:40px;
position:relative;
float:left;
width:270px;
height:100%;
min-height:300px;
}
.right {
background-color:blue;
float:right;
width:100%;
height:200px;
}
.subleft {
background-color:pink;
float:left;
min-height:300px;
min-width:500px;
}
.subright {
float:right;
width:250px;
min-height:300px;
background-color:gray;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="right">
<div class="subleft"></div>
<div class="subright"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Riddik269
(25.11.2010 в 20:14)
| | |
<!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 {
height:100%; width:100%; margin:0;
}
.header {
width:100%;
height:250px;
background-color:green;
}
.content {
background-color:gray;
position:absolute;
left:310px;
right:200px;
top:250px;
bottom:50px;
}
.footer {
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:50px;
background-color:red;
}
.left {
position:absolute;
top:180px;
left:40px;
width:270px;
bottom:50px;
background-color:yellow;
}
.right {
position:absolute;
top:250px;
right:0px;
width:200px;
bottom:50px;
background-color:blue;
}
/*.subleft {
background-color:pink;
min-height:300px;
min-width:500px;
}
.subright {
float:right;
width:250px;
min-height:300px;
background-color:gray;
}*/
</style>
</head>
<body>
<div class="header"> </div>
<div class="left"> </div>
<div class="content"> </div>
<div class="right"> </div>
<!-- <div class="subleft"></div>
<div class="subright"></div>-->
<div class="footer"> </div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Агамемнон
(27.11.2010 в 13:08)
| | | зачем изобретать велосипед? Берешь любой сайт, сверстанный, как тебе нужно и копируешь структуру. Сейчас не 1999 год, когда блоки только появились. Верстка блоками давно отработана и врядли в ней можно изобрести что-то новое. | |
| |
|
|
| |
|
|
| |
для: kosta_in_net
(27.11.2010 в 17:55)
| | | Вопрос задан не по адресу. | |
| |
|
|
| |
|
|
| |
для: Агамемнон
(28.11.2010 в 11:52)
| | | Это, как бы, в порядке обсуждения... Но, конечно, правильнее было бы адресовать автору топика. Пардон. | |
| |
|
|
| |
|
|
| |
для: Riddik269
(25.11.2010 в 20:14)
| | | Ни как. На дивах это невозможно. | |
| |
|
|
| |
|
|
| |
для: Yuriev
(04.12.2010 в 14:10)
| | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<style type="text/css">
html,body {
margin:0;
padding:0;
font-size:12pt;
color:#000000;
font-family:Verdana;
}
#main {
width:100%;
height:100%;
position:relative;
display:inline-block;
overflow-x:hidden;
}
#header,#left,#content,#right,#footer {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
}
#header {
width:100%;
min-width:1000px;
height:100px;
line-height:100px;
}
#left,#right {
min-height:600px;
line-height:600px;
}
#left {
position:relative;
margin:-50px 0 0 30px;
width:270px;
float:left;
height:100%;
}
#right {
width:250px;
height:100%;
float:right;
}
#content {
margin: 0 254px 0 304px;
min-width:480px;
height:100%;
}
#footer {
width:100%;
height:50px;
line-height:50px;
clear:both;
}
</style>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="header">HEADER</div>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Usta
(04.12.2010 в 23:22)
| | | Всё бы ничего, но header и footer за правый край окна уходят и, естесственно, правые бордюры header,footer и right по вертикали не совпадают.
При сужении окна content налазит на right сначала, а потом right проваливается вниз под left.
Смотрел старым ИЕ, средней Оперой и новым Хромом.
Жаль. | |
| |
|
|
| |
 895 байт |
|
| |
для: Yuriev
(04.12.2010 в 23:43)
| | | Новая версия! | |
| |
|
|
| |
|
|
| |
для: Riddik269
(25.11.2010 в 20:14)
| | | Есть описание различных типов див-версток и описание проблемы див-таблица http://webdesign.site3k.net/sovet/verstka.html. Прочтя, можно либо прийти к выводу о бессмысленности заморачивания с блоками, либо взять готовые варианты решений для блочной верстки. | |
| |
|
|
| |
|
|
| |
для: kosta_in_net
(05.12.2010 в 10:19)
| | | А самому разобраться нельзя? Или должно выбираться из того, что предлагает дядя? | |
| |
|
|
