"Резиновые" элементы форм

Poca · December 11, 2008

Подскажите, пожалуйста, можно ли стандартными средствами html/css (без использования JavaScript) сделать резиновые элменты управления формы?

Мне хотелось бы сделать форму, в которой правая граница элементов управления была бы всегда на одном расстоянии от правой границы формы.

s0rr0w · December 11, 2008

Подскажите, пожалуйста, можно ли стандартными средствами html/css (без использования JavaScript) сделать резиновые элменты управления формы?
Мне хотелось бы сделать форму, в которой правая граница элементов управления была бы всегда на одном расстоянии от правой границы формы.

Ничего не понял.

Можно подробнее, с рисунками, с примерами кода?

Poca · December 11, 2008

Форма на странице имеет ширину 100%. Реальная ширина формы в общем случае нам неизвестна, так как зависит от разрешения экрана, размера окна браузера и т.д.

html:

<form>

<label for="foo">Введите текст:</label>

</form>

css:

label {

float : left;

width : 150px;

}

input {

margin-left : 155px;

width : auto; <—- не работает

width : 100%; <—- не работает

margin-right : 4px; <—- не работает

}

Задача: сделать так, чтобы независимо от фактического размера формы у элемента <input> правая граница (проще говоря margin-right) было N пикселей всегда.

Я не знаю как проще объяснить =(

Edited December 11, 2008 by Poca

rus · December 11, 2008

Вариант не идеален, но:

<style>
html, body {
width : 100%;
margin:0;
padding:0;
}
label {
float:left;
width:150px;
border:#333333 solid 1px;
}

input {
position:absolute;
top:0;
right:4px;
border:#FF0000 dotted 1px;
width : 80%;
}
</style>
</head>

<body>
<form>
<label for="foo">Введите текст:</label>
<input type="text" name="foo" id="foo" />
</form>

Poca · December 11, 2008

В опере при уменьшении окна поле ввода наплывает на метку =(

rus · December 11, 2008

В опере при уменьшении окна поле ввода наплывает на метку =(

Так а я и написал что вариант не идеален, просто натолкнул на мысль, а дальше думай сам!

s0rr0w · December 11, 2008

Я не знаю как проще объяснить =(

Не проще надо, а достаточно внятно.

Упрощенный код

<div>
 <label />
 <input />
</div>

div 
{
margin: 0px 4px 0px 150px;
}
label 
{ 
width: 140px; floa: left; 
}
input
{
width: 100%;
}

Копай в эту сторону. У ИЕ есть ряд проблем, но, думаю, обойти можно.

Poca · December 11, 2008

спасибо. не работает.

Edited December 11, 2008 by Poca

s0rr0w · December 11, 2008

спасибо. не работает.

От меня полностью рабочий код вы никогда не дождетесь. Начните думать своей головой. Направление куда копать дали.

Да, и не работает, потому что в коде есть ошибка.

Edited December 12, 2008 by s0rr0w

sm0k · December 12, 2008

Можно так:

float: right;
margin-right:30px;

Poca · December 12, 2008

От меня полностью рабочий код вы никогда не дождетесь. Начните думать своей головой. Направление куда копать дали.
Да, и не работает, потому что в коде есть ошибка.

Если вы про опечатку во float, то она конечно мной была сразу замечена и исправлена.

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

s0rr0w · December 12, 2008

Если вы про опечатку во float, то она конечно мной была сразу замечена и исправлена.
А вообще, мне очень неприятно, что вы мне хамите. Я, возможно, тут лишний человек, но я думаю было бы правильно просто сказать об этом сразу. Еще раз прошу спасибо за помощь и извините за моей вопрос - больше не буду вам мешать и появляться на этом форуме.

О, я еще и хамлю оказывается...

Да без проблем, можете не появляться на форуме.

Вам дали направление копать несколько человек. Немного умственных усилий, и вы найдете решение.

Удачи!

spdif · December 12, 2008

От меня полностью рабочий код вы никогда не дождетесь. Начните думать своей головой. Направление куда копать дали.

+1 к s0rr0w

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

Как говориться, хочешь помочь голодающему - не давай ему рыбу а дай ему удочку.

Poca · December 12, 2008

Я в течение всей последней недели разрабатываю панель администрирования некоторым контентом для сайта компании. В принципе вопросов не возникало ни на одном этапе, за исключением этого. Уже несколько дней я стараюсь решить этот вопрос. Было испробована масса вариантов, в том числе и те, которые предоложили здесь. Когда все мои варинты были исчерпаны, мне пришлось задать вопрос на вашем форуме.

Я прекрасно понимаю, что нужно думать своей головой. Однако мои возможности ограничены моим IQ и опытом использования HTML - к сожалению (или к счастью) это не моя область. К тому же ответа в интернете не нашлось и с помощью поисковых систем.

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

s0rr0w · December 12, 2008

Я в течение всей последней недели разрабатываю панель администрирования некоторым контентом для сайта компании.

Вы за это получаете деньги. А мы - ничего. Почему мы должны вам помогать зарабатывать деньги?

Poca · December 12, 2008

Почему мы должны вам помогать зарабатывать деньги?

А где я это утверждаю?

Так все-таки ваш благородный позыв не оказывать юному, ленивому неучу оказывать медвежью услугу на деле оказался банальной корыстью?

P.S.: Жаль, что фидо медленно, но верно умирает =( Там считалось позорным выложить непроверенный код с ошибками =(

Edited December 12, 2008 by Poca

s0rr0w · December 12, 2008

А где я это утверждаю?
Так все-таки ваш благородный позыв не оказывать юному, ленивому неучу оказывать медвежью услугу на деле оказался банальной корыстью?
P.S.: Жаль, что фидо медленно, но верно умирает =( Там считалось позорным выложить непроверенный код с ошибками =(

Вы для какой-то компании это делаете. Бесплатно? Или вы зарплату получаете?

Если я вам скажу, что мне нужно вскопать огород, кто может сделать, помогите, вы пойдете мне копать огород? Я думаю, что бесплатно - нет. И за маленькую плату тоже нет. Я ценю свои знания, а вы мои - нет. Я ценю знания, потому что я кропотливо их собирал на протяжении не одного года, а вы хотите получить все готовое. Я вам чем-то обязан? Я думаю, что никто тут ничем вам не обязан.

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

Чтобы научить человека плавать - бросьте его в воду.

Poca · December 12, 2008

Вы для какой-то компании это делаете. Бесплатно? Или вы зарплату получаете?
Если я вам скажу, что мне нужно вскопать огород, кто может сделать, помогите, вы пойдете мне копать огород? Я думаю, что бесплатно - нет. И за маленькую плату тоже нет. Я ценю свои знания, а вы мои - нет. Я ценю знания, потому что я кропотливо их собирал на протяжении не одного года, а вы хотите получить все готовое. Я вам чем-то обязан? Я думаю, что никто тут ничем вам не обязан.
А мне не позорно выкладывать часть кода, не весь, потому что я хочу, чтобы вы думали своей головой, а не моей. Поверьте, это поможет вам в первую очередь. Особенно когда не будет таких как мы под рукой.
Чтобы научить человека плавать - бросьте его в воду.

Поверьте мне, в моем возрасте поздно учиться думать. В той области, в которой я специалист, я решаю задачи горадо более сложные задачи с помощью своей головы. Не нужно учить меня думать - вам на это уже был дан неоднократный ответ. Мало того, вы абсолютно не знаете меня. Еще раз повторяю - я не считаю, что мне тут кто-то должен. Не понимаю с чего вы это взяли и зачем мне об этом говорите. Неужели вы действительно не понимаете, что ведете себя невежливо?

Знаете, мне очень неудобно, что мне пришлось тут задать вопрос. Как так так сложилось, что обычно, что вопросы задают мне. И меня тоже часто раздражает, когда люди не хотят думать своей головой, но данный случай - совершенно другая ситуация.

С моей стороны ваше поведение выглядит так: "я не понял вопроса, я не знаю ответа, вот тебе твой же кусок кода, разбирайся сама, дура". Я вполне допускаю, что у вас совершенно другие мотивы, но это мое видение и мое отношение к вашим ответам.

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

Парадокс, но именно за этот проект, мне не заплатят ни копейки. Так что и тут вы ошиблись. И я даже могу не упоминать об этом, поэтому не считаю, что это важно - ищу я помощи в процессе зарабатывания денег или в процессе обучения (для того чтобы зарабатывать эти деньги позже). Все зависит от вашего желания - хотите вы помочь или нет. У меня и в мыслях не было что-то от кого-то требовать или обвинять кого угодно в нежелании помочь.

Более того - заглядывать в чужой карман тоже не принято.

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

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

Если вам есть что добавить или уточнить по этому вопросы - с удовольствем продолжу диалог. Если же вы считаете вправе учить меня, что-же это ваше право и ваша совесть. Я же здесь не за этим...

Edited December 13, 2008 by Poca

s0rr0w · December 13, 2008

В той области, в которой я специалист, я решаю задачи горадо более сложные задачи с помощью своей головы. Не нужно учить меня думать - вам на это уже был дан неоднократный ответ. Мало того, вы абсолютно не знаете меня. Еще раз повторяю - я не считаю, что мне тут кто-то должен. Не понимаю с чего вы это взяли и зачем мне об этом говорите. Неужели вы действительно не понимаете, что ведете себя невежливо?

Если вы специалист и все такое, у меня есть простой вопрос, а какого вы полезли туда, в чем ни бум-бум? Найдите специалиста, который сделает вам нужное за пять минут! Упс, ему придется чем-то заплатить. Ай-я-яй... незадача вышла.

Знаете, мне очень неудобно, что мне пришлось тут задать вопрос. Как так так сложилось, что обычно, что вопросы задают мне. И меня тоже часто раздражает, когда люди не хотят думать своей головой, но данный случай - совершенно другая ситуация.

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

С моей стороны ваше поведение выглядит так: "я не понял вопроса, я не знаю ответа, вот тебе твой же кусок кода, разбирайся сама, дура". Я вполне допускаю, что у вас совершенно другие мотивы, но это мое видение и мое отношение к вашим ответам.

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

И прошу вас - заканчивайте обвинять меня в том, что я от кого-то что-то требую. В данной теме на это нет даже и намека. Вы сами это выдумали и начинаете меня в этом обвинять. Думаю причина проста - просто по сути вопроса вам ответить нечего.
Парадокс, но именно за этот проект, мне не заплатят ни копейки. Так что и тут вы ошиблись. И я даже могу не упоминать об этом, поэтому не считаю, что это важно - ищу я помощи в процессе зарабатывания денег или в процессе обучения (для того чтобы зарабатывать эти деньги позже). Все зависит от вашего желания - хотите вы помочь или нет. У меня и в мыслях не было что-то от кого-то требовать или обвинять кого угодно в нежелании помочь.

Если вы хотите учиться - учитесь, и я вам помогу. Учиться. А зарабатывать деньги - нет, уж извините, но мне их никто не помогает зарабатывать.

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

Решения есть.

Если вам есть что добавить или уточнить по этому вопросы - с удовольствем продолжу диалог. Если же вы считаете вправе учить меня, что-же это ваше право и ваша совесть. Я же здесь не за этим...

Ах да, не за тем, чтобы учиться. Черт, как я не догадался сразу. А пару строками выше было написано чуть ли не обратное.

Ну да ладно.

Poca · December 13, 2008

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

Еще раз всем спасибо за помощь и извините еще раз, если кого-то мой вопрос обидел или задел каким-то другим образом. Прошу закрыть тему.

P.S.: s0rr0w, вы все-таки определитесь - или вам жалко бесплатно делиться своим опытом - в этом случае, я думаю, надо было называть цену, или вы хотите чему-то научить - тогда не стоит, на мой взгляд, выкладывать непроверенный код с ошибками - в нем нет никакой образовательной ценности. Тем более что точно такой же код был мной написан до вопроса на форуме - для этого вполне достаточно и моего крошечного опыта.

Edited December 13, 2008 by Poca

Sign In

"Резиновые" элементы форм

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information