Всплывающая картинка при наведении на ссылку
Сразу пример того, что получится, а потом уже код.
Собственно тому, что получается при использовании данного примера, можно придумать много применений, но первое – это конечно меню.
CSS-код:
ul {
position: relative;
width: 100px;
list-style: none;
}
li {
border: 1px solid;
margin: 2px;
padding-left: 5px;
}
a {
display: block;
}
a img {
display: none;
position: absolute;
top: 0;
border: 0;
left: 100%;
}
a:hover img {
display: block;
}HTML-код:
<ul>
<li><a href="#"> Jemand <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#"> Lyces <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#"> Светлая <img src="image-when-hover-on-link.gif" /></a></li>
</ul>Работоспособность:
Internet Explorer 8 
Firefox 3.5.4
Opera 9.64
Цветное выделение текста
Selection – одна из интересных функций CSS3 при помощи которой можно заменить стандартный цвет выделения текста. На мой взгляд selection практически бесполезна, но возможно кто то придумает этой функции разумное применение. Переходим к коду.
CSS-код:
p {
font-size: 1.5em;
margin-bottom: 2.2em;
}
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}HTML-код:
<div id="page-wrap">
<p class="red">При выделении бэкграунд этого текста будет красным.<p>
<p class="blue">При выделении бэкграунд этого текста будет голубым.<p>
<p class="yellow">При выделении бэкграунд этого текста будет желтым.<p>
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8 
Firefox 3.5.4
Opera 9.64
Прилипающий футер
Лично я никогда не пользовался прилипающим футером, но возможно кому нибудь, или мне, все таки понадобится данный код.
CSS- код:
html, body, #wrap {
height: 100%;
margin: 0px;
}
body > #wrap {
height: auto;
min-height: 100%;
}
#main {
padding-bottom: 50px; /* отступ должен быть равен высоте футера */
}
#footer {
position: relative;
margin-top: -50px; /* отрицательное значение высоты футера */
height: 50px;
clear:both;
background: #000;
text-align: center;
color: #fff;
font-size: 260%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */HTML-код:
<div id="wrap">
<div id="header"></div>
<div id="main" class="clearfix"></div>
</div>
<div id="footer">
Я липкий футер! :)
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Вертикальное раскрывающееся меню
Если на сайте мало места, но очень хочется разместить большое количество пунктов в меню, к нам на помощь приходит вертикальное раскрывающееся меню. Данное меню впишется практически в любой дизайн сайта, конечно при условии визуального изменения под стиль сайта. Ну хватит слов, перейдем к делу, а точнее к коду.
CSS-код:
#menu_body {
background:#81A192;
width:200px
}
#menu_body ul li {
list-style-type:none;
border-bottom:1px solid #fff;
margin-left:-40px;
padding-left:7px
}
#menu_body ul li a {
color:#fff;
font-family:verdana,arial,sans-serif;
text-decoration:none
}
#menu_body ul li ul li {
border:0;
list-style-type:square;
color:#fff;
list-style-position:inside
}
#menu_body ul li ul {
border-top:1px solid #fff;
margin-left:-7px;
padding-left:50px
}JavaScript: (добавляем в head после CSS)
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}В строке
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');нужно добавить значений “sub_menu” столько, сколько групп меню будет, т.е. если будет 10 групп раскрывающихся меню, то здесь должны быть прописаны все 10 значений: sub_menu_1′,’sub_menu_2′,’sub_menu_3′,’sub_menu_4′,’sub_menu_5′ и т.д. Соответственно и HTML код должен содержать 10 блоков, иначе будут проблемы а работе.
В <body> добавляем вызов функции:
HTML-код:
<body onload="allclose()">И в конце само тело нашего меню.
HTML-код:
<div id="menu_body">
<ul>
<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">menu 1</a>
<ul id="sub_menu_1">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">menu 2</a>
<ul id="sub_menu_2">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">menu 3</a>
<ul id="sub_menu_3">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
</ul>
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Показ, скрытие блока (div) по клику
Иногда в процессе создания сайта возникает ситуация, когда информация должна показываться на странице только после клика по определенному элементу сайта. Например, это может быть форма добавления сообщения в гостевой книге, форма быстрого ответа на форуме и т.д. В этой ситуации к нам на помощь приходит следующий код:
CSS-код:
.headline {
border: 1px solid #000000;
cursor: pointer;
text-align: center;
}
.hidden {
display: none;
border: 1px solid #ff0000;
text-align: center;
margin-top: 2px;
}JavaScript:
function show(ele) {
var srcElement = document.getElementById(ele);
if(srcElement) {
if(srcElement.style.display == "block") {
srcElement.style.display= 'none';
}
else {
srcElement.style.display='block';
}
}
}HTML-код:
<div class="headline" onclick="show('cat1')">Заголовок</div>
<div class="hidden" id="cat1">Текст раскрывающегося блока</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Обзор полезных ресурсов: Browsershots.org
Обзор полезных ресурсов: Browsershots.org.
Browsershots.org – полезный и необходимый ресурс любого WEB-верстальщика.
Здесь можно увидеть как выглядит Ваш сайт в ~100 браузерах различных операционных систем, таких как Linux, Windows, Mac Os, BSD. Возможно так же выбрать разрешение экрана на котором тестируется сайт, глубину цвета, включить и отключить JS, Flash, Java.
На каждый браузер выводится отдельный скриншот, тем самым вы всегда сможете легко определить? в каком браузере Ваш сайт выглядит не так как Вы задумали.
Закругленные углы без графики при помощи CSS
В настоящее время в среде WEB-дизайна достаточно популярны закругленные углы, которые воспроизводятся различными способами. В этой статье я приведу один из примеров, лидирующий на мой взгляд, как сделать углы закругленными при помощи CSS.
CSS-код:
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}
.r1 {margin: 0 1px;}
.r2 {margin: 0 2px;}
.r3 {margin: 0 3px;}
.r4 {margin: 0 4px;}
.r5 {margin: 0 5px;}
.r6 {margin: 0 6px;}
.r7 {margin: 0 7px;}
.r8 {margin: 0 8px;}
.r9 {margin: 0 9px;}
.r10 {margin: 0 10px;}
.content, b {background-color: #CCCCCC;}
.content {padding: 10px 10px; text-align: center;}HTML-код:
<b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b>
<div class="content">
Здесь содержимое блока
</div>
<b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>В данном примере показаны углы с закругленностью в 10px. Но не стоит на этом останавливаться, нужно экспериментировать и изобретать новые дизайнерские решения.
Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Размещение блока (div) по центру страницы
Для того, чтобы разместить блок (div) по центру окна браузера нам понадобится несколько сток HTML и CSS кода приведенного ниже:
CSS код:
#block-on-center {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-top: -100px; /* значение равно половине height со знаком минус */
margin-left: -100px; /* значение равно половине width со знаком минус */
border: 1px solid #000;
}HTML-код:
<div id="block-on-center">
<!-- здесь содержимое блока -->
</div>Размещаем вышеприведенный код в своем HTML документе не забывая про doctype, head, body, и другие элементы. Готово!
Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Проблема темы Celadon в comments.php
В теме Celadon, которую я использую в своем блоге, есть проблема, которая возникает при включении опции “Пользователи должны быть зарегистрированы и авторизованы для комментирования “. Проблема выглядит следующим образом: если пользователь входит как гость на страницу одиночной записи, сайд бар съезжает под основной контент тем самым портя весь футер, см скриншот.
Покопавшись в файлах темы нашел решение: Открываем файл wp-content/themes/celadon/comments.php. В самом низу кода есть строчки
</div>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?> которые собственно и вызывают данную проблему. Для решения проблемы нужно лишь переписать <div> в самый низ файла, т.е привести код к виду
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>
</div>Всё, проблема решена.
Расположение текста по левому и правому краю на одной строке
Иногда возникает ситуация когда нужно расположить текст по левому и правому краю на одной строке. У меня такая ситуация, например, возникла при редактировании темы WordPress.
Решение данной задачи очень простое:
CSS код:
.alignleft {
float: left;
}
.alignright {
float: right;
}HTML код:
<div id="textbox">
<p class="alignleft">Текст слева</p>
<p class="alignright">Текст справа</p>
<div style="clear: both;"></div>
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64