| |
|
|
| |
<!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>Untitled Document</title>
<style type="text/css">
<!--
body, html {
margin: 0px;
padding: 0px;
height: 100%;
}
#content{
}
#top {
height: 60px;
width: 100%;
background-color: #33CCFF;
}
#center {
background-color: #FFCCFF;
width: 100%;
}
#bottom {
background-color: #FFCC99;
height: 60px;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="center">1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />
11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30</div>
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
|
Несколько раз подступался, ничего не получается.
Очень надеюсь на вашу помощь.
В браузерах это должно выглядеть так,
сначало идёт "top", потом "center", ну и ниже всех "bottom". | |
| |
|
|
| |
|
|
| |
для: mikha
(24.09.2008 в 18:39)
| | |
<!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>Untitled Document</title>
<style type="text/css">
<!--
body, html {
margin: 0px;
padding: 0px;
height: 100%;
}
#content{
position:relative;
}
#top {
height: 60px;
width: 100%;
background-color: #33CCFF;
position:absolute;
top:0;
left:0;
}
#center {
background-color: #FFCCFF;
width: 100%;
padding-top:60px;
}
#bottom {
background-color: #FFCC99;
height: 60px;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="center">1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />
11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30</div>
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
|
вот вам и решение! | |
| |
|
|
| |
|
|
| |
для: Madman
(24.09.2008 в 19:30)
| | | Спасибо большое.
Вот сейчас смотрю и думаю, а что же я вчера и раньше мудрил?
К слову вчера я всё таки сделал, но точно помню что немного не так.
Завтра (сейчас на другом компьютере) посмотрю в чём отличия. У вас проще.
Ещё раз спасибо.
ЗЫ. Ещё бы вариант когда содержимое id="content" меньше высоты окна в браузере, то id="content" растягивался по высоте на 100%.
Сейчас поколдую.
--- --- ---
Немного неправильно выразился.
Ещё бы вариант когда содержимого в id="center" было ...эээ.. слишком мало для того что бы растянуть id="content" на всё окно в браузере, то id="content" растягивался по высоте на 100%.
id="content" растягивается по высоте на 100%, с этим нет проблем. Что бы при этом id="top" и id="bottom" были сверху и снизу страницы. | |
| |
|
|
| |
|
|
| |
для: mikha
(25.09.2008 в 03:31)
| | | HTML должен остаться таким же? | |
| |
|
|
| |
|
|
| |
для: Madman
(25.09.2008 в 11:45)
| | | Очерёдность блоков должна остаться такой же.
Дело в том что в id="центр", втавляется ещё три блока из дивов. Слева и справа фиксированого размера, по центру резина (причём центр в коде идёт опять же первым по порядку).
С помошью бубна и какой то матери сегодня сделал, тестируя в трёх браузерах, но на каком то этапе перестал сохранять промежуточные варианты и слишком поздно заметил косячёк.
В общем решил пока покодить, т.е другим заняться. Пусть мозги отдохнут.
Вот то что у меня вышло (без трёх колонок по центру).
<!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" />
</head>
<style type="text/css" media="all">
body, html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#page {
width: 100%;
height: auto !important;
min-height:100%;
height: 100%;
background: #f0f0f0;
}
#top {
height: 60px;
background: #f0a060;
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
#center {
width: 100%;
background: #b0f0b0;
left: 0px;
top: 60px;
position: relative;
padding-bottom: 60px;
}
#garant {
height: 60px;
position: relative;
}
#bottom {
margin-top: -60px;
width: 100%;
height: 60px;
background: #b0f0f0;
position: relative;
left: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="page">
<div id="center">center<br />
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />
11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30
</div>
<div id="top">top</div>
<div id="garant"></div>
</div>
<div id="bottom">bottom</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Madman
(25.09.2008 в 11:45)
| | | что бы id="center", id="top", id="bottom" шли в том же порядке.
Но вы наверное что то про
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" или "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
" спрашиваете.
Наверное всё равно, лишь бы код валидный был.
УПС.. может кому интересно будет http://vk.osvita.org.ua/footer.htm | |
| |
|
|
