[home]
techniki internetowe[home] 24/IV
[top]

What is an artist? A provincial who finds himself somewhere between a physical reality and a metaphysical one... It’s this in-between that I’m calling a province, this frontier country between the tangible world and the intangible one — which is really the realm of the artist.

Federico Fellini

Stylizacja list i tworzenie paska navigacji

Podstawy

Zacznijmy od takiej oto listy rzeczy do zrobienia:

<ul> <li>Odrobić lekcje <li>Odpocząć <li>Przeczytać emalię <li>Obejrzeć Misia i Rysia </ul>

W liście tej zastąpimy kropkę obrazkiem. Będziemy korzystać z wypełnienia, ponieważ obrazka list-style-image nie można dokładnie pozycjonować.

Dziwne: IE i Opera używają lewego marginesu do ustalenia wielkości lewego wcięcia elementu li a Firefox i Safari — lewego dopełnienia. Dlatego skasujemy i margines i wypełnienie oraz kropkę:

ul { margin: 0; padding: 0; } li { list-style-type: none; background: url(/images/triangle.png) no-repeat 0 50%; padding-left: 20px; }

Jeśli w elementach list umieścimy odsyłacze

<ul> <li><a href="#gotowce">Odrobić lekcje</a> <li><a href="#pasjansik">Odpocząć</a> <li><a href="#thunderbird">Przeczytać emalię</a> <li><a href="#kino">Obejrzeć Misia i Rysia</a> </ul>

to stylizację zaczynamy od zamienienia ich na elementy blokowe (dlaczego?). Dodajemy też u dołu każdego elementu listy kreski poziome. Pierwszy element listy powinien mieć kreskę pionową u góry. Aby ją dodać korzystamy z pseudoklasy first-child.

ul a { display: block; text-decoration: none; background-color: #ABCDEF; color: #F00E0D0; } li { background: #ABCDEF url(images/triangle.png) no-repeat 0 50%; padding: 0.25em 0.25em 0.25em 20px; border-bottom: 1px solid black; } li:first-child { border-top: 1px solid black; }

Poziomy pasek nawigacyjny uzyskamy dopisująć regułę

ul li { float: left; }

Oto rezultat stylizacji

Obrazki z mapą odsyłaczy w CSS

Czasami obrazek działa jak mapa na której umieszczono jeden lub więcej odsyłaczy (ang. image maps) wybieranych za pomocą myszki. Do tworzenia obrazków mapowanych służy atrybut ismap. Obecnie takie obrazki przygotowuje się we Flashu. Można też mapowanie zaimplementować w samym CSS. Oto przykład.

<div id="kotki"> <img src="images/kotki.jpg" alt="[Bazylek, Gutek i Rysiaczek]" width="576" height="556"> <ul> <li class="bazylek"><a href="http://bazylek.org/" title="Bazylek"></a> <li class="gutek"><a href="http://gutek.org" title="Gutek"></a> <li class="rysiaczek"><a href="http://rysiaczek.org" title="Rysiaczek"></a> </ul> </div>

Element a będziemy pozycjonować względem elementu div.

#kotki { width=576px; height=556px; position: relative; } #kotki ul { margin: 0; padding: 0; list-style: none; } #kotki a { position: absolute; width: 120px; height: 160px } #kotki .bazylek a { top: 220px; left: 350px; } #kotki .gutek a { top: 50px; left: 310px; } #kotki .rysiaczek a { top: 220px; left: 200px; } #kotki a:hover { border: 1px solid red; }

Materiały w sieci

[top]