footer залазиет на блок

Flashton · April 27, 2011

Здравствуйте. Делаю сайт, возникла проблема, блок-растяжка (у меня в коде id="text") налазиет на контент, а не идёт после него, из-за этого футер закрывает часть контента. Ниже скрин: - Тут видно, как распорка ушла под блок с цифрами "454",

если эти три блока (зелёные и синий, с цифрами "454") продолжить в высоту они будут идти поверх распорки и зайдут под футер.

Подскажите, пожалуйстка, как это исправить?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>КРЕПОСТЬ РУСЬ</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>

<div id="content">
<div id="container">

                <div id="header_top">
        <div id="header_top_left"><img src="images/title.png" /><a target="_self" href="index.html"><img class="logo" src=        "images/logo.png" /></a></div>
        <div id="header_top_right">
            <div id="header_top_right_top"><img class="date_prov" src="images/date_prov.gif" /></div>
            <div id="header_top_right_bottom">
                <div id="header_top_right_bottom_left"><a href="#"><img class="set" src="images/set.png" /></a><a href="mailto:mail@mail.ru"><img class="mail" src="images/mail.png" /></a></div>
                <div id="header_top_right_bottom_right"><input class="search" name="1" type="text" value="Поиск по сайту" /><a href="#" onclick="display_alert()"><img class="search" src="images/search.jpg" /></a></div>
                <div class="stop"></div>
            </div>
            <div class="stop"></div>
        </div>
    </div>

    <div id="top_menu">
        <div id="top_menu_1"><a href="#">О фестивале</a></div>
        <div id="top_menu_2"><a href="#">Новости</a></div>
        <div id="top_menu_3"><a href="#">Мероприятия</a></div>
        <div id="top_menu_4" class="active"><a href="#">Фотогалерея</a></div>
        <div id="top_menu_5"><a href="#">Видео</a></div>
        <div id="top_menu_6"><a href="#">Контакты</a></div>
               <div class="stop"></div>
    </div>

    <div id="content1">
  <div id="content1_left">454</div>
  <div id="content1_center">454</div>
  <div id="content1_right">454</div>
  <div class="stop"></div>
      </div>



</div>
<div id="text"></div>
</div>

<div id="footer">Footer</div>

</body>
</html>


html, body
{
    height:100%;
    margin:0;
    padding:0;
    font-family:Tahoma;
    font-size:14px;
    color:#000000;
    background:#f4d4a6;
}

#content
{
  position: relative;
  min-height: 100%; width:100%; min-width:1059px; background:url(../images/top_bg.jpg) left top repeat-x;
}

* html #content { height: 100%;}

#text
{
  padding-bottom: 112px; background:#CC9900;
}

#footer
{
  position: relative; width:100%; min-width:1059px; background:#009933; background:url(../images/bottom_bg.jpg) left bottom repeat-x;
  height: 112px;
  margin-top: -112px;
}

#container{width:1059px; margin:0 auto; background:#99CC33;}


h1, h2, h3, h4, h5, h6, h7{margin:2px;padding:0;font-family:Georgia, "Times New Roman", Times, serif;font-weight:normal;color:#000000;}
h1{font-size:20px;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
h5{font-size:12px;}
h6{font-size:10px;}
h7{font-size:8px;}


div.stop{width:100%;height:0;line-height:0;font-size:1%;}


#header_top{width:989px;height:244px;padding:0 35px 0 35px;background:url(../images/header_top.png) center top no-repeat;}

img.logo{border:0;margin:0;padding:0;height:244px;}

#header_top_left{float:left;width:618px;height:244px;}

#header_top_right{margin-left:618px;}

img.date_prov{margin:78px 14px auto 14px;}

#header_top_right_top{height:188px;}
#header_top_right_bottom{height:56px;}

#header_top_right_bottom_left{float:left;width:58px;height:19px;padding:17px 27px 20px 51px;}
img.set{height:19px;width:16px;margin-right:13px;border:0;}
img.mail{height:19px;width:16px;margin-left:13px;border:0;}

#header_top_right_bottom_right{margin-left:136px;padding:16px 0 20px 0;}

input.search{float:left;height:16px;width:142px;margin:0 5px 0 2px;padding:1px 5px 1px 5px;border:#f2dab1 solid 2px; background:#e7c69f; font-family:"Times New Roman", Times, serif; font-size:12px;color:#8e2d00;opacity:0.55;}
*html input.search{background:filter:alpha(opacity=55);}
img.search{border:0;width:50px;height:19px;margin:1px 2px 0 0;}

#top_menu{width:989px;margin:0 35px 0 35px;height:62px;}

#top_menu_1 a, #top_menu_2 a, #top_menu_3 a, #top_menu_4 a, #top_menu_5 a, #top_menu_6 a{text-decoration:none;color:#e9c08b;}
#top_menu_1.active a, #top_menu_2.active a, #top_menu_3.active a, #top_menu_4.active a, #top_menu_5.active a, #top_menu_6.active a{text-decoration:none;color:#9e3b00;}
#top_menu_4.active{color:#9e3b00;}

#top_menu_1
{
    float:left;
    display:block;
    width:161px;
    height:17px;
    padding:27px 10px 18px 10px;
    background:url(../images/menu_top_1.png) top right no-repeat;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:16px;
    color:#e9c08b;
}

#top_menu_2
{
    float:left;
    display:block;
    width:121px;
    height:17px;
    padding:27px 10px 18px 10px;
    background:url(../images/menu_top_2.png) top center no-repeat;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:16px;
    color:#e9c08b;
}

#top_menu_3
{
    float:left;
    display:block;
    width:177px;
    height:17px;
    padding:27px 10px 18px 10px;
    background:url(../images/menu_top_3.png) top center no-repeat;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:16px;
    color:#e9c08b;
}

#top_menu_4
{
    float:left;
    display:block;
    width:169px;
    height:17px;
    padding:27px 10px 18px 10px;
    background:url(../images/menu_top_4_a.png) top center no-repeat;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:16px;
}

#top_menu_5
{
    float:left;
    display:block;
    width:95px;
    height:17px;
    padding:27px 10px 18px 10px;
    background:url(../images/menu_top_5.png) top center no-repeat;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:16px;
    color:#e9c08b;
}

#top_menu_6
{
    float:right;
    width:146px;
    display:block;
    height:17px;
    padding:27px 10px 18px 10px;
    background:url(../images/menu_top_6.png) top left no-repeat;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:16px;
    color:#e9c08b;
}

#content1{margin:0 35px 0 35px; width:989px; position:relative;}

#content1_left{float:left;width:224px;background:#00CC33;position:relative; display:table;}
#content1_center{float:left;width:539px;background:#0066CC;;position:relative;}
#content1_right{float:right;width:226px; background:#66CC33;}

PanSoul · April 28, 2011

Пропиши еще в

#container{

...

overflow:hidden;

}

Sign In

footer залазиет на блок

Question

Flashton

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

PanSoul

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information