еще вопрос по CSS
От: Jack128  
Дата: 06.05.11 10:15
Оценка: 

<!doctype html>
<html>
<head>
<style>

</style>
</head>
<body>

<div class="cont">
    <div class="label">kjfckrjekcr</div>
    <div class="editor"><input></input></div>
</div>
</body>
</html>



собственно вопрос, как сделать, что метка и редактор шли одной строкой, причем чтоб editor вытягивается в ширину до правого края родительского cont 'а
Re: еще вопрос по CSS
От: MicSOFT  
Дата: 06.05.11 13:12
Оценка:
Здравствуйте, Jack128, Вы писали:

J>

J><!doctype html>
J><html>
J><head>
J><style>

J></style>
J></head>
J><body>

J><div class="cont">
J>    <div class="label">kjfckrjekcr</div>
J>    <div class="editor"><input></input></div>
J></div>
J></body>
J></html>

J>



J>собственно вопрос, как сделать, что метка и редактор шли одной строкой, причем чтоб editor вытягивается в ширину до правого края родительского cont 'а

<div class="cont">
  <label>Enter Your name:</label>
  <input name="name" type="text" />
</div>
Re[2]: еще вопрос по CSS
От: Jack128  
Дата: 06.05.11 13:17
Оценка:
Здравствуйте, MicSOFT, Вы писали:

J>>собственно вопрос, как сделать, что метка и редактор шли одной строкой, причем чтоб editor вытягивается в ширину до правого края родительского cont 'а

MSO>
MSO><div class="cont">
MSO>  <label>Enter Your name:</label>
MSO>  <input name="name" type="text" />
MSO></div>
MSO>


выделенное не выполняется.
Re: еще вопрос по CSS
От: MicSOFT  
Дата: 06.05.11 13:27
Оценка:
Здравствуйте, Jack128, Вы писали:

J>собственно вопрос, как сделать, что метка и редактор шли одной строкой, причем чтоб editor вытягивается в ширину до правого края родительского cont 'а


  <style type="text/css">
  /*<![CDATA[*/
  .editor > * { display: block }
  .editor > label { float: left }
  .editor > div { overflow: hidden }
  .editor input { width: 100% }
  /* To DEBUG ONLY */
  .debug { border: 1px solid red }
/*]]>*/
</style>
</head>
<body>
  <div class="editor debug">
    <label>Enter Your name:</label>
    <div><input name="name" type="text" /></div>
  </div>
Re[3]: еще вопрос по CSS
От: avpavlov  
Дата: 06.05.11 13:38
Оценка: +1 

<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>


<div class="cont" >
    100%<br/>
    <table >
        <tr>
             <td style="width:1%"><label style="white-space:nowrap">my multi word label</label></td>
             <td><input name="name" type="text" style="width:100%" /></td>
        </tr>
    </table>
</div>

<div class="cont" style="width:400px;">
    400px<br/>
    <table >
        <tr>
             <td style="width:1%"><label style="white-space:nowrap">my multi word label</label></td>
             <td><input name="name" type="text" style="width:100%" /></td>
        </tr>
    </table>
</div>
</body>
</html>



Верстайте табличное таблицами!
Re[3]: еще вопрос по CSS
От: MicSOFT  
Дата: 06.05.11 13:42
Оценка:
Здравствуйте, Jack128, Вы писали:

J>выделенное не выполняется.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Client data</title>
<style type="text/css">
/*<![CDATA[*/
.editor * { display: block }
.editor > label { float: left }
.editor > span { overflow: hidden }
.editor input { width: 100% }
/* To DEBUG */
.debug { border: 1px solid red }
/*]]>*/
</style>
</head><body>
<form action="client.cgi" method="post">
  <div class="editor debug">
    <label for="inputName">Enter Your name:</label>
    <span><input id="inputName" name="fieldName" type="text" size="100" title="Max length is 100 characters" maxlength="100" /></span>
  </div>
</form>
</body></html>
Re[4]: еще вопрос по CSS
От: Jack128  
Дата: 10.05.11 10:37
Оценка:
Здравствуйте, MicSOFT, Вы писали:

хе, ты не задаешь ширину input'a а просто отсекаешь его его изображение -) опять же — это не то, края input'а не видно. В общем единственное решение на css, которое я нашел, и то, только для IE8 и выше:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Client data</title>
<style type="text/css">
.cont
{
    display:table;
}

.label, .editor { display:table-cell }
.editor input { box-sizing: border-box; moz-box-sizing: border-box; width : 100% }
</style>
</head><body>
<div class="cont">
    <div class="label">kjfckrjekcr</div>
    <div class="editor"><input></input></div>
</div>
</body></html>
Re[4]: еще вопрос по CSS
От: Jack128  
Дата: 10.05.11 10:43
Оценка:
Здравствуйте, avpavlov, Вы писали:

A>Верстайте табличное таблицами!

