'CSS' Category

DIV с фиксирана позиция

February 29th, 2008 February 29th, 2008
Posted in CSS, Уеб дизайн
No Comments »

В този пример ще демонстрирам как с помощта на CSS и прозрачни PNG изображения, да се постигне ефект на избледняване в долната и горната част на уеб страницата или на даден блоков елемент от нея. За постигането на желания ефект се използват DIV елементи с фиксирана позиция (position: fixed;) спрямо рамката на браузъра или на елемента, в които са вложени . На фиксираните DIV-вове, като фон(background) се задават PNG файлове с градиент - в случая от бяло(#FFF) към празрачно(transparent).

Основен минус е факта, че ако има хипервръзки в текста и те са в зоната на елемента с фиксирана позиция, тогава линковете не са активни.

Оригиналният пример е взет от CSS-Tricks. При него проблем беше, че не работи под IE6. Причината е в неправилното изобразяване на position:fixed от страна на браузъра, а също и това, че не поддържа 24 каналната прозрачност на PNG формата. Решението на проблема е използването на допълнителни стилове само за IE6, които да са в отделен CSS файл или в самия HTML документ, като за прилагането им се използва проверка за версията и типа на браузъра.

За отстраняване на проблема с position: fixed; се използва position:absolute и на обграждащия елемент се задават стойности height:100%; и overflow: auto;.

За прозрачността на PNG изображението се прибягва до употребата на филтърът AlphaImageLoader, който е един от най-използваните за фиксиране на този бъг.

Настоящият пример е тестван и работи в следните версии на най-популярните уеб браузъри:

  • Mozilla Firefox 2.0.0.12
  • Internet Explorer 7
  • Opera 9.23
  • Safari 3.0.4 (Windows)
  • Netscape Navigator 9.0
  • Internet Explorer 6

Mоже да видите работещ пример тук, a също и примерния код в текстови файлове съответно за HTML документа и CSS документа.

Постове от същата категория:

Dropdown menu с помощта на CSS

January 8th, 2008 January 8th, 2008
Posted in CSS, Уеб дизайн
No Comments »

По един от проектите, над които работих по спецификация трябваше да се направи падащо меню (dropdown menu). И тъй като select тага, който е стандартно решение в случая, не позволява максимално стилизиране и сливане с останалата част от дизайна, прибягнах до употребата на друго решение. В основата му е използването на стандартен html списък (< ul >< li >1< /li >>< li >2< /li >< /ul >) и със помощта на CSS му предадох желания вид, вписващ се в цялостния дизайн на страницата. Използвал съм и два реда javascript код, с който се променя стойността на display свойството на списъка при възникване на събитие – в случая onmouseover и onmouseout.

Ето и примерен код:

HTML файл:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en-us" lang="en-us"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Dropdown menu example with using of standard html list and CSS</title>

<meta name="keywords" content=" " />
<meta name="description" content=" " />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />

<link rel="stylesheet" type="text/css" href="main.css" />

<script type="text/javascript">
	function showLang(id) {
		document.getElementById(id).style.display = 'block';
	}
	function hideLang(id) {
		document.getElementById(id).style.display = 'none';
	}
</script>

</head>
<body>

<div id="wrapper">

      <ul id="langBar">

        <li id="langBarSelect"
		onmouseover="showLang('selectLang'); return false;"
		onclick="showLang('selectLang'); return false;"
		onmouseout="hideLang('selectLang'); return false;">
	<span>Change Language</span>
	<img src="flags/arrow.png" alt="arrow" />
        <ul id="selectLang"
		onclick="showLang('selectLang'); return false;"
		onmouseout="hideLang('selectLang'); return false;">
	  <li>
		<a href="/uk/">
		<img src="flags/uk.png" alt="uk flag" /> english
		</a>
	  </li>
	  <li>
		<a href="/sp/">
		<img src="flags/spain.png" alt="es flag" /> espanol
		</a>
	  </li>
	  <li>
		<a href="/bg/">
		<img src="flags/bg.png" alt="bg flag" /> български
		</a>
	  </li>
        </ul>
        </li>
      </ul>

</div>

</body>
</html>

CSS файл (main.css):

* { padding: 0; margin: 0; }

body {
 color: #333;
 font: 12px normal "Arial Narrow", Arial, sans-serif ;
 background:url(../im/bgr-body.png) top repeat-x;
 background: #E6F4FE;
}

img { border:0;}

#wrapper {
 margin: 50px auto;
 width: 480px;
 height: 480px;
 border:1px solid #21407c;
 background-color:#016EB6;
}

