Проблема слоев

okunev2 · February 21, 2008

Есть верстка дивами и таблично, там сайт резиной и по высоте, но таблица под основными слоями в шапке тянется по высоте на 100%, но за пределы экрана вниз ровно на то расстояние которое имеет растянутый фон в шапке?

Как это исправить, чтобы таблица ровно прижималась к низу окна, а не сползала на это расстояние равное высоте растянутого фона в шапке?

вот html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<div id="main">

<div id="header_fon">
<div id="header_left-block"></div>
<div id="header_right-block"></div>

<div id="center">
<div id="center_header">

<table class="header1">
 <tr>
 <td class="header1_1"></td>
 <td class="header1_2">
 <table class="header1_news1">
 <tr>
 <td class="header1_news1_1"><div class="font_news1">11 текст</div>

 <table class="header1_news2">
 <tr>
 <td class="header1_news2_1"><div class="font_news2">текст:</div></td>
 <td valign="top"><font class="font_news3">текст</font> <a href="#" class="font_news3_1">текст.</a></td>
 </tr>
 </table>

 </td>
 </tr>
 <tr>
 <td class="header1_news1_2"><img src="images/fon01.png" class="transpng" width="460" height="12"></td>
 </tr>
 </table>
 </td>
 <td class="header1_3"></td>
 <td class="header1_4"></td>
 </tr>
 <tr>
 <td class="header1_5"></td>
 <td class="header1_6"></td>
 <td class="header1_7"></td>
 <td rowspan="2" class="header1_8"><img src="images/fon02.gif" class="opacity1" width="220" height="138"><div id="font_news3_2"><a href="#" class="menu1">О компании</a>
<a href="#" class="menu1">Поиск туров</a>
<a href="#" class="menu1">Виллы и апартаменты</a>
<a href="#" class="menu1">Горящие предложения</a>
<a href="#" class="menu1">Погода в мире</a></div></td>
 </tr>
 <tr>
 <td colspan="2" class="header1_9">
 <div id="font_menu4_1"><a href="#" class="menu2">текст</a>	 <a href="#" class="menu2">текст</a>	 <a href="#" class="menu2">текст</a>	 <a href="#" class="menu2">текст</a>	 <a href="#" class="menu2">текст</a></div>
 <div id="font_menu4_2"><span> :: </span>Текст</div>
 </td>
 <td></td>
 </tr>
</table>
</div>
</div>
</div>

<table class="content1">
 <tr>
 <td> </td>
 <td class="content1_1">Контент</td>
 <td> </td>
 </tr>
 <tr>
 <td class="content1_2_1"> </td>
 <td class="content1_2"><div id="footer1"><a href="#" class="footer_menu1">Текст</a></div></td>
 <td class="content1_2_1"> </td>
 </tr>
</table>

</div>
</body>


</html>

вот css:

html {
 height: 100%;
 background: #ffffff;
}

* html body {
 height:100%;
}
body {
 padding:0; 
 margin:0 auto;
 min-height: 100%;
 position:relative;
 width:100%;
 min-width: 1200px;
 max-width: 2400px;

}


img.transpng {
 behavior: url("png.htc");
}

img.opacity1 {
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
 -moz-opacity: 0.2;
 -khtml-opacity: 0.2;
 opacity: 0.2;
 position: absolute; 
}

img {
 border: 0px;
}

#main { 
 position: relative;
 height: 100%;
 min-width: 1200px;
}

#header_fon {
 width: 100%;
 height: 264px;
 background: url(images/fon_header.jpg) top left repeat-x;
 position: relative;
}

#header_left-block {
 background: url(images/fon_header_left-block.jpg) 0 0 no-repeat;
 position: absolute;
 /*float: left;*/
 width: 600px;
 height: 264px;
 left: 0px;
 top: 0px;
}

#header_right-block {
 background: url(images/fon_header_right-block.jpg) 0 0 no-repeat;
 position: absolute;
 /*float: right;*/
 width: 590px;
 height: 264px;
 right: 0px;
 top: 0px;
}

#center {
 text-align: center;
}

#center_header {
 margin: 0 auto;
 width: 940px;
 height: 264px;
 border: 0px solid #000000;
 position: relative;
}

td {
 margin: 0px;
 padding: 0px;
 border: 0px solid #000;
}


table.header1 {
 width: 940px;
 height: 264px;
 margin: 0px;
 border-collapse: collapse;
}

