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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> зафиксировать div'ы 
:(
    Опции темы
gcc
Дата 22.5.2009, 18:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


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

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



есть:
Код


<form action="/message.html" method="post">
  <div style="height:23px">
  <div style="width:300px; float:left">Контактный номер телефона:</div>
  <div style="width:150px; float:left">
  <input style="width:150px" type="text" name="telephone" value="">
  </div>
  </div>
  <div style="height:23px">

  <div style="width:300px; float:left">Подтверждение пароля:</div>
  <div style="width:150px; float:left">
  <input style="width:150px" type="password" name="password2" value="">
  </div>
  </div>
  <div style="height:23px">
  <div style="width:300px; float:left">С правилами предоставления и оплаты услуги согласен:</div>
  <div style="width:150px; float:left">

  <input type="checkbox" name="governed" value="">
  </div>
  </div>
  <div style="height:23px">
  <div style="width:10px; float:left">&nbsp;</div>
  <div style="width:156px; float:left">
  <input style="width:156px" type="submit" name="s4" value="Отправить заявку">
  </div>
  </div>

</form>


если написать другую форму и добавить там где  Контактный номер телефона: большой текст, например Контактный номер телефона: Контактный номер телефона: Контактный номер телефона:

то все сдвигается полность, нижняя таблица глючит идет правее, не знаю почему...

как зафиксирвоать чтобюы оно не звигалось?


Это сообщение отредактировал(а) gcc - 22.5.2009, 18:41
PM WWW ICQ Skype GTalk Jabber   Вверх
ksnk
Дата 22.5.2009, 23:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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



Верстать таблицами. Самый тот контент - табличный...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
gcc
Дата 22.5.2009, 23:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


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

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



оно уже сверстно дивами

а как тут сделать можно подскжаите, или куда копать?

а можно ли смешивать дивы и таблицы?

а как диами тут варинта не будет? однозначно таблицу?


PM WWW ICQ Skype GTalk Jabber   Вверх
ksnk
Дата 23.5.2009, 00:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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



Поставить вот такое.
<div style="height:23px;clear:both;">
...

Переверстанная таблицей она будет занимать меньше места...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
bazzjr
Дата 23.5.2009, 03:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Все можно и я бы сказал даже НУЖНО Дивами верстать.

Как вариант накатал побыстрому следующий код:

Код

<div style="width:530px; height:340px; border:#FFCC00 solid 1px; padding:10px 5px 10px 10px; margin: 0 auto; font-size:12px">
    <div style="float:left; line-height:18px; width:210px; text-align:right">Контактный номер телефона:<br/><br/>Подтверждение пароля:<br/><br/>C правилами предоставления и оплаты услуги согласен:</div>
    <div style="float:left; width:140px; text-align:left; margin:0 0 0 5px">
<form action="" method="post">
        <input name="name" id="name" type="text" maxlength="50" style="width:150px" /><br/><br/>
        <input name="password" id="password" type="password" maxlength="100" style="width:150px" /><br/><br/>
        <input type="checkbox" name="governed" value=""><br/><br/><br/>
        <input type="submit" value="Отправить заявку" />
</form>


В этом варике тебе не надо беспокоиться о количестве символов. Единственное что можно сделать, это поиграться с кол. переносов строки <br/>, и подстроить их под свой дизайн и текст.  smile 

Это сообщение отредактировал(а) bazzjr - 23.5.2009, 03:57
PM MAIL ICQ   Вверх
SelenIT
Дата 23.5.2009, 08:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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



bazzjr, за такую верстку надо бы сажать на диалап и под Lynx ;). Чтоб на всю жизнь запомнить, каково это, когда при отключенных стилях теряется связность и логика информации (фиг поймешь, какое поле за что отвечает). Уж лучше таблицы, при них хотя бы визуальная связь поля и подписи остается.

И не нужно лишних дивов-оберток. И форме (тоже блочный контейнер), и инпуту можно задать и float, и высоту. Вообще div - бессмысленный элемент, применять его нужно в самом крайнем случае, когда нет ничего более подходящего по смыслу (p, blockquote, dl-dt-dd, ul-li и т.п.). Конечно, таблицу для нетабличных вещей нужно применять в еще более крайнем случае ;).

gcc, вот доступный вариант и без таблиц, и без дивов:
Код

<style>
form p { margin: 0; padding: 0; min-height: 23px; clear: both; }
* html form p { height: 23px; } /* для IE6 */
label { width: 300px; float: left; }
label input { float: left; }
input.text { width:150px; }
input.button { width:156px; margin-left: 10px; }
</style>
<form action="/message.html" method="post">
  <p>
    <label for="telephone">Контактный номер телефона Контактный номер телефона:</label>
    <input type="text" class="text" name="telephone" id="telephone" value="">
  </p>
  <p>
    <label for="password2">Подтверждение пароля:</label>
    <input type="password" class="text" name="password2" id="password2" value="">
  </p>
  <p>
    <label for="governed">С правилами предоставления и оплаты услуги согласен:</label>
    <input type="checkbox" name="governed" id="governed" value="">
  </p>
  <p><input type="submit" class="button" name="s4" value="Отправить заявку"></p>
</form>



--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
bazzjr
Дата 23.5.2009, 09:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



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

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

Мне например намного больше нравиться вариант с дивами, и он практически столько же занимает символов...

Это сообщение отредактировал(а) bazzjr - 23.5.2009, 09:32
PM MAIL ICQ   Вверх
SelenIT
Дата 23.5.2009, 09:50 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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



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

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

Смысл логической (а не "дивной"!) разметки в том, чтобы сохранять смысловую структуру документа независимо от визуального отображения, а вовсе не в отказе от таблиц любой ценой. Если делать чисто визуальную разметку, лучше делать ее таблицами. Визуальная разметка дивами - такая же глупость, как пилить дерево выключенной бензопилой: усилий больше, времени не меньше, а выигрыша никакого.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
cuick
Дата 31.5.2009, 04:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Попробуй стиль к диву:

{
position:adsolite;
top: [числовое значение]px;
left: [числовое значение]px;
}
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




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


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

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