Все записи с меткой ‘CSS’
Прилипающий футер
Лично я никогда не пользовался прилипающим футером, но возможно кому нибудь, или мне, все таки понадобится данный код.
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
Показ, скрытие блока (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
Закругленные углы без графики при помощи 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
Расположение текста по левому и правому краю на одной строке
Иногда возникает ситуация когда нужно расположить текст по левому и правому краю на одной строке. У меня такая ситуация, например, возникла при редактировании темы 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