Помогите с версткой! [Версия для КПК] - Компьютерный форум OSzone.net

Показать полную графическую версию : Помогите с версткой!

Bullet-Avalon

01-02-2009, 17:13

Помогите с версткой, вот код, дело в том что при вставке оч большого сообщения в облости контента, контент съежает под футер, подробнее на скрине, как этого избежать, где ошибка, плиз помогите!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link href="style.css" rel="stylesheet" type="text/css">
<title> </title>
</head>
<body >

<div id="page">
<div id="head">
<div id="head_1"></div><div id="head_bg"></div><div id="head_2"></div>
</div>

<div id="table"></div>
</div>

<div id="footer">
<div id="footer_1"></div><div id="footer_bg"></div><div id="footer_2"></div>
</div>
</body> </html>


html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
background-image:url('img/bg.gif');}

#page{
position:relative; min-height:100%;
height:auto; height:100%;}

#head{
position:relative; width:900px; height:100px;
left:50%; top:0px; margin-left:-450px;
padding-top:0px; margin-top:0px; }

#head_1{
position:absolute; width:10px;
height:100px; margin-left:0px; float:left;
background-image:url('img/l_head.gif');}

#head_bg{
position:absolute; width:880px;
height:100px; margin-left:10px; float:left;
background-image:url('img/bg_head.gif');}

#head_2{
position:absolute; width:9px; height:100px;
margin-left:890px; float:left;
background-image:url('img/r_head.gif'); }

#table{
position:absolute; width:870px; border:
1px solid #000000; padding-bottom:50px;
margin-left:-435px; left:50%;}

#footer{
position:absolute; width:900px; height:50px;
bottom:0px; margin-left:-452px; left:50%;
margin-top:-50px;}

#footer_1{
position:absolute; width:12px; height:50px;
margin-left:0px; float:left;
background-image:url('img/l_footer.gif');}

#footer_bg{
position:absolute; width:874px; height:50px;
margin-left:12px; float:left;
background-image:url('img/bg_footer.gif');}

#footer_2{position:absolute; width:14px;
height:50px; margin-left:886px; float:left;
background-image:url('img/r_footer.gif'); }

Coutty

01-02-2009, 19:05

Используйте для футера relative-позиционирование.
#footer{
position:relative; width:900px; height:50px;
top:0px; margin-left:-452px; left:50%;
margin-top:-50px;}

Bullet-Avalon

01-02-2009, 19:30

Используйте для футера relative-позиционирование.
Цитата:
#footer{
position:relative; width:900px; height:50px;
top:0px; margin-left:-452px; left:50%;
margin-top:-50px;} »
К сожаленью тоже самое выходит, футер остается на месте а контент уезжает вниз...

System Failure

02-02-2009, 03:16

а если для распределения контента по странице пользоваться таблицей? в таком случае разъежаться точно ничего не будет. для более мелких элементов можно, конечно, и CSS использовать...

конечно это не совсем решение проблемы - а, так сказать, уход от неё...

Igor_I

02-02-2009, 22:12

Сколько я ни бился, у меня получилось более-менее так. bottom:10px;
Футер находится внизу и вниз убегает при перерисовке страницы, но вот если контента маловато, футер поднимается наверх, чуть ли не до середины страницы.