Пустое место внизу страницы

MifYz · April 18, 2011

Сверстал страницу на дивах. В опере и фф внизу много пустого места, в сафари с хромом всё смотрится как надо. Как это исправить?

CSS

body {
height: auto;
padding-bottom: 100px;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
margin-top: 0;
width: 1000px;
background-image:url(images/bgr_main.jpg);
}

#up_bgr {
position: absolute;
width: 100%;
left: 0px;
background-image: url(images/up_bgr.jpg);
height: 108px;
}

#header {
position: relative;
width: 1000px;
height: 203px;
background-image: url(images/up_bgr.jpg);
}

.up1 {
position: relative;
height: 203px;
width: 234px;
background-image: url(images/up1.jpg);
}

.up2 {
bottom: 0px;
position: relative;
left: 234px;
top: -203px;
background-image: url(images/up2.jpg);
height: 203px;
width: 234px;
}

.up3 {
left: 468px;
bottom: 0px;
top: -406px;
position: relative;
background-image: url(images/up3.jpg);
height: 203px;
width: 259px;
}

.up4 {
left: 964px;
position: relative;
top: -609px;
height: 203px;
width: 46px;
background-image: url(images/up4.jpg);
}

.up5 {
top: -656px;
height: 47px;
width: 237px;
left: 727px;
position: relative;
background-image: url(images/up5.jpg);
}

.up_text {
left: 727px;
top: -816px;
height: 113px;
width: 237px;
position: relative;
background-image: url(images/up_text.jpg);
}

.up_bookmark {
position: relative;
left: 727px;
top: -972px;
height: 43px;
width: 237px;
background-image: url(images/up_bookmark.jpg);
}

.text_in_the_header {
line-height: 12px;
text-align: center;
font-weight: bold;
font-size: 12px;
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #390648;
left: 720px;
height: 113px;
width: 237px;
top: -960px;
position: relative;
}

#best {
height: 461px;
position: relative;
background-color: white;
width: 995px;
}

.tl {
left: -8px;
position: relative;
height: 50px;
width: 270px;
background-image: url(images/tl.jpg);
}

.t1 {
position: relative;
left: 262px;
top: -50px;
height: 50px;
width: 462px;
background-image: url(images/t1.jpg);
}

.tr {
left: 724px;
top: -100px;
position: relative;
height: 50px;
width: 278px;
background-image: url(images/tr.jpg);
}

