блочная верстка часть хз кк [Версия для КПК]

Показать полную графическую версию : блочная верстка часть хз кк

E-mail

21-08-2006, 23:16

есть проблемка вот в этом коде, если в ie сузить окно до 300 px то с колонкой right происходит полная хрень она растягивается, это наблюдается только под осла, под ff и opery все как надо, ктонибудь сталкивался с подобным, знает как решить? :clapping:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
p
{
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}

#top
{
margin-top: 0px;
margin-right: 40px;
margin-bottom: 0px;
margin-left: 20px;

padding: 10px;

border-width: 5px;
border-style: solid;
border-color: red;

height: 70px;
}
#center
{
overflow: hidden;

margin-top: 0px;
margin-right: 40px;
margin-bottom: 0px;
margin-left: 20px;

padding: 0px;

border-width: 5px;
border-style: solid;
border-color: green;

height: 100%;
}
#left
{
float: left;

margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

padding: 10px;

border-width: 5px;
border-style: solid;
border-color: orange;

width: 260px;
height: 100%;
}
#right
{
margin-top: 0px;
margin-left: 290px;
margin-bottom: 0px;
margin-right: 0px;

padding: 10px;

border-width: 5px;
border-style: solid;
border-color: blue;
}
#bottom
{
margin-top: 0px;
margin-right: 40px;
margin-bottom: 0px;
margin-left: 20px;

padding: 10px;

border-width: 5px;
border-style: solid;
border-color: #ccc;

height: 70px;
}
</style>
</head>
<body scroll=auto>
<div id=top>
<p>top</p>
</div>
<div id=center>
<div id=left>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id=right>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
<div id=bottom>
<p>bottom</p>
</div>
</body>
</html>

E-mail

22-08-2006, 00:31

кстати говоря, если добавить еще несколько элементов в блок right или left под ie появляется горизонтальный скролбар, откуда и иззачего он берется непонимаю..

помогите избавится от страшного горизонтального скролбара под ie очень надо(((...

E-mail

22-08-2006, 03:42

проблему скролбара по горизонтали решил, осталось раобраться с увеличением поля right идеи есть?:)

VeshchiyOleg

23-08-2006, 10:29

а почему ты все объявления css делаешь через id ???
может попробовать через class ???
id ведь должен быть уникальным, а class - нет

раз уж начал прописывать стили - иди до конца: сделай не
<body scroll=auto>
а

body
{
margin: 0px;
padding: 0px;
overflow: auto ;
}

у right задано margin-left:290px;
это зачем???
ведь если у тебя right не влезает в ширину то все равно отступает слева 290px

далее у тебя для left задано: height: 100%;
это так надо???
для right ни ширины ни высоты - стало быть ширина 100% от того, что осталось, но не меньше ширины самого длинного слова

Prisoner

23-08-2006, 12:56

проблему скролбара по горизонтали решил
И каким образом?

E-mail

23-08-2006, 18:05

VeshchiyOleg
http://forum.oszone.ru/thread-54706-all.html - это про scroll=auto

у right задано margin-left:290px;
это зачем???
ведь если у тебя right не влезает в ширину то все равно отступает слева 290px

если левая колонка меньше по высоте чем правая, то правая огибает левую снизу без отступа, (float:left; у left - посмотрите в коде)

насчет id поменять на классы - согласен, просто это был начальный черновой вариант, сейчас он уже намного видоизменился, единственно, так и не нашел способа как растянуть left и right от верхней до нижней границы center если контента в них мало

Prisoner
поставил body{width:97%} - дурацкое решение, но работает