Да мне кажется уж очень раздут синтаксис у таблиц, в aspx уже не видно, что мы собственно отображаем на странице, одни table/tr/td..
Эх, если бы такое работало: http://habrahabr.ru/blogs/css/109276/ насколько была бы приятнее жизнь.
Re[5]: еще вопрос по CSS
От: avpavlov  
Дата: 10.05.11 10:57
Оценка:
J>Да мне кажется уж очень раздут синтаксис у таблиц, в aspx уже не видно,

Лучше заменить на систему костыльков и верёвочек — наверное в АСП.НЕТ сразу всё понятно становится. Я вот когда вижу 2 подряд идущих дива сразу понимаю — это табличная вёрстка тут будет, а не просто один под другим.
Re[6]: еще вопрос по CSS
От: Jack128  
Дата: 10.05.11 11:02
Оценка:
Здравствуйте, avpavlov, Вы писали:


J>>Да мне кажется уж очень раздут синтаксис у таблиц, в aspx уже не видно,

A>Лучше заменить на систему костыльков и верёвочек — наверное в АСП.НЕТ сразу всё понятно становится. Я вот когда вижу 2 подряд идущих дива сразу понимаю — это табличная вёрстка тут будет, а не просто один под другим.

я правильно понимаю, что ты вообще принципиально против layout'a, заданного в css ?
Re[7]: еще вопрос по CSS
От: avpavlov  
Дата: 10.05.11 11:20
Оценка:
J>я правильно понимаю, что ты вообще принципиально против layout'a, заданного в css ?

Если "лайаута" в смысле "последовательность и взаимное расположение секций" — да, я против

Но остальное — размеры, цвета, рамки и прочее оформление — естественно это должно быть в ЦСС
Re: еще вопрос по CSS
От: _Cranberry_ Россия  
Дата: 12.05.11 22:01
Оценка:
Здравствуйте, Jack128, Вы писали:

J>

J><!doctype html>
J><html>
J><head>
J><style>

J></style>
J></head>
J><body>

J><div class="cont">
J>    <div class="label">kjfckrjekcr</div>
J>    <div class="editor"><input></input></div>
J></div>
J></body>
J></html>

J>



J>собственно вопрос, как сделать, что метка и редактор шли одной строкой, причем чтоб editor вытягивается в ширину до правого края родительского cont 'а


<div style="padding-left:120px;">
<label style="position:absolute; margin-left:-120px; display:block; height:20px;">Enter Your name:</label>
<input name="name" type="text" style="width:100%; height:20px;"/>
</div>

как вариант
Re[2]: еще вопрос по CSS
От: avpavlov  
Дата: 13.05.11 04:07
Оценка: +1
_C_>как вариант

этопростописец.

Ты наверное обидишься, но твой вариант это классический образец говно-вёрстки на дивах.
Re[3]: еще вопрос по CSS
От: _Cranberry_ Россия  
Дата: 13.05.11 07:02
Оценка:
Здравствуйте, avpavlov, Вы писали:


_C_>>как вариант

A>этопростописец.

A>Ты наверное обидишься, но твой вариант это классический образец говно-вёрстки на дивах.

Поясни
Re[4]: еще вопрос по CSS
От: avpavlov  
Дата: 13.05.11 07:50
Оценка:
A>>Ты наверное обидишься, но твой вариант это классический образец говно-вёрстки на дивах.

_C_>Поясни

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

А ещё есть люди, которые принудительно ставят размер шрифта в броузере крупнее — они будут плакать кровавыми слезами от твоей вёрстки.
Re[5]: еще вопрос по CSS
От: _Cranberry_ Россия  
Дата: 13.05.11 15:28
Оценка:
Здравствуйте, avpavlov, Вы писали:

A>>>Ты наверное обидишься, но твой вариант это классический образец говно-вёрстки на дивах.

_C_>>Поясни

A>Потому что ты прибил вёрстку гвоздями к пикселям. Если потребуется поменять текст данной метки или, что самое плохое, увеличить шрифт для всех меток на сайте, вся твоя вёртска пойдёт лесом.

A>А ещё есть люди, которые принудительно ставят размер шрифта в броузере крупнее — они будут плакать кровавыми слезами от твоей вёрстки.

У ТС задача стояла простая: выстроить метку и текстфилд в одну строку, так чтобы текстфилд растягивался в длину, все...
Re[6]: еще вопрос по CSS
От: Centaur Россия  
Дата: 13.05.11 18:45
Оценка:
Здравствуйте, _Cranberry_, Вы писали:

_C_>У ТС задача стояла простая: выстроить метку и текстфилд в одну строку, так чтобы текстфилд растягивался в длину, все...

Таких задач не бывает. Задача — сделать удобную форму. Удобная для пользователя форма должна обладать двумя желательными свойствами: (1) чтобы метки влезали в отведённое им пространство, и (2) чтобы всё остальное место занимало поле ввода. Удобная для верстальщика форма должна обладать ещё одним желательным свойством: (3) при изменении текста (например, при переводе на другой язык) или шрифта меток не требовать никаких других изменений (в обсуждаемом случае — ширину поля).

Я знаю единственный способ сделать такую форму, и это — размещать метку сверху от поля ввода, а не сбоку.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.