'Техника кода'


Красивые кнопки, интересные свойства

Как много разнообразных кнопок, и как часто они используются в разных вариантах. Много проектов мне попадалось, где необходимо было стилизовать кнопку, присвоить свой определенный стиль. Проблема легко решаема. Давайте разберемся поподробней.

<style type="text/css">

.button {
           color:#fff; /* цвет букв */
           font-size:15px; /* размер шрифта */
           font-family:Arial, Helvetica, sans-serif; /* сам шрифт */
           border:1px solid #69833f; /* верхняя и левая рамка */
           border-bottom:1px solid #526533; /* рамка снизу */
           border-right:1px solid #526533; /* рамка справа */
           padding: 1px 2px; /* отступы от границ */
           cursor:pointer; /* курсор в виде указательного пальца */
           background:url(../images/bg_button.gif) repeat-x top #999; /* параметры фона */
}

</style>

Дальше нам осталось только прописать стиль этой кнопке:

<input type="submit" value="Комментировать" class="button" />

На моем блоге так реализована кнопка “Комментировать”.

RewriteRule обычных ссылок

Много возникает случаев, чтобы у нас были ссылки не такие, как мы хотим. Самый простой, что есть, это модуль Apache mod_rewrite и директива RewriteEngine.
Директива RewriteEngine включает или выключает работу механизма преобразований.

Для простого преобразования “about_us_static_page.php” в “about” необходимо создать файл “.htacsess“, и написать правила преобразования ссылок, если их несколько, то каждый на следующей строке.

RewriteEngine on
RewriteBase /
RewriteRule ^ссылка_какую_хотите ссылка.php [NC]
RewriteRule ^ссылка_какую_хотите ссылка.php [NC]

Если Вы хотите более подробно углубиться в изучение этой директивы, предлагаю к просмотру интересную статью с примерами - http://www.opennet.ru/docs/RUS/rewriteguide/.

Минимальная ширина

Много макетов, которые я верстал, при меньших разрешениях экрана, чем 1024*768 теряли свои свойства, начинали непонятно тянуться, чего даже сам дизайнер может и не предусмотрел.

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

Код для CSS:

.width {width:100%;min-width:1000px;}
.content {border:0;padding:0px;}
* html .minwidth {padding-left:1000px;}
* html .container {margin-left:-1000px;position:relative;}

/*\*/
* html .minwidth, * html .container, * html .content, * html .layout {height:1px;}
/**/

А между всем контентом, который у Вас есть Вам необходимо вставить просто 5 дивов, и потом их закрыть.
Читать далее »