Re: CSS - problem z zerową wysokością listy UL - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS - problem z zerową wysokością listy UL › Re: CSS - problem z zerową wysokością listy UL

Path: news-archive.icm.edu.pl!news.rmf.pl!nf1.ipartners.pl!ipartners.pl!news.bmj.net.
pl!not-for-mail
From: Ai <n...@s...pl>
Newsgroups: pl.comp.www
Subject: Re: CSS - problem z zerową wysokością listy UL
Date: Mon, 2 May 2011 14:24:30 +0200
Organization: BMJ.NET.PL Gliwice
Lines: 81
Message-ID: <164ezha4t39ow$.u9ksra30mhh7$.dlg@40tude.net>
References: <1...@4...net>
Reply-To: prawdziwy_adres@w_podpisie.pl
NNTP-Posting-Host: pc1-28.jsn.osi.pl
Mime-Version: 1.0
Content-Type: text/plain; charset="iso-8859-2"
Content-Transfer-Encoding: 8bit
X-Trace: bmj-lx1.bmj.net.pl 1304339115 21287 84.205.185.28 (2 May 2011 12:25:15 GMT)
X-Complaints-To: n...@b...net.pl
NNTP-Posting-Date: Mon, 2 May 2011 12:25:15 +0000 (UTC)
X-Face: 5bo%o}]]ZkgKBZFy@~byW[Sg^)hDB.1/JA4HxNU>K1+T{K!BDJ!kpVH\$`Qml[7nSW:p:--
h1{A?y\JC-Z@Ou$R.v_-j^P3;1*Sh"SSx3BAzH8Cs-$um*+15%;87Og0ij_2C3jo@<aqY&(B#\.X&
User-Agent: 40tude_Dialog/2.0.15.1
Xref: news-archive.icm.edu.pl pl.comp.www:398777
[ ukryj nagłówki ]
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."