Stillərin kaskadlı cədvəlləri
CSS məsləhətlər & üsullar

Bu sənəd məqalənin tərcüməsidir "Web Style Sheets CSS tips & tricks".
Sənədin original versiyası mövcüddür yalnız W3C saytında http://www.w3.org/Style/Examples/007/menus.html
Bü tərcümə rəsmi W3C sənəddi DEYIL.
Bütün Müəllif Hüqüqları W3C Malikdir.
Bu sənəddə tərcümə tərcümə səhvləri və mətbəə xətaları ola bilər.

Müəllif: Sabir Sabutai (bütün tərcümələr müəllifindir)
Lokal versiya: http://www.carionltd.com/Style/Example007/menus.html

(Bu səhifə CSS stillərin kaskadlı cədvəllərini istifadə edir)

Fiksasiya edilmiş menyu

Bu səhifənin yuxarı sağ küncündə gördüyünüz menyu içərisində bəzi A elementləri olan adi DIV-dir. Onu yerində fiksasiya etmək üçün yetirilmiş bütün işlər stillər cədvəlindəkinə uyğundur. Bu səhifədə olan mənbədən birbaşa götürülən tərtibat:
<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>

<a href="../../../Consortium/Activities">Fəaliyyət</a>
<a href="../../../TR/">Tex.&nbsp;hesabatlar</a>
<a href="../../../Help/siteindex">Saytın indeksi</a>
<a href="../../../Consortium/Translation/">Tərcümələr</a>

<a href="../../../Status">Proqramlar</a>
<a href="http://search.w3.org/">Axtarış</a>
<em>Yanında:</em>
<a href="../../">Stillər</a>
<a href="../../CSS/">CSS</a>

<a href="./">Məsləhətlər&nbsp;&amp;&nbsp;üsullar</a>
</div>
CSS olmayan və ya söndürülmüş CSS ilə brauzerdə bu istinadlar olan adi paraqraf olacaqdır. Lakin aşağıda sərh edilmiş qaydalara görə o, səhifənin üst hissəsində "üzəcək" və brauzerin yuxarı sağ küncünə fiksasiya ediləcəkdir.: 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' maraqlı qayda DIV-in ekranda yerləşməsinə və 'display: block' DIV içərisində A elementlərin yerləşməsinə cavabdehdir, və bununla onları siraya yox, sütuncuq qaydasında düzür. Son üç qaydaların ardıcıllığı ilə diqqətli olun. Onların hamısında eyni xüsusiyyəti var, sonuncusu isə rəngini təyin edir. Siçan istinadla üzürsə, biz :hover tətbiq etmək istəyirik, beləliklə o sonuncu olacaq. Qalan isə - qıraqlar, sərhədlər, rənglər və s. istədiyiniz kimi dəyişmək olar. Lakin diqqət yetirin ki, biz necə istinadlar arasında qaydaları yetiririk: bütün istinadlar arasında sərhədlər var, birincisindən başqa, ':first-child' qaydasına görə. Bir cüt qaydalar (bütün elementlərin üstündə sərhəd və birinci törəmə elementində 'none' sərhədi) elementlər arasında sərhədlərin yaradılması üçün çox əlverişlidir.

Bu səhifəni Microsoft Internet Explorer 5 və ya 6 Windows ("WinIE5" və "WinIE6") vasitəsilə açırsınızsa, qeyd edəcəksiniz ki, o işləmir. Ən azı sentyabr 2002 versiyasında. Camaat məni bu barədə soruşur, ona görə də izahat verirəm. Qısaca: baq brauzerdədir, bu səhifədə yox.

WinIE5 və WinIE6 hələ ki 'fixed' yetirmir. Bu pisdir, lakin daha böyük problem odur ki, onlar 'position' kifayət qədər düz tanımırlar. 'fixed' tanımayan brauzer 'position: fixed' qaydasını rədd etməli və stillər cədvəlində əvvəlki 'position' təyininə qayıtmalıdır. Sonra 'position: absolute' birbaşa 'fixed' qabağına əlavə edə bilərik və brauzer bunu istifadə edər. Lakin WinIE 5 və 6-da bu baş vermir. Yəgin ki, Kivord 'fixed' 'static' (statika) kimi interpretasiya edilir.

Siz 'fixed' WinIE5 və 6-da tətbiq edə bilmirsiniz, lakin bu problemi həll etmək olar. Coan Koç mənə bu tryuku dedi (onun qərarlar kolleksiyasından). Əvvəl stillər qaydalarında 'position: fixed' yerləşdirin 'position: absolute' üstündə, sonra isə ardıcıl gələn qaydanı stillər cədvəlindən bir az aşağıda yerləşdirin:

body>div.banner {position: fixed}

(Əgər DIV baneri əsasın yox, digər elementin içərisindədirsə, əsas elementi onun arxasına keçirin.) Efekt ondadır ki, CSS-in '>' (törəmə elementini tanıyan brauzerlər, o cümlədən WinIE5 və WinIE6, onu saymayacaqlar. Onun əvəzinə 'position: absolute' qaydası istifadə ediləcək və menyu düzgün yerdə olacaq, lakin baxılan zaman fiksasiya ediləcək.

Vacibdir ki, '>' ətrafında boş sahə olmasın.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Sənəd yaradılıb 17 yanv. 2001;
Son dəyişikliklər $Date: 2007/07/20 16:12:46 $ GMT