резиновый сайт слоями. Смещение при input 100%

xim · May 30, 2010

Добрый день, помогите разобраться, делаю двух колонную верстку сайта слоями.

Расположение слоев позиционное. Не могу разобратся с проблемой: если во вторую колонку вставить элемент input(с другими тоже бывает) с шириной 100% то появлется смещение/растяжение второй колонки. В Chrome это слабо заметно но она есть, а в IE6 вообще появляется полоса прокрутки..

Если этот input еще и обернуть 100% div, то в IE6 вообще появляется огромное смещение input относительно колонки, и появляется полоса прокрутки..

Нашел тут тему про полосу прокрутки в резиновом сайте в IE6 http://forum.htmlbook.ru/index.php?showtopic=20894

Если октрыть код приведенный там, то тоже все нормально, сайт в IE6 отображается нормально.. НО если вставить 100% input в центральную часть, то опятье же появится куча смещений..

Подскажите пожалуйста как решить эту проблему?

<!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>
<style type="text/css">
BODY {
 padding: 0; /* Отступы для браузера Opera */ 
 margin: 0; /* Обнуляем значения отступов на веб-странице */ 
}
#leftcol {
 position: absolute; /* Абсолютное позиционирование */
 width: 200px; /* Ширина слоя */
 left: 0; /* Положение от левого края окна */ 
 background: #800000; /* Цвет фона левой колонки */
 padding: 5px; /* Поля вокруг текста */ 
}
#leftcol A {
 color: white; /* Цвет ссылок */ 
}
#rightcol {
 position: relative; /* Относительное позиционирование */
 margin-left: 200px; /* Отступ слева */ 
 background: #e0e0e0; /* Цвет фона правой колонки */
 padding: 10px; /* Поля вокруг текста */
}
H1 {
 margin: 0; /* Убираем отступы */ 
}
</style>
</head>
<body>
<div id="leftcol">
 <a href="link1.html">Ссылка 1</a><br>
 <a href="link2.html">Ссылка 2</a><br>
 <a href="link3.html">Ссылка 3</a><br>
 <a href="link4.html">Ссылка 4</a><br>
</div>
<div id="rightcol">
<h1>Lorem ipsum dolor sit amet</h1>

<!--<div style="width:100%;">
	<input style="width:100%;">
</div>
-->
<input style="width:100%;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>
</html>

pimandr · May 31, 2010

Ну а от чего у тебя инпут должен 100% считать, если ширина ни у одного родителя не указана? Чтобы разногласий между браузерами не было, такие вещи лучше в явном виде указывать, а не надеяться что браузер сам догадается)

Да еще плюс почитай как различные браузеры к паддингам и маргинам относятся.

Не проверял, но я так понимаю что вертикальный скрол - это результат 100%ширины body+200px маргина, плюс, возможно, еще и 20px от паддингов (по 10 слева и справа).

Да и первый блок, сделанный абсолютом - маразм. Чем флоаты не угодили?)

Edited May 31, 2010 by pimandr

xim · May 31, 2010

да не важно это я для примера... с флоатами та же проблема. Я и спрашиваю, как при верстке дивами, размещать 100% ый элемент внутри второй колонки - которая растягивается в зависимости от ширины браузера.

psywalker · May 31, 2010

Вообще это баг ИЕ6, не обращай внимание.

Делай так, убери ширину у дива, а импуту задай не 100%, а 98% например и всё будет хорошо.

pimandr · June 1, 2010

А, не, был не прав сильно. Проверил, косяк в другом.

Я и спрашиваю, как при верстке дивами, размещать 100% ый элемент внутри второй колонки - которая растягивается в зависимости от ширины браузера.

Достаточно просто: нужно понять, из чего может складываться ширина. Выше я перечислил почти все возможные слагаемые: width, margin, padding и.... BORDER)))

Конкретно в твоем случае - обнули бордер и паддинг для инпута и будете тебе щастье)

Edited June 1, 2010 by pimandr

Sign In

резиновый сайт слоями. Смещение при input 100%

Question

xim

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

pimandr

Link to comment

Share on other sites

xim

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

pimandr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information