Сайт уезжает по вертикали за границу окна

Golden_Puma · March 4, 2008

Помогите пожалуйста девушке. которая только что начала изучать CSS и блоки.

Простейший шаблон: сверху шапка, слева меню, справа контент. САйт должен быть вытянут по вертикали до низа. Если контента много то соответственно он должен вытягиваться дальше и появляться должна прокрутка. В данный момент он соответсвенно пуст, но почему то уходит за границы экрана. Помогите решить мою проблеу, пожалуйста.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ Без Имени</title>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="top"> 
<table width="100%" class="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
</div>

<div id="menu">
 <table class="menu" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td class="menu" ><div>Тут будет меню</div>
 <div id="puma">Design</div></td>
 <td id="polosa2"></td>
 </tr>
 </table>
</div>
<div id="content">
<table class="content" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td class="content" >
Контент
</td>
 </tr>
</table></div>



</body>
</html>

html
 {
 width: 100%;
 padding: 0px;
 border: 0px;
 margin: 0px;
 height: 100%;
}

 body
 {
 width: 100%;
 padding: 0px;
 border: 0px;
 margin: 0px;
 height: 100%;
}


.content {
 height: 100%;
 width: 100%;
}
td.content {
 vertical-align: top;
 padding: 25px;
}
td.menu {
 vertical-align: top;
 width: 194px;
}
#top {
 height: 204px;
 width: 100%;
 margin: 0px;
 padding: 0px;
 position: absolute;
 left: 0px;
 top: 0px;
}




#menu {
 width: 199px;
 height: 100%;
 background-image: url(images/bg_top.gif);
 padding: 0px;
 position: absolute;
 left: 0px;
 top: 204px;
 margin: 0px;

}
#content {
 background-image: url(images/bg_main.gif);
 height: 100%;
 min-height: 100%;
 position: absolute;
 left: 199px;
 top: 204px;
 margin: 0px;
 padding: 0px;
}
#puma {
 position: absolute;
 left: 0px;
 bottom: 50px;
}



#polosa {
 background-image: url(images/yorki2_15.gif);
 background-repeat: repeat-x;
 height: 5px;
}
table.top {
 margin: 0px;
 padding: 0px;
 height: 199px;
 width: 100%;

}

#polosa2 {
 background-image: url(images/yorki2_18.gif);
 background-repeat: repeat-y;
 width: 5px;
}
.menu {
 width: 199px;
 height: 100%;
}





}

iRina · March 4, 2008

Причина в том, что у вас почти для всех основных блоков задано height:100%. Так что ничего удивительного в том, что страница по высоте у вас даже больше высоты окна браузера.

П.С.. Говорите блоки учите, а таблиц в коде немеренно).

Golden_Puma · March 4, 2008

наверху у меня в блоке таблица, потому как там картинка резанная на 15 чкаситей для резины

и я не знаю как заменить ячейки таблицы для них

100% конечно а как иначе без ста, вот и поведуйте что должно быть вместо ста

если их убрать то блоки с меню и с контентом сжимаются кверху

DVD · March 4, 2008

У Вас применено абсолютное позиционирование блоков, поэтому сайт уезжает вниз на ширину Вашей шапки #menu, #content {top: 204px} попробуйте в этих блоках поставить height меньше 100%, а min-height: 100% совсем удалить - и Вы увидите, что сайт перестанет уезжать по вертикали за границу окна. Но это просто ответ на Ваш вопрос в лоб. Лучше все переписать, то есть как говорится читать мануал до полного просветления. В IE6 Ваш сайт еще и вправо уехал имеем горизонтальную полосу прокрутки.

Golden_Puma · March 5, 2008

У Вас применено абсолютное позиционирование блоков, поэтому сайт уезжает вниз на ширину Вашей шапки #menu, #content {top: 204px} попробуйте в этих блоках поставить height меньше 100%, а min-height: 100% совсем удалить - и Вы увидите, что сайт перестанет уезжать по вертикали за границу окна. Но это просто ответ на Ваш вопрос в лоб. Лучше все переписать, то есть как говорится читать мануал до полного просветления. В IE6 Ваш сайт еще и вправо уехал имеем горизонтальную полосу прокрутки.

до того как я применила абсолютное позиционирование, огн все равно уекзжал вниз на высоту шапки

я поставила 80% ввосту блоков меню и контента, мин убрала - сайт все равно уезжает (правда на меньшее растояние).

А вот с шириной изначально у меня было все нормально - это наверное после применения абсолютного позиционировния почему то уехала еще и ширина

может мне все таки объяснит как правильно? ПЛИЗ

Golden_Puma · March 5, 2008

ой у меня кажется получилось ширину нормальной сделать - убрала 100% weight во вложенной таблице в блоке "контент"

высота нрмальная получилась тлько в Опере и в Мазиле заданием расположения всех 4 углов у блоков "меню" и "контент"

а вот в Эксплоурере все равно данные блоки подтяиваются кверху

Dimitry Wolotko · March 5, 2008

mmm "Проблемы с версткой"

DVD · March 5, 2008

Вот тут у Влада все подробно описано http://htmlbook.ru/content/?id=102. Прочитайте и все будет хорошо. Практически Ваш макет (шапка, меню, контент). Особенно хороши там комментарии к статье, все подробно расписано, где какие подводные камни нас ждут. Если Вам нужны колонки меню и контента одинаковой высоты, то про это тоже здесь имеется http://htmlbook.ru/content/?id=109. Удачи.

Sign In

Сайт уезжает по вертикали за границу окна

Question

Golden_Puma

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

iRina

Link to comment

Share on other sites

Golden_Puma

Link to comment

Share on other sites

DVD

Link to comment

Share on other sites

Golden_Puma

Link to comment

Share on other sites

Golden_Puma

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

DVD

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information