VPF::Оформление форм DIV-блоками - Форум программистов

artuska

Дата 8.8.2007, 14:01 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 5.5.2007

Репутация: нет
Всего: нет

Собственно, вопрос - как, не используя таблицы, оформить форму в строки и колонки.

Пример с таблицами:

Код


<form>
  <table>
   <tr>
     <td width="150">Имя:</td><td><input type="text" /></td>
   </tr>
   <tr>
     <td width="150">Фамилия:</td><td><input type="text" /></td>
   </tr>
  </table>
</form>

А теперь с ДИВ'ами - как? Типа вместо табличного TD делать ДИВ и с помощю float:left; ставить их в ряд, а с помощю clear:right; - делать строки? По-моему это геморрой. Если нет нормальных вариантов - я разочаруюсь в жизни.

Код


<div style="float:left; width:150px;">Имя:</div><div style="margin-left:150px;"><input type="text" /></div> //этот DIV растянется на всю оставшуюся ширину и не надо никаких clear:right; чтобы перейти на другую строку
<div style="float:left; width:150px;">Фамилия:</div><div style="margin-left:150px;"><input type="text" /></div>

Кто какими способами верстает формы без дивов таблиц? (На данный этап жизни ничего лучше, кроме таблиц, для верстки форм, не нахожу.)

Это сообщение отредактировал(а) artuska - 8.8.2007, 14:02

japanes

Дата 8.8.2007, 14:11 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

Цитата(artuska @ 8.8.2007, 13:01

)

На данный этап жизни ничего лучше, кроме таблиц, для верстки форм, не нахожу

а и не надо.

artuska

Дата 8.8.2007, 14:17 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 5.5.2007

Репутация: нет
Всего: нет

Цитата(japanes @ 8.8.2007, 14:11

)

а и не надо.

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

(Просто есть такой сайтик http://www.uptonic.com/ (щас закрыт) - так вот там была форма оформлена без таблиц <p> тэгами. Сегодня хотел разобраться, захожу, а сайт не работает, гы. Собсно, по-этому и создал тему.)

japanes

Дата 8.8.2007, 14:22 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

artuska, вообще оформление форм на любителя, кому нужны острые ощущения, тот делает через блоки. главное не понимать под понятием «семантическая верстка» — верстка блоками.

artuska

Дата 8.8.2007, 14:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 5.5.2007

Репутация: нет
Всего: нет

Хочу адреналина!!!

И хочу узнать, как ИЗЯЩНО оформить DIV'ами форму.

japanes

Дата 8.8.2007, 15:47 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

artuska, изящно, это как (для лучшего понимания вопроса можно приложить скриншот того, что надо получить)?

artuska

Дата 9.8.2007, 09:25 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 5.5.2007

Репутация: нет
Всего: нет

Получить надо обычную форму.
Изящно - это минимум хтмл и цсс кода.

В таблицах - куча TR'ок и TD'шек, в DIV'ах - куча стилей с float'ами. Очень длинные и громоздкие коды получаются, когда в форме много полей для заполнения. Пока ничего с этим поделать не могу.

japanes

Дата 9.8.2007, 11:39 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

artuska, тогда таблица ;)

artuska

Дата 9.8.2007, 11:43 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 5.5.2007

Репутация: нет
Всего: нет

Во-во! Так уже и делаю...

Uratsakidogi

Дата 9.8.2007, 11:43 (ссылка)

(голосов:1)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 118
Регистрация: 17.10.2006

Репутация: 11
Всего: 11

Код


<form>
<div><label for="name">Имя:</label><input id="name" type="text"></div>
Повторить нужное количество раз.
</form>

Код


/*клирим див*/
form div:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
form div {display: inline-block;}
/*\*/
* html form div {height: 1%;}
form div {display: block;}
/**/
/*закончили клиринг*/
form label, form input {
    float: left;
}
form label {
    width: 150px;
    /*остальные стили по вкусу*/
}

По идее, этого должно быть достаточно. Клиринг можно использовать и более компактный, например через overflow: hidden.

Это сообщение отредактировал(а) Uratsakidogi - 9.8.2007, 11:44

--------------------

ЖЖ | ВерстаюНЕПОЗВОЛЯЙТЕ ЯЩЕРИКАМ, ОТРИЦАТЕЛЬНЫМ ИНОПЛАНЕТЯНИНАМ ОВЛАДЕВАТЬ ВАС, НЕ СТАНОВИТЕСЬ ИХ МАРИОНЕТКАМИ!