#langBar {
 margin: 0 auto;
 display:block;
 padding: 0;
 margin: 50px auto;
 list-style: none;
 width:120px;
 height:15px;
 border:1px solid #21407c;
 color:#21407c;
 font-size:10px;
}

#langBarSelect {
 display:block;
 width:120px;
 height:15px;
 position: relative;
 background: #E6F4FE;
 float:left;
}

#langBarSelect span {
 width: 100px;
 float:left;
 display:block;
 margin: 1px 0 0 5px;
 _margin: 1px 0 0 2px; /*  IE 6  style */
 text-align: left;
}

#langBarSelect img {
 margin: 2px 1px 0 0;
 float:right;
 display:block;
}

#selectLang {
 border:1px solid #21407c;
 margin: -1px;
 display: none;
 width: 120px;
 position: absolute;
 left:0;
 top:0;
 list-style: none;
}

#selectLang li a {
 display:block;
 width: 115px;
 background: #E6F4FE;
 padding: 3px 0 3px 5px;
 text-decoration:none;
 color:#21407c;
}

#selectLang li a:hover {
 background: #FFCC03;
 color:#21407c;
}

#selectLang li a img{
 border:0;
 padding: 0 5px 0 0;
 float:left;
}

Работещ пример може да видите тук!

Отстраняване на z-index бъга за selеct таг в IE6

December 18th, 2007 December 18th, 2007
Posted in CSS
No Comments »

В един от проектите, по който работих се появи странен бъг. При тестване под IE6 подменюто, което се появява като hover ефект при един от разделите на главното меню, застава над съдържанието на страницата, като единствено drop-down меню, реализирано със select таг остава над това подменю(submenu). Търсейки решение на проблема се оказа, че това си е признат бъг дори и от М$, на който обаче не предлагат решение - поне за версия 6 или по-малка, тъй като при версия 7 на браузъра IE този проблем не съществува. Но както обикновено други намират начин да се справят с това и благодарение на находчивостта им, успях да се справя и аз :).
А ето и решението:

http://www.hedgerwow.com/360/bugs/css-select-free.html

Контрол на шрифта със CSS

December 4th, 2007 December 4th, 2007
Posted in CSS, Уеб дизайн
No Comments »

С помощта на стиловете се постига пълен контрол над шрифта, който се използва във всяка уеб страница. За тази цел Световният уеб консорциум (W3C.org), препоръчва употребата на следните свойства:

font - кратко изписване. Позволява описването на няколко параметъра на шрифта (font: 1.2em bold italic verdana,serif; font: 14px “MyriadPro”, tahoma, sans-serif;). За да се чете коректно от браузерите, в краткото изписване на стиловете за шрифт трябва задължително да се зададат стойности за свойствата “font-size” и “font-family” (напр. font: 12px Arial;)

color - задава цвят на шрифта (color: #a2a2a2; color:#aaa; color: red;).

font-size - определя големината на шрифта (font-size: 12px; font-size: 1.5em; font-size:small/medium/large; font-size:150%;).

font-weight - задава плътността на шрифта (font-weight: normal; font-weight: bold; font-weight: 100/200/500;).

font-style - определя стил на показвания шрифт (font-style: normal/italic/oblique;).

font-family - задава вида/фамилията на шрифта (font-family: verdana, serif; font-family: “MyriadPro”, tahoma, sans-serif;)

Има още няколко свойства, които не се използват масово и поради тази причина не са споменати.