X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> footer залазиет на блок
Flashton
Flashton
Topic Starter сообщение 27.4.2011, 23:35; Ответить: Flashton
Сообщение #1


Здравствуйте. Делаю сайт, возникла проблема, блок-растяжка (у меня в коде id="text") налазиет на контент, а не идёт после него, из-за этого футер закрывает часть контента. Ниже скрин:
[attachment=37791:23fad01cdcf9.jpg] - Тут видно, как распорка ушла под блок с цифрами "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>


[CSS]
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;}

[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Yuri_hb
Yuri_hb
сообщение 28.4.2011, 11:49; Ответить: Yuri_hb
Сообщение #2


не вдаваясь в вопросы семантики :nea: просто блок выпадает из потока.. нужно здесь:
<div class="stop"></div>
или здесь
<div id="text"></div
> задать [CSS]clear:both;[/CSS] можно очистку прилепить на любой элемент. или футеру задать флоат.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как скрыть блок в приложении на Android
0 Вито_052 1089 15.12.2019, 12:37
автор: Вито_052
Открытая тема (нет новых ответов) Выравнивание содержимого footer'a
0 press74 4988 2.7.2019, 18:58
автор: -iiwanc-
Открытая тема (нет новых ответов) Появляющийся блок
0 sergei_burg 2187 1.6.2019, 13:39
автор: -sergei1980-
Открытая тема (нет новых ответов) Перенести блок FAQ с сайта
Верстка
3 Gera 2525 13.12.2018, 15:40
автор: mmkulikov
Открытая тема (нет новых ответов) Куплю места на мордочках, под сквозные ссылочки под блок сквозных ссылок.
тематика: СМИ,Туризм,Медицина
4 SeoGanik 9615 18.2.2017, 12:33
автор: SeoGanik


 



RSS Текстовая версия Сейчас: 28.3.2024, 21:38
Дизайн