.thumba_1 {
left: 5px;
top: -97px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_2 {
top: -297px;
left: 170px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_3 {
top: -497px;
left: 335px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_4 {
top: -697px;
left: 500px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_5 {
top: -897px;
left: 665px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_6 {
left: 830px;
top: -1097px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_7 {
left: 5px;
top: -1093px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_8 {
bottom: 1293px;
left: 170px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_9 {
bottom: 1493px;
left: 335px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_10 {
bottom: 1693px;
left: 500px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_11 {
bottom: 1893px;
left: 665px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_12 {
bottom: 2093px;
left: 830px;
height: 200px;
position: relative;
width: 160px;
}

#yesterday {
height: 461px;
top: 20px;
position: relative;
background-color: white;
width: 995px;
}

.t2 {
top: -50px;
left: 262px;
position: relative;
height: 50px;
width: 462px;
background-image: url(images/t2.jpg);
}

.ty_l {
position: relative;
left: -8px;
height: 50px;
width: 270px;
background-image: url(images/tl.jpg);
}

.ty_r {
top: -100px;
position: relative;
left: 724px;
height: 50px;
width: 278px;
background-image: url(images/tr.jpg);
}

.thumba_13 {
left: 5px;
top: -97px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_14 {
top: -297px;
left: 170px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_15 {
top: -497px;
left: 335px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_16 {
top: -697px;
left: 500px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_17 {
top: -897px;
left: 665px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_18 {
left: 830px;
top: -1097px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_19 {
left: 5px;
top: -1093px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_20 {
bottom: 1293px;
left: 170px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_21 {
bottom: 1493px;
left: 335px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_22 {
bottom: 1693px;
left: 500px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_23 {
bottom: 1893px;
left: 665px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_24 {
bottom: 2093px;
left: 830px;
height: 200px;
position: relative;
width: 160px;
}

#more {
top: 40px;
position: relative;
background-color: white;
height: 461px;
width: 995px;
}

.ml {
left: -8px;
height: 50px;
width: 270px;
background-image: url(images/tl.jpg);
position: relative;
}

.t3 {
top: -50px;
left: 262px;
height: 50px;
position: relative;
width: 462px;
background-image: url(images/t3.jpg);
}

.mr {
position: relative;
left: 724px;
top: -100px;
height: 50px;
width: 278px;
background-image: url(images/tr.jpg);
}

.thumba_25 {
left: 5px;
top: -97px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_26 {
top: -297px;
left: 170px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_27 {
top: -497px;
left: 335px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_28 {
top: -697px;
left: 500px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_29 {
top: -897px;
left: 665px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_30 {
left: 830px;
top: -1097px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_31 {
left: 5px;
top: -1093px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_32 {
bottom: 1293px;
left: 170px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_33 {
bottom: 1493px;
left: 335px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_34 {
bottom: 1693px;
left: 500px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_35 {
bottom: 1893px;
left: 665px;
height: 200px;
position: relative;
width: 160px;
}

.thumba_36 {
bottom: 2093px;
left: 830px;
height: 200px;
position: relative;
width: 160px;
}

#top_friends {
height: 300px;
width: 995px;
background-color: white;
top: 60px;
position: relative;
}

.fl {
left: -8px;
height: 50px;
width: 270px;
background-image: url(images/tl.jpg);
position: relative;
}

.t4 {
top: -50px;
left: 262px;
height: 50px;
position: relative;
width: 462px;
background-image: url(images/t3.jpg);
}

.fr {
position: relative;
left: 724px;
top: -100px;
height: 50px;
width: 278px;
background-image: url(images/tr.jpg);
}

.links_1 {
position: relative;
left: 50px;
top: -97px;
height: 150px;
width: 200px;
}

.links_2 {
position: relative;
left: 290px;
top: -247px;
height: 150px;
width: 200px;
}

.links_3 {
left: 545px;
position: relative;
top: -397px;
height: 150px;
width: 200px;
}

.links_4 {
top: -547px;
position: relative;
left: 770px;
height: 150px;
width: 200px;
}

.logo {
left: 50px;
top: -560px;
height: 110px;
position: relative;
width: 261px;
background-image: url(images/logo.jpg);
}

.copyright {
left: 330px;
height: 50px;
width: 600px;
text-align: center;
position: relative;
top: -636px;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 12px;
color: #390648;
}

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=utf-8"/>
<meta name="description" content="::: Upskirt club :::">
<title>::: Upskirt club :::</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="up_bgr"></div>
<div id="header">
<div class="up1"></div>
<div class="up2"></div>
<div class="up3"></div>
<div class="up4"></div>
<div class="up5"></div>
<div class="up_text"></div>
<div class="up_bookmark"></div>
<div class="text_in_the_header">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel ante lobortis risus eleifend malesuada. Maecenas a ante urna. Aliquam sit amet euismod odio. Sed eu massa felis, at ullamcorper neque. Nullam vestibulum, odio sed placerat</div>
</div>
</div>
<div id="best">
<div class="tl"></div>
<div class="t1"></div>
<div class="tr"></div>
<div class="thumba_1"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_2"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_3"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_4"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_5"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_6"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_7"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_8"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_9"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_10"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_11"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_12"><a href="#"><img src="images/th.jpg" alt=""></a></div>
</div>
<div id="yesterday">
<div class="ty_l"></div>
<div class="t2"></div>
<div class="ty_r"></div>
<div class="thumba_13"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_14"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_15"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_16"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_17"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_18"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_19"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_20"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_21"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_22"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_23"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_24"><a href="#"><img src="images/th.jpg" alt=""></a></div>
</div>
<div id="more">
<div class="ml"></div>
<div class="t3"></div>
<div class="mr"></div>
<div class="thumba_25"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_26"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_27"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_28"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_29"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_30"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_31"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_32"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_33"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_34"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_35"><a href="#"><img src="images/th.jpg" alt=""></a></div>
<div class="thumba_36"><a href="#"><img src="images/th.jpg" alt=""></a></div>
</div>
<div id="top_friends">
<div class="fl"></div>
<div class="t4"></div>
<div class="fr"></div>
<div class="links_1"><a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a></div>
<div class="links_2"><a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a></div>
<div class="links_3"><a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a></div>
<div class="links_4"><a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a> <a href="#">TOP OF OUR FRIENDS</a></div>
<div class="logo"></div>
<div class="copyright">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis leo vitae libero mattis rutrum. Aliquam arcu nisi, porttitor nec vulputate id, dapibus vel odio. Pellentesque arcu lectus, laoreet ac adipiscing ac, facilisis sit amet elit.</div>
</div>
</body>
</html>[/code[
Скрины:
Опера

psywalker · April 18, 2011

Вот из-за таких вот ужасов такое и происходит. bottom: 1693px;

Я бы всё заново тут переверстал, с нуля, однозначно.

MifYz · April 18, 2011

Дельный совет. Теперь всё как надо. :facepalmxd:

psywalker · April 18, 2011

Дельный совет. Теперь всё как надо.

Ещё бы

Sign In

Пустое место внизу страницы

Question

MifYz

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

MifYz

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information