IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Оформление форм и таблиц

Менюшку можно применить как для навигации по своему сайту, так и для перехода на другие адреса.

<form><input type="hidden" name="select">
 <SELECT NAME="sel"
 onchange="top.location.href = this.options[this.selectedIndex].value;">
<option selected value="#">Выбор страницы</option>
<option VALUE="http://www.------">первый адрес</option>
<option VALUE="http://---------">второй адрес</option>
<option VALUE="http://www.---------"> третий адрес</option>
</select></form>

Однако, часто такие формы смотрятся довольно жутко. Для "Эксплорера" можно задать фоновый цвет формы и цвет текста. Добавляем:

<form><input type="hidden" name="select">
<SELECT NAME="sel"
 onchange="top.location.href = this.options[this.selectedIndex].value;" 
style="background:#FEFF00 ; color: #C00000; ">
<option selected value="#">Выбор страницы</option>
<option VALUE="http://www.------">первый адрес</option>
<option VALUE="http://---------">второй адрес</option>
<option VALUE="http://www.---------"> третий адрес</option>
</select></form>

Уже кое-что. Что можно сделать еще? Ну, например, текст можно сделать пожирнее, а размер формы уменьшить за счет уменьшения шрифта:

<form><input type="hidden" name="select">
<SELECT NAME="sel"
 onchange="top.location.href = this.options[this.selectedIndex].value;" 
style="background:#FEFF00 ; color: #C00000; font-weight: bold;font-size: 5px; ">
<option selected value="#">Выбор страницы</option>
<option VALUE="http://www.------">первый адрес</option>
<option VALUE="http://---------">второй адрес</option>
<option VALUE="http://www.---------"> третий адрес</option>
</select></form>

В итоге таких преобразований можно получить более подходящий для Вашего оформления элемент. Хотя пользователи "Нетскейпа" не увидят особого изменения. В Нетскейпе можно изменить размер формы.

в styl.css пишем:
.ss{ font-family: MS Sans Serif, tahoma, Verdana, Arial; FONT-SIZE: 5px; color:#000000}


<form CLASS="ss" ><input type="hidden" name="select" >
<SELECT NAME="sel"
 onchange="top.location.href = this.options[this.selectedIndex].value;" >
<option selected value="#">Выбор страницы</option>
<option VALUE="http://www.------">первый адрес</option>
<option VALUE="http://---------">второй адрес</option>
<option VALUE="http://www.---------"> третий адрес</option>
</select></form>

Как в Нетскейпе, видно? Оч. хор. Точно так-же оформляются кнопки и прочие формы. Хоть в Нетскейпе и не получится задать цвет, но уже получше. Изяшнее смотрится. Хотя не все так просто с Нетскейпом. Срабатывает не всегда и не везде. Текстовые строки и кнопки на такой CLASS всегда реагировали без проблем а вот SELECT... Специально для пользователей Нетскейпа! (странная фраза, двусмысленная какая-то) Обратите внимание - для Нетскейпа мы поместили CLASS="ss" сразу в тэге form: <form CLASS="ss"> Для селекта в Нетскаепе сложнее прописать размеры, так что для отображения и там и там в "приличном" виде можно попробовать вставить класс и после form и после select.


Для текстовых полей можно задать еще один интересный параметр— border.
Для этого введем еще один класс и пропишем ему рамочку:

.bb { border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; border-right: 1px solid;}

Мы создали класс с параметрами рамок: толшина 1px, рамки в виде непрерывной линии - solid. В данном примере мы не назначили цвет рамочек, а можно и назначить:
.bb1 { border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; border-right: 1px solid; border-color:#FF0000;}

Мы получили ту же рамочку, но с красным "бордером". Теперь можно немного уменьшить описание, ведь все рамочки у нас одинаковы - и верх и низ и боковые:
.bb2 { border: 2px solid; border-color:#FF0000;}

Вот она, родная... Для разнообразия немного толще сделали рамочку.
Остается вспомнить, что рамочки у таблиц описываются довольно разнообразно. Например, двойная рамка:
.bb3 { border: 3px double; border-color:#FF0000;}

Двойная рамочка... Скучновато... Чтобы такого придумать плохого? Чтоб обозревателю жизнь медом не казалась. А мы ему попробуем испортить настроение переменой красного на черный - пусть помнит, что жизнь коротка(особенно, если читаешь МК):
.bb4 { border: 3px double; border-color:#000000;}

<INPUT TYPE="TEXT"  CLASS="bb3"
ONMOUSEOVER="this.className = 'bb4';"
ONMOUSEOUT="this.className = 'bb3';"
  NAME="oo1" VALUE="проба формы"
 Size="20" MAXLENGTH="20">

Теперь при наведении мышки цвет рамочки меняется с красного на черный, напоминая о конечности всего живого. :))) Страшно?

Источник: A-design studio http://mtk.on.ufanet.ru

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.