od zera do webmastera

CSS Border czyli taka kreseczka

Border to taka kreseczka która obrysowuje obiekt w koło, jeśli przypiszemy mu cechę BORDER. Ale może to być nie tylko kreseczka, poszalejmy i spróbujmy dać dla border różne style ...oj będzie szaleństwo.

1. Border test dotted
2. Border test dashed
3. Border test solid
4. Border test double
5. Border test groove
6. Border test ridge
7. Border test outset

To jest 7 DIV-ów którym przypisałem takie style

.cw1-01 {border:10px dotted #ffc; }
.cw1-02 {border:10px dashed #ffc; }
.cw1-03 {border:10px solid #ffc; }
.cw1-04 {border:10px double #ffc; }
.cw1-05 {border:10px groove #ffc; }
.cw1-06 {border:10px ridge #ffc; }
.cw1-07 {border:10px outset #ffc; }

A teraz jeszcze więcej różnych BORDER, choć kod wciąż ten sam. Niestety będziemy mieli problem, jak się przypatrzeć to różne przeglądarki mają troszkę inną interpretację poszczególnych cech. Na pocieszenie cecha SOLID jest najpodobniejsza, a jest to styl obrysu stosowany najczęściej, nieźle wypada podwójny obrys DOUBLE.
Zrzuty ekranu z 5 różnych przeglądarek internetowych i tak w kolejności:

FireFox / windows
powiększ
Internet Explorer / windows
ie powiększ
Konqueror / Linux
konqueror powiększ
Opera / windows
opera powiększ
Safari / mac
powiększ

Jeśli idzie o interpretacje BORDER to moim zdaniem wygrała Opera, naładniejsza linia kropkowana, najlepsze kolory przy pseudo-przestrzennych stylach. Róż w FF jest może i ponętny, ale daleki od czerwieni o jakiej myślałem, IE zostawia czerwień nie zmienioną ale cień jest zwykłą czernią.

Przy dodawaniu BORDER należy pamiętać że zmienia się wielkość elementu. Gdzieś ten BORDER musi się podziać i jest wsadzany na zewnątrz. A więc DIV o wielkość 100px po dodaniu w koło obrysu 5px będzie miał nowy wymiar 110px
A poniżej inny przykład w dwóch jednakowych polach mieszczą się DiV-y jednakowej wielkości, tylko w drugim przypadku dodany jest w stylach CSS BORDER. i oto jednych zmieściło się 36 a z BORDER tylo 9.


Wspomnijmy jeszcze o jednej z cech dotyczących BORDER. BORDER-COLLAPSE Używa się jej wraz z tabelkami (TABLE) i pokażę co to robi, bo opisując szybciej połamało by sie język nim wytłumaczyło. Te 2 tabelki są identyczne, jedyna różnica że druga ma przypisane
border-collapse: collapse;
ale i oto cały styl dla tabelek

#tab td, #tab2 td { border-bottom:4px solid red; border-top:4px solid green; width: 50px;}
#tab { border:4px solid #fff; border-top:4px solid #000; margin:10px;}
#tab2 { border:4px solid #fff; border-top:4px solid #000; margin:10px; border-collapse: collapse;}
       
       
       
       
       
       
       
       

Otóż w górnej lepiej widać co jest w stylach CSS opisane: Każdej celce BORDER górą i dołem raz zielony raz czerwony, a cała tabelka ma obrys biały w koło a tylko na górze czarny. A po BORDER-COLLAPSE część obrysów się zjada. Chodzi tu o sąsiadujące obrysy które są zastępowane tylko jednym. Ważne też, że tabelka ma w kodzie HTML CELLESPACING="2" i FireFox to likwiduje do zera. Mi się to nie całkiem podoba bo zmienia mi sie wielkość tabelki, ale jest to tak właśnie robione w większości przeglądarek poza... Tu zrzut z ekranu ze starszych wersji Internet Explorera (5) i coż... z COLLAPSE jest zdecydowanie inaczej.

table style css internet explorer

Jeszcze jedna sztuczka z BORDER

jak zrobić ramkę na tekst z nagłówkiem, używając tylko jednego DIVa. Dajemy górny BORDER zanacznie grubszy niż inne, by stanowił belkę tytułową, zaś nagłówkowi dajemy górny margines minusowy, by wyskoczył poza DIV-a w którym jest umieszczony. Poniżej kod CSS


.cw3-01 {width: 450px; height:auto; margin:5px; background: #ffc; border-top:24px solid #cc0; border-left:2px solid #cc0; border-bottom:2px solid #cc0; border-right:2px solid #cc0; padding:6px;}
.cw3-02 {color:green; font-weight: 700; margin:-27px 0 0 0; }