Уеб Стыле Схеетс
CSS типс & Трицкс

А забодена-доун мену

У менију који видите у горњем десном углу ове странице је једноставно DIV са неким елементима А унутра. Сав посао да би га останак у фиксно место се обавља по правилима у стилу лист. Овде је марк-уп, то је узета равно из извора овој страници:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

У прегледачу без CSS-ом, или са CSS искључен, он ће само бити нормалан става са линковима. Али хвала на правила у наставку, појавиће се у "Плута" на врху странице, забодена у горњем десном углу прозора прегледача:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Занимљиве су овде правила position: fixed чини ДИВ остати фиксне на екрану, а display: block чини А елемената унутар ДИВ у блок елемената, а тиме и приказани испод других, радије него све у једном реду.

Будите пажљиви са редослед последња три правила. Сви они имају исти специфичности, тако да је последња која се примењује одређује боју. Ако ховерс мишем преко линка, :hover примењивати, тако да мора да буде задња.

Остатак, маргине, границе, боја и сл могу бити уклоњене или промена према личном укусу. Имајте на уму, међутим, како смо урадили правила између линкови: постоје границе свега линкови, осим прве, захваљујући правилу :first-child ". Пар правила овако (бордер-топ на свим елементима плус границе 'ноне' на прво дете) је врло погодан за израду граница између елемената.

(Ако погледате стварну стилу листова који су повезани са ове странице, баннер-к.css и баннер.css, видећете неке додатне правила, које се појављују у супротности једни друге. Они су ту да штите против неколико бугова у старијим прегледачима. Конкретно, у баннер-о.css, баннера и скривен у баннер.css је приказан као блок. Ово има ефекат скривање баннера са Нетсцапе 4, јер се прескачем @import баннер.css.)

FAQ: IE 5 и 6 на WINDOWS?

Ако погледате ову страницу са Microsoft Internet Explorer 5 или 6 на Windows ( "WinIE5" и "WinIE6"), које ћете приметити да се не ради. Барем не са садашњом верзије од септембар 2002. Многи људи ме питају о томе, па ево мало објашњење. Укратко: греска у прегледачу, а не на овој страници.

WinIE5 и WinIE6 не спроводити 'fixed' још. То је јадан, али је већи проблем је да они такође не анализирамо на "position" власништво исправно. А прегледач који не зна 'fixed' требало одбацити владавине 'position: fixed' и да шта год падне назад на претходну вредност 'позиције' на лист стила био. Могли бисмо онда додати 'position: absolute' уоцци 'fixed' и да би прегледачу. Али у WinIE 5. и 6. који није оно што се дешава. Очигледно је кључна реч "фиксни" је некако протумачити као "static".

Не можете направити WinIE5 и 6 подршку 'фиксног', али је посао-около за анализи проблема. Јоханнес Коцх упозорени на овај смицалица мене (из његове збирке уорк-ароундс). Прво замијенити 'position: fixed' у стилу горе по правилима 'position: absolute', а затим убаците следећу правилу нешто ниже на лист стила:

body>div.banner {position: fixed}

(Ако је унутар DIV.баннер други елемент од тела, тело које замењује елемент.) Посљедица овога је да прегледаче који знају о '>' (дете) и CSS селектор ће користити ово правило, али прегледачима који не, нарочито WinIE5 и WinIE6 ће га игнорисати. Владавине 'положај: абсолуте' користиће се уместо тога, а мени ће бити на правом месту, осим што неће остати фиксна када дођите.

Важно је да нема простора около '>'.

CSS ресурси

• Colors Style Sheet
• CSS Page Loading Times
• CSS Navigational Headings
• CSS tutorial
• CSS Background properties
• Creating Menus with CSS
• Style sheets for handheld devices