Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Оформление форм DIV-блоками, Таблицами легко, а про дивы есть вопросы 
V
    Опции темы
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
PM MAIL   Вверх
japanes
Дата 8.8.2007, 14:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
Цитата(artuska @  8.8.2007,  13:01 Найти цитируемый пост)
На данный этап жизни ничего лучше, кроме таблиц, для верстки форм, не нахожу

а и не надо.
PM MAIL   Вверх
artuska
Дата 8.8.2007, 14:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
Цитата(japanes @  8.8.2007,  14:11 Найти цитируемый пост)
а и не надо.


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

(Просто есть такой сайтик http://www.uptonic.com/ (щас закрыт) - так вот там была форма оформлена без таблиц <p> тэгами. Сегодня хотел разобраться, захожу, а сайт не работает, гы. Собсно, по-этому и создал тему.)
PM MAIL   Вверх
japanes
Дата 8.8.2007, 14:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
artuska, вообще оформление форм на любителя, кому нужны острые ощущения, тот делает через блоки. главное не понимать под понятием «семантическая верстка» — верстка блоками.
PM MAIL   Вверх
artuska
Дата 8.8.2007, 14:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
Хочу адреналина!!!

И хочу узнать, как ИЗЯЩНО оформить DIV'ами форму.
PM MAIL   Вверх
japanes
Дата 8.8.2007, 15:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
artuska, изящно, это как (для лучшего понимания вопроса можно приложить скриншот того, что надо получить)?
PM MAIL   Вверх
artuska
Дата 9.8.2007, 09:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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

В таблицах - куча TR'ок и TD'шек, в DIV'ах - куча стилей с float'ами. Очень длинные и громоздкие коды получаются, когда в форме много полей для заполнения. Пока ничего с этим поделать не могу.
PM MAIL   Вверх
japanes
Дата 9.8.2007, 11:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
artuska, тогда таблица ;)
PM MAIL   Вверх
artuska
Дата 9.8.2007, 11:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
Во-во! Так уже и делаю...
PM MAIL   Вверх
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
--------------------
ЖЖ | ВерстаюНЕПОЗВОЛЯЙТЕ ЯЩЕРИКАМ, ОТРИЦАТЕЛЬНЫМ ИНОПЛАНЕТЯНИНАМ ОВЛАДЕВАТЬ ВАС, НЕ СТАНОВИТЕСЬ ИХ МАРИОНЕТКАМИ!
PM MAIL WWW ICQ Skype   Вверх
artuska
Дата 10.8.2007, 12:00 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
Ура! smile 
Вот это мне и нужно!!!
Переделал форму на ДИВ-блоки!!!
Код

   #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, спасиба!
PM MAIL   Вверх
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 — здесь я регистрирую домены
PM MAIL WWW GTalk Jabber MSN   Вверх
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>


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

Думаю, тема может быть закрыта.
PM MAIL   Вверх
Uratsakidogi
Дата 11.8.2007, 23:24 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: 11
Всего: 11
Да нет, должна пройти. Просто в некоторых браузерах все равно может потребоваться указать id и for.
--------------------
ЖЖ | ВерстаюНЕПОЗВОЛЯЙТЕ ЯЩЕРИКАМ, ОТРИЦАТЕЛЬНЫМ ИНОПЛАНЕТЯНИНАМ ОВЛАДЕВАТЬ ВАС, НЕ СТАНОВИТЕСЬ ИХ МАРИОНЕТКАМИ!
PM MAIL WWW ICQ Skype   Вверх
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 — здесь я регистрирую домены
PM MAIL WWW GTalk Jabber MSN   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0565 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.