artuska

Дата 10.8.2007, 12:00 (ссылка)

(голосов:1)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 5.5.2007

Репутация: нет
Всего: нет

Ура!

Вот это мне и нужно!!!
Переделал форму на ДИВ-блоки!!!

Код


   #form
    {
     width: 250px;
    }

   #form div
    {
     display: block;
     clear: both;
    }

   #form label, #form input
    {
     float: left;
    }
   #form label { width: 90px; text-align: left; margin-top: 8px; }
   #form input { width: 155px; }

Код


     <div id="form">

      <form method="POST" action="">
       <div><label for="login">Login:</label><input type="text" name="login" id="login" value="" /></div>
       <div><label for="password">Password:</label><input type="password" name="password" id="password" value="" /></div>
      </form>

     </div>

Ничего лишнего - и хтмл и цсс код ооочень компактен!
Uratsakidogi, спасиба!

SamDark

Дата 10.8.2007, 14:45 (ссылка)

(голосов:1)

Загрузка ...

Добрый кот

Профиль
Группа: Участник
Сообщений: 1424
Регистрация: 25.7.2006
Где: Voronezh

Репутация: 6
Всего: 38

artuska,

Код


#form
    {
     width: 250px;
    }

   #form label
    {
     display: block;   
     margin-top: 8px;
    }

   #form input { width: 155px; }

Код


      <form id="form" method="POST" action="">
          <label>Login:<input type="text" name="login" id="login" value="" /></label>
          <label>Password:<input type="password" name="password" id="password" value="" /></label>
      </form>

--------------------

rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены

artuska

Дата 11.8.2007, 19:46 (ссылка)

(голосов:1)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 68
Регистрация: 5.5.2007

Репутация: нет
Всего: нет

Цитата(SamDark @ 10.8.2007, 14:45

)

<label>Login:<input type="text" name="login" id="login" value="" /></label>

Нет, такая конструкция валидность не пройдет. Да если и забить на валидность - структура абсолютно нелогична.

Думаю, тема может быть закрыта.

Uratsakidogi

Дата 11.8.2007, 23:24 (ссылка)

(голосов:1)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 118
Регистрация: 17.10.2006

Репутация: 11
Всего: 11

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

--------------------

SamDark

Дата 13.8.2007, 12:00 (ссылка)

(голосов:1)

Загрузка ...

Добрый кот

Профиль
Группа: Участник
Сообщений: 1424
Регистрация: 25.7.2006
Где: Voronezh

Репутация: 6
Всего: 38

artuska,
Пройдёт. Попробуйте.

Uratsakidogi,
В Firefox, Opera, IE точно не требуется.

--------------------

rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены

Georgich

Дата 20.1.2008, 12:51 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 20.1.2008

Репутация: нет
Всего: нет

Привет всем! Начал верстать под DataLife div'ами. Столкнулся с такой проблемой. Не могу понять, почему в "подвале" (оно же ft) не отображается фон. Вот код в CSS и HTML :

Код

html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
,textarea,p,blockquote,th,td{margin:0;padding:0;}
body {font:11px arial,helvetica,clean,sans-serif;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
body{text-align:center;}
#ft{clear:both;text-align: center;padding: 4px 0;background-image: url("{THEME}/images/19.jpg");}
#doc{margin:auto;text-align:left;width:57.69em;min-width:750px; border-left:1px solid #000; border-right:1px solid #000;background:#ffffff}
.yui-b{position:relative;}
#yui-main .yui-b{position:static;}
#yui-main{width:100%;}
.yui-t2 #yui-main{float:right;margin-left:-25em;}
.yui-t2 .yui-b{float:left;width:13.8456em;}
.yui-t2 #yui-main .yui-b{margin-left:14.8456em;}
#yui-main .yui-b{float:none;width:auto;}
#bd:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

Код

<body background="{THEME}/images/bg.jpg">
{AJAX}
<div id="doc" class="yui-t2">
<div id="hd">
<img src="{THEME}/images/1.jpg" width=236 height=124>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
{content}
</div>
</div>
<div class="yui-b">
{topnews}
</div>
</div>
<div id="ft">
<b>текст</b>
</div>
</div>
</body>

Надеюсь на ваше помощь. СпасибО!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »