Przykłady CSS
- Nietypowe podkreślenia hiperłączy
- Menu pionowe składające się z kilku bloków
- Menu pionowe zmieniające kolor po najechaniu kursorem
- Menu poziome 2
- Menu poziome 1
- Rozmieszczanie napisów lub obrazków w wybranym miejscu
- Strona z trzema kolumnami
- Strona z dwiema kolumnami
- Wyśrodkowanie strony
Video Kurs:
GIMP - Warstwy
Pomoc
- Zasady użycia szablonów
- O szablonach flash
- Edycja pliku data.txt
- Edycja pliku style.css
- Polskie znaki w data.txt
- Znaki specjalne w data.txt
- Obrazki w szablonach flash
Na zakupy
Menu pionowe zmieniające kolor po najechaniu kursorem
Menu ma postać listy nienumerowanej:
<div id="menu">
<ul>
<li>Strona główna
<li>O mnie
<li>Wydarzenia
<li>Galeria
<li>Archiwum
<li>Kontakt
</ul>
</div>
kod CSS:
#menu {
width: 160px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: block;
margin: 0 0 2px 0;
}
#menu ul li a {
display: block;
margin: 0;
padding: 0 20px 0 0;
height: 25px;
font: bold 12px/25px Arial, sans-serif;
text-decoration: none;
text-align: right;
color: White;
background: #6A5ACD;
}
#menu ul li a:hover {
text-decoration: none;
color: #D07300;
background: #F1D67A;
}
Formatowanie listy poprzez arkusz stylów odbywa się na podobnej zasadzie jak w przykładzie z menu poziomym. Podstawowa różnica to brak właściwości "float" dla elementów listy, w związku z czym poszczególne pozycje menu układają się jedna pod drugą.
Przyciski oddalone są w pionie o 2px, co zapisane jest w #menu ul li. Tekst wyrównany jest do prawej strony, oddalony od krawędzi o 20px:
padding: 0 20px 0 0;
...
text-align: right;
