http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1254468314.html <p>Как часто бывает, приходиться возвращаться к тому, о чем ранее писал не только потому, что сменился парк браузеров, и хотелось бы в них проверить, как оно и что.</p> <p>Иногда, веянья времени совпадают и с переводом некоторых скриптов Мастера Lasto на обновленные рельсы, в частности речь идет о предполагаемом апгрейде Gold Shop’a.</p> <p>Само собой, никоим образом не бегу впереди паровоза, но...</p> <p>Сегодняшняя публикация посвящена формам.</p> <p>Писал об этом в <a href="http://trifler.ru/blog/comment_1208885174.html">"Элементы web-страниц. Форма поиска"</a>. Комментарии были не однозначными, хотя скриншоты приведенные там свидетельствуют, что формам на web-страницах не уделяется должного внимания.</p> <p>Личный опыт и это касаемо не только верстки, доказывает и подтверждает, что очень многое сокрыто в деталях и нюансах, а потому их проработке нужно уделять особое внимание.</p> <p>Давайте посмотрим, что же необходимо, для приведения таких не послушных форм в божеский вид, в самых популярных браузерах.</p> <p>Скриншот</p> <img src="i/forms/forms1.png" style="display:block;margin:10px auto;width:464px;height:116px;" alt="search forms"> <p>html-код</p> <pre class="pre"> &lt;div id="forms"&gt; &lt;form name="search"&gt; &lt;input class="search" type="text"&gt; &lt;input class="submit" type="submit" value="Найти"&gt; &lt;/form&gt; &lt;/div&gt; </pre> <p>Стили</p> <pre class="pre"> * {margin:0;padding:0;} #forms { border:1px #000 solid;margin:7px 10px 7px; padding:4px;width:210px; } form {overflow:hidden;} .search,.submit { background-color:#fff;border:1px #000 solid;float:left; } .search {padding:1px 2px 0;width:156px;height:17px;} .submit {font-size:11px;margin-left:2px;width:45px;height:20px;} /* Start hack Section */ /* hack for FireFox 3.5 */ @-moz-document url-prefix(){.submit {padding-bottom:3px;}} /* hack for IE6 */ *html form {zoom:1;} /* End hack Section */ </pre> <p>#forms не является обязательным.</p> <p>Обратите внимание на разные высоты у поля ввода и кнопки "Найти".</p> <p>Для той же кнопки желательно всегда указывать размер шрифта.</p> <p>Без hack’a для FF, надпись на кнопке будет смещена вниз, что портит общую картинку.</p> <p>Вот собственно, необходимый и достаточный минимум для нормального, практически идеального, визуального отображения формы поиска на web-ресурсе.</p> <p><a href="i/forms/forms.htm">Пример</a></p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1254468314.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1254468314.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1254468314.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1254468314.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 02 Oct 2009 14:25:14 GMT