td.header1_1 {
 width: 240px;
 height: 63px;
 vertical-align: top;
}

td.header1_2 {
 width: 460px;
 vertical-align: top;
}

td.header1_3 {
 width: 21px;
 vertical-align: top;
}

td.header1_4 {
 width: 219px;
 vertical-align: top;
}

td.header1_5 {
 width: 240px;
 height: 124px;
 vertical-align: top;
}

td.header1_6 {
 width: 460px;
 vertical-align: top;
}

td.header1_7 {
 width: 21px;
 vertical-align: top;
}

td.header1_8 {
 width: 219px;
 height: 201px;
 vertical-align: top;
 text-align: left;
}

a.menu1 {
 color: #ffffff; 
 font: 9pt Arial;
 text-decoration: underline;
 position: relative; 
}

a.menu1:hover {
 color: #ffffff; 
 font: 9pt Arial;
 text-decoration: none;
 position: relative; 
}


td.header1_9 {
 width: 700px;
 height: 77px;
 vertical-align: top;
 text-align: left;
}

table.header1_news1 {
 width: 460px;
 height: 100%;
 margin: 0px;
 border-collapse: collapse;
}

td.header1_news1_1 {
 width: 460px;
 height: 100%;
 vertical-align: top;
 background: #ffffff;
}

td.header1_news1_2 {
 width: 460px;
 height: 12px;
 vertical-align: top;
}

table.header1_news2 {
 width: 460px;
 margin: 0px;
 border-collapse: collapse;
}

td.header1_news2_1 {
 width: 78px;
 vertical-align: top;
}

.font_news1 {
 color: #a93800;
 font: 7pt Tahoma, Verdana;
 text-decoration: none;
 text-align: left;
 padding-top: 9px;
 padding-left: 21px; 
 padding-bottom: 5px;
}

.font_news2 {
 color: #ffba00; 
 font: bold 9pt Arial;
 text-decoration: none;
 text-align: left;
 padding-top: 0px;
 padding-left: 21px; 
}

.font_news3 {
 color: #545454; 
 font: 9pt Arial;
}


a.font_news3_1 {
 color: #164E8F; 
 font: 9pt Arial;
 text-decoration: underline;
}

a.font_news3_1:hover {
 color: #164E8F; 
 font: 9pt Arial;
 text-decoration: none;
}

#font_news3_2 {
 text-align: left;
 padding-top: 23px;
 padding-left: 22px; 
}

a.menu2 {
 color: #2577B5; 
 font: bold 11pt Arial;
 border-bottom: 2px solid #2577B5;
 text-decoration: none;
}

a.menu2:hover {
 text-decoration: none;
 border-bottom: 0px;
}

#font_menu4_1 {
 text-align: left;
 padding-bottom: 23px;
}

#font_menu4_2 {
 color: #FFBA00; 
 font: bold 14pt Tahoma;
}


table.content1 {
 width: 100%;
 height: 100%;
 margin-top: 15px;
 border-collapse: collapse;
 position: absolute;
 table-layout: fixed;
}

td.content1_1 {
 width: 940px;
 height: 100%;
 vertical-align: top;
}

td.content1_2 {
 width: 940px;
 height: 43px;
 vertical-align: top;
 background: url(images/fon_footer.jpg) bottom left repeat-x;
}

td.content1_2_1 {
 background: url(images/fon_footer.jpg) bottom left repeat-x;
}

a.footer_menu1 {
 color: #2577B5; 
 font: 9pt Arial;
 text-decoration: underline;
}

a.footer_menu1:hover {
 color: #2577B5; 
 font: 9pt Arial;
 text-decoration: none;
}

#footer1 {
 text-align: left;
 padding-top: 13px;
 padding-right: 15px;
 float: left; 
}

okunev2 · February 21, 2008

Ни кто не подскажет Я не могу понять почему таблица не понизу фиксируеться!

okunev2 · February 22, 2008

Видимо, со слоями никто не работает Подскажите ошибку профи, я односложный фраз не понимаю!

okunev2 · February 22, 2008

Сформирую по другому вопрос!

В шапке дивами сделано: фон прижаты к верху тянется на 100%, слева и справа блоки картинками прижатый к левому и правому краю и к вверху, нижу простая таблица, резиной по высоте и ширине, как ей наложить поверх дивов в шапке, фона и этих двух блоков? Из-за этого думаю прстранство внизу!

Sign In

Проблема слоев

Question

okunev2

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

okunev2

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information