Witam.

Przy okazji przeróbki strony na wyższą rozdzielczość postanowiłem poprawić
jeden błąd, z którym nie poradziłem sobie tworząc ostatnią wersję.

Aktualnie na stronie wykorzystuję nawigację w oparciu o zakładki, co
prezentuje się w sposób następujący:

http://img848.imageshack.us/img848/3776/76117336.png

Nie do końca przypomina to zakładki widywane na większości stron, ale
kierując się wskazówkami stąd: http://unraveled.com/publications/css_tabs
udało mi się osiągnąć prawie idealny efekt widoczny tutaj:

http://img690.imageshack.us/img690/7303/17259223.png

Prawie idealny, bo jeśli przyjrzeć się bliżej to nadal coś jest nie tak.
Ale zacznę od początku. W kodzie wygląda to w uproszczeniu tak:

<div class="zakladki_gora">
<ul>
<li><a href="#zakladka_1">Serwis</a></li>
<li><a href="#zakladka_2">Pobieranie</a></li>
<li><a href="#zakladka_3">Pozostałe</a></li>
<li><a href="#zakladka_4">Autor</a></li>
<li><a href="#zakladka_5">Sieć</a></li>
</ul>
</div>
<div id="zakladka_1" class="zakladki_dol">
[linki do poszczególnych działów]
</div>
[analogicznie kolejne zakładki]

Przełączanie zakładek realizuje prosty skrypt korzystający z jQuery. Szkoda
miejsca na szczegóły, w każdym razie kliknięcie danego linka stanowiącego
zakładkę skutkuje pobraniem jego adresu i ukryciem wszystkich obszarów
oprócz obszaru o danym identyfikatorze. Dodatkowo, zmieniany jest styl
danego łącza, tak aby wyglądało na wybrane.

Obszar o klasie zakladki_dol posiada następujący styl:

.zakladki_dol
{background-position: top;
margin: 0px 12px 12px 12px;
padding: 8px;
border: solid #6D90B0;
border-width: 0px 1px 1px 1px; <<< krawędzie boczne i dolna
background-color: #C6E0F2;
font-size: 13px;
text-align: center;
clear: both;
background-image: url('../obrazy/interfejs/zakladki_dol.png');
background-repeat: repeat-x;}

Czyli ma widoczne krawędzie boczne i dolną oraz obraz tła, który wyrównany
jest do górnej krawędzi, powielony w poziomie, a resztę wypełnia kolor jaki
posiada dolna krawędź obrazu.

Widoczna w przeglądarce górna krawędź dolnego obszaru to tak naprawdę dolna
krawędź ściśle przylegającej do niego listy (UL):

.zakladki_gora
{margin: 0px 12px 0px 12px;}

.zakladki_gora ul
{list-style-type: none;
border-bottom: 1px solid #6D90B0; <<< krawędź dolna
width: 936px;}

.zakladki_gora li
{display: inline;}

Problem w tym, że lista w której umieszczone zostały elementy znajdujące
się obok siebie - a nie w pionie - nie posiada wysokości. Efekt jest taki,
że jej dolna krawędź pokrywa się z górną i pomimo zapisu "border-bottom:
1px solid #6D90B0;" widoczny jest taki efekt:

http://img34.imageshack.us/img34/4235/27957962.png

Można by to obejść, uwidaczniając nie tyle dolną krawędź listy co dolną
krawędź obszaru (DIV) w którym ów lista się znajduje (koniecznie dodając mu
"overflow: hidden" aby objął swoim polem całą listę). Niestety wtedy, dolna
krawędź poszczególnych zakładek znajdowała by się piksel powyżej tej linii,
dokładnie jak na pierwszym screenie. Ostatecznie, żeby uzyskać efekt z
drugiego screena wymusiłem na siłę wysokość listy:

.zakladki_gora ul
{list-style-type: none;
border-bottom: 1px solid #6D90B0;
width: 936px;
height: 25px;}

Efekt jest zadowalający dopóki do strony nie dorwie się ktoś z przeglądarką
skalującą przy powiększaniu tylko czcionki, a nie całość i wtedy opis
poszczególnych zakładek wyjdzie poza sztucznie wymuszoną pozycję dolnej
krawędzi listy. Jest jeszcze jeden bubel - żeby osiągnąć zachodzenie
aktywnej zakładki na obszar poniżej, ma ona ustawioną pozycję względną w
pionie na +1, co znowu skutkuje drobnym zgrzytem - jej górna krawędź jest
nieco niżej niż pozostałych zakładek. Jakimś cudem działa to jednak
poprawnie w przytaczanym obcym przykładzie.

Dla mających cierpliwość żeby z tym powalczyć reszta styli:

.zakladki_gora a
{background-position: bottom;
padding: 3px 3px 3px 3px;
float: left;
margin-left: 12px;
width: 165px;
border-top-style: solid;
border-right-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-right-color: #6D90B0;
border-top-color: #6D90B0;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #6D90B0;
font-size: 14px;
color: #333333;
text-decoration: none;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #DDEDF7;
text-align: center;
background-color: #F4F9FC;
background-image: url('../obrazy/interfejs/zakladki_gora.png');
background-repeat: repeat-x;}

.zakladki_gora a.wybrana
{padding-top: 4px;
position: relative;
top: 1px;
border-bottom-width: 0px;}


--
Pozdrowienia
Ai / mailto: n...@n...arg / ROT-13 /
"Aby oszacować czas potrzebny na wykonanie jakiegoś zadania, należy
przewidywany czas pomnożyć przez dwa i przyjąć jednostkę o rząd wyższa."

do góry

Po długiej walce znalazłem wreszcie rozwiązanie. Inline przegrał walkę z
floatem. Niech będzie dla potomności - kompletyny system zakładkowy :). Kod
CSS wygląda tak:

.zakladki_gora
{margin: 0px 12px 0px 12px;}

.zakladki_gora ul
{list-style-type: none;
padding: 0px;
margin: 0px;
width: 936px;}

.zakladki_gora li
{float: left;
border: #6D90B0 solid;
border-width: 1px 1px 0px 1px;
margin-left: 12px;
font-size: 14px;
color: #333333;
background-color: #F4F9FC;
text-align: center;}

.zakladki_gora a
{border-bottom-style: none;
display: block;
padding: 3px 3px 3px 3px;
width: 164px;
background-position: bottom;
background-color: #F4F9FC;
background-image: url('../obrazy/interfejs/zakladki_gora.png');
background-repeat: repeat-x;}

.zakladki_gora a.wybrana
{position: relative;
top: 1px;}

.zakladki_dol
{background-position: top;
margin: 0px 12px 12px 12px;
padding: 8px;
border: 1px solid #6D90B0;
background-color: #C6E0F2;
font-size: 13px;
text-align: center;
clear: both;
background-image: url('../obrazy/interfejs/zakladki_dol.png');
background-repeat: repeat-x;}

Działa bezbłędnie we wszystkim, nawet upiornym IE6 ;). I jeszcze skrypt do
przełączania zakładek:

function PrzygotujZakladki(Numer)
{
var Pozycja = Numer - 1;
$('div.zakladki_dol').hide().filter('#zakladka_' + Numer).show();
$('div.zakladki_gora ul li').eq(Pozycja).children().addClass('wybrana');
$('div.zakladki_gora a').click(function()
{
$('div.zakladki_dol').hide();
$('div.zakladki_dol').filter(this.hash).show();
$('div.zakladki_gora ul li a').removeClass('wybrana');
$(this).addClass('wybrana');
$(this).blur();
return false;
});
}

Efekt ostateczny + wygląd w przeglądarce skalującej całość i tylko
czcionki:

http://img705.imageshack.us/img705/3397/89704519.png
http://img849.imageshack.us/img849/7258/36015867.png
http://img20.imageshack.us/img20/9588/14234084.png


--
Pozdrowienia
Ai / mailto: n...@n...arg / ROT-13 /
"Najlepsza metodą do zainspirowania odkrywczych myśli, jest zaklejenie
koperty."

do góry