[CSS]Zakładki na stronę WWW

Widzę , że grupa istnieje już dość długo, lecz ciągle jest martwa. Spróbuję ją nieco ożywić jakimś ciekawym poradnikiem.



Przedstawię sposób zrobienia na stronie zakładek (czyli linków, których wskazanie spowoduje wyświetlenie odpowiedniej "karty"). Domyślnie nie będzie wyświetlana żadna karta, ale można to zmienić, co również tutaj przedstawię.



A więc do pracy!

Najpierw definiujemy klasy CSS, które będą naszymi kartami, np:

.karta { display: none; position: absolute; top: 57px; left: 3px; width: 500px; height: 500px; background-color: yellow;}

Najważniejsze w tych klasach to ustawić właściwość display na "none" oraz position na "absolute". Reszta właściwości zawartych w przykładzie odpowiada jedynie za wygląd pustej karty (żółte tło, 500x500 pikseli, 3 piksele od lewej i 57 od góry), więc nie są one aż w takim stopniu wymagane, jednak w normalnych warunkach będziemy je raczej określać.

Teraz określamy styl tychże klas dla sytuacji, gdy wskazana zostanie zakładka. Tu wystarczy ustawić display na wartość "block", ponieważ chcemy, by po wskazaniu zakładki karta się wyświetliła. Zgodnie z wyżej podanym przykładem powinniśmy zrobić to tak:

a:hover.karta { display: block; }

Pora na zakładki. Ich styl zapiszemy również postaci klasy CSS. Tym razem właściwość display ustawiamy na "inline". Przykład:

.zakładka { display: inline; height: 45px; font-size: small; border-style: solid; border-color: orange; border-width: 5px; background-color: orange; }

Moja zakładka będzie pomarańczowa, ale tylko, gdy nie będzie wskazana. Po wskazaniu chcę, by zmieniła kolor na zółty:

a:hover .zakładka { border-bottom-style: solid; border-color: yellow; background-color: yellow; }



To by było na tyle, jeśli chodzi o arkusz stylów. Pora na kod HTML.



Chcąc umieścić na stronie zakładkę i odpowiednią dla niej kartę wstawiamy znacznik , w którym atrybut href ustawiamy na "#". Więcej atrybutów nie musimy podawać. Jako zawartość linka podajemy 2

-y: pierwszemu przypisujemy klasę zakładki i jako zawartość podajemy treść zakładki; drugiemu klasę i zawartość karty. W moim przypadku:

Zakładka 1

karta 1

Zakładka 2

karta 2

Zakładka 3

karta 3

W tym miejscu mój poradnik właściwie się kończyNa koniec dodam jeszcze, że aby uczynić pierwszą kartę domyślnie otwartą, należy do jej znacznika

Zakładka 1

karta 1

Jak Wam się podoba?

Mam nadzieję, że poradnik komuś się przyda

Mister Klikacz 2011-11-08 22:53:08

POPRAWKA, bo widzę, że wprowadzony przeze mnie HTML się nie wyświeta, lecz przeglądarka go interpretuje

Chcąc umieścić na stronie zakładkę i odpowiednią dla niej kartę wstawiamy znacznik <a>, w którym atrybut href ustawiamy na "#". Więcej atrybutów nie musimy podawać. Jako zawartość linka podajemy 2 <div>-y: pierwszemu przypisujemy klasę zakładki i jako zawartość podajemy treść zakładki; drugiemu klasę i zawartość karty. W moim przypadku:


Zakładka 1

karta 1

Zakładka 2

karta 2

Zakładka 3

karta 3

W tym miejscu mój poradnik właściwie się kończyNa koniec dodam jeszcze, że aby uczynić pierwszą kartę domyślnie otwartą, należy do jej znacznika

Zakładka 1

karta 1

Prezes zarządu 2011-11-14 17:14:17

Widzę, Mister Klikaczu, że kod wciąż nie jest wyświetlanyMogłeś użyć po prostu tej stronki
W każdym razie kod miał być taki:

  <a href="#"></a></code></p><div class="zakładka"><code><a href="#">Zakładka 1</a></code></div><div class="karta"><code><a href="#">karta 1</a></code></div><code><br>

  <a href="#"><div class="zakładka">Zakładka 2</div><div class="karta">karta 2</div></a><br>

  <a href="#"><div class="zakładka">Zakładka 3</div><div class="karta">karta 3</div></a>

Prezes zarządu 2011-11-14 17:39:18

OK, mój wpis też wymaga poprawki

  <a href="#"></a></code></p><div class="zakładka"><code><a href="#">Zakładka 1</a></code></div><div class="karta"><code><a href="#">karta 1</a></code></div><code><br>

  <a href="#"><div class="zakładka">Zakładka 2</div><div class="karta">karta 2</div></a><br>

  <a href="#"><div class="zakładka">Zakładka 3</div><div class="karta">karta 3</div></a>

Prezes zarządu 2011-11-14 18:00:12

  <a href="#"><div class="zakładka">Zakładka 1</div><div class="karta">karta 1</div></a>

  <a href="#"><div class="zakładka">Zakładka 2</div><div class="karta">karta 2</div></a>

  <a href="#"><div class="zakładka">Zakładka 3</div><div class="karta">karta 3</div></a>