-
Вебмастеру
(
http://forum.oszone.net/forumdisplay.php?f=22)
| Bullet-Avalon |
01-02-2009 17:13 1026348 |
Помогите с версткой!
Помогите с версткой, вот код, дело в том что при вставке оч большого сообщения в облости контента, контент съежает под футер, подробнее на скрине, как этого избежать, где ошибка, плиз помогите!
HTML код:
<!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 >
<!-- Header -->
<div id="page">
<div id="head">
<div id="head_1"></div><div id="head_bg"></div><div id="head_2"></div>
</div>
<!--Content-->
<div id="table"></div>
</div>
<!-- Footer -->
<div id="footer">
<div id="footer_1"></div><div id="footer_bg"></div><div id="footer_2"></div>
</div>
</body> </html>
<!--CSS файл -->
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'); }
|
Используйте для футера 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 1026492 |
Цитата:
Цитата Coutty
Используйте для футера 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 1026832 |
а если для распределения контента по странице пользоваться таблицей? в таком случае разъежаться точно ничего не будет. для более мелких элементов можно, конечно, и CSS использовать...
конечно это не совсем решение проблемы - а, так сказать, уход от неё...
|
Сколько я ни бился, у меня получилось более-менее так. bottom:10px;
Футер находится внизу и вниз убегает при перерисовке страницы, но вот если контента маловато, футер поднимается наверх, чуть ли не до середины страницы.
|
Время: 03:26.
© OSzone.net 2001-2025
