HTML « HTML CSS Blog

Всплывающая картинка при наведении на ссылку

Автор Jemand

Сразу пример того, что получится, а потом уже код.
Собственно тому, что получается при использовании данного примера, можно придумать много применений, но первое – это конечно меню.

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

Прилипающий футер

Автор Jemand

Лично я никогда не пользовался прилипающим футером, но возможно кому нибудь, или мне, все таки понадобится данный код.

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

Вертикальное раскрывающееся меню

Автор Jemand

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

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) по клику

Автор Jemand

Иногда в процессе создания сайта возникает ситуация, когда информация должна показываться на странице только после клика по определенному элементу сайта. Например, это может быть форма добавления сообщения в гостевой книге, форма быстрого ответа на форуме и т.д. В этой ситуации к нам на помощь приходит следующий код:

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

Автор Jemand

В настоящее время в среде 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) по центру страницы

Автор Jemand

Для того, чтобы разместить блок (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

Расположение текста по левому и правому краю на одной строке

Автор Jemand

Иногда возникает ситуация когда нужно расположить текст по левому и правому краю на одной строке. У меня такая ситуация, например, возникла при редактировании темы 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

Всплывающая картинка при наведении на ссылку

Прилипающий футер

Вертикальное раскрывающееся меню

Показ, скрытие блока (div) по клику

Закругленные углы без графики при помощи CSS

Размещение блока (div) по центру страницы

Расположение текста по левому и правому краю на одной строке

Рубрики

Управление

Последние записи

Поисковые запросы