Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Ширина и отступы элемента

Автор: tekfla 6.9.2008, 06:13

Здрасьте!

Скажите плз, как сделать элемент с отступами (padding) во всю ширину (width: 100%) (и не шире) родителя? При установке отступов или границ элементу он становится шире родителя, появляются полосы прокрутки и пр.

http://tekfla.on.ufanet.ru/ie6_element_full_width.png
(также прикреплен к сообщению)

Код

<input type="text" style="width: 100%" />

Автор: bars80080 6.9.2008, 08:58

а если добавить:

Код


* { margin: 0px ;padding: 0px; }

Автор: tekfla 6.9.2008, 09:04

к чему? повторяю: мне нужно с отступами. ведь не уберешь же padding у текстового поля. это такой кошмар получается... (=

Автор: bars80080 6.9.2008, 09:05

ко всему. забабахайте этот стиль самым первым и посмотрите что получится

Автор: tekfla 6.9.2008, 09:41

http://tekfla.on.ufanet.ru/ie6_element_full_width_2.png

- помогает только убирание границ текстбокса. собсна, нужен какой-то другой подход (=

Автор: Itsys 6.9.2008, 12:11

А так:

Код


<!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">
<!--
#cont {
    width: 100%;
}
-->
</style>
</head>

<body>
<div id="cont"><input type="text" style="width:100%"></div>
</body>
</html>

Автор: bars80080 6.9.2008, 13:29

может, я непонятно пишу, но вообще-то элемент к которому это применяется уже написан - * - что значит - ко всему

Код


<!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">
<!--
 * { margin: 0px ;padding: 0px; } 
-->
</style>
</head>

<body>
<input type="text" style="width:100%" />
</body>
</html>

что в этом случае будет?

Автор: SelenIT 6.9.2008, 14:01

bars80080, как я понял, ему нужно вписать инпут в контейнер с заданными полями от правого-левого краев. 100% + margin действительно не спасает.

В современных браузерах помогает position:absolute и одновременное задание left и right (сколько нужно отступить). В IE6-7 единственный известный мне вариант (в рамках стандартного режима) - через expression (типа width: expression(this.parentNode.clientWidth - this.pixelLeft - this.pixelRight + 'px')).

Автор: tekfla 7.9.2008, 12:30

bars80080, как и сказал http://forum.vingrad.ru/index.php?showtopic=227024&view=findpost&p=1632744, установка нулевых отступов всем элементам посредством * {margin: 0; padding: 0} не помогает, более того, способствует появлению полос прокрутки даже в современных браузерах.

http://forum.vingrad.ru/index.php?showtopic=227024&view=findpost&p=1632665, http://tekfla.on.ufanet.ru/ie6_element_full_width_3.png (в ie6), причем даже если контейнеру поставить большие отступы )=

SelenIT, если даже воспользоваться регулярными (или как они там называются? (= ) выражениями для ie, то все равно в остальных браузерах элемент будет"вылезать" за рамки контейнера. может быть есть другие пути (кроме перевода браузера в (режим) "quirks mode")?

Автор: bars80080 7.9.2008, 17:16

задать 95-98% в зависимости от настроек с полями. в таком случае полоса прокрутки раньше появится по другой причине

Автор: tekfla 7.9.2008, 17:31

попиксельной точностью тут, конечно, и не пахнет... кстати, я спасибо за идеи, но все-таки, на этом форуме я ожидал увидеть что-то более оригинальное

Цитата

полоса прокрутки раньше появится по другой причине

соре, не догнал, по какой причине?

Автор: webster 7.9.2008, 18:13

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin: 0px; padding: 0px; }
body {
    font: 76.5%/1.30em arial, tahoma, sans-serif;;
}
form, fieldset, .wrapper {
    width: 100%; border: 0px none;
}
.margintext {
    margin: 0px 15px 5px 15px; display: block; border: 1px solid;
}
.margintext .text {
    width: 100%; border: 0px none;
}
.marginsubmit {
    margin: 0px 15px 5px 15px; display: block;
}
</style>
</head>
<body>
<form action="#" method="post">
<fieldset>
    <label class="margintext"><input class="text" type="text" /></label>
    <label class="marginsubmit"><input class="submit" type="submit" value="Отправить" /></label>
</fieldset>
</form>
</body>
</html>

Эту форму можно вложить в контейнер любого размера. Роль границ инпута играют границы <label>, инпут растянут на 100% в этом можно убедиться, сняв border: 0px none;

Автор: tekfla 8.9.2008, 04:51

webster, ну ты в очередной раз тормозишь. суть вопроса в том, что нужно НЕ УБИРАТЬ ОТСТУПЫ У ТЕКСТОВОГО ПОЛЯ!!! к тому же, видимо ты ошибся темой - причем здесь вообще кнопка "Отправить"? в общем, всем спасибо, все свободны. *пошел просить помощи на официальных ресурсах на своем ломаном английском*

Автор: webster 8.9.2008, 05:40

tekfla приператься с тобой желания никакого нет, ты бы хоть пробовал и смотрел варианты которые тебе были предложены, опыт может придти только с практикой и не только чтения.