/ moje projektowe notatki

8.Znikanie grafiki tła w elementach elastycznych

Problem może wystąpić, gdy tworzysz elementy elastyczne, czyli takie, które powiększają się przy zwiększaniu wielkości czcionki tekstu.
Gdy ilość tekstu jest niewielka, lub czcionka jest bardzo drobna, wówczas skrajne elementy graficzne tła (górny i dolny, lub lewy i prawy - w zależności od kierunku elastyczności) mogą na siebie nachodzić. Gdy do tego tło nie jest przezroczyste, lecz opisany jest dla niego kolor, wówczas to tło może zasłonić elementy graficzne.
Oto przykład praktyczny. Tworzę dwa elementy "div" - jeden zewnętrzny, oraz drugi znajdujący się w jego wnętrzu.

kod html:

• <div id="box-zewnetrzny">
• <div id="box-wewnetrzny">tralalala tralalala tu jest treść i obrazki</div>
• </div>

kod css:

• # box-zewnetrzny {
  • background: rgb(0,0,255) url(grafika/bok-lewy.gif) no-repeat top left;
  • min-width: tu wpisz zsumowaną szerokość obu elementów graficznych tła, tzn bok-lewy.gif plus bok-prawy.gif;
  • height: tu wpisz wysokość elementu graficznego tła w pixelach;
  • padding: 0;
  • }
• # box-wewnetrzny {
  • background: rgb(0,0,255) url(grafika/bok-prawy.gif) no-repeat top right;
  • min-width: tu wpisz zsumowaną szerokość obu elementów graficznych tła, tzn bok-lewy.gif plus bok-prawy.gif;
  • height: tu wpisz wysokość elementu graficznego tła w pixelach;
  • margin: 0;
  • padding: wartość dowolna, jaka Ci potrzebna;
  • }

Jak wiadomo, jednemu elementowi "div" można przyporządkować tylko jeden element graficzny tła. Dzięki temu, że stworzyłem dwa "pudełka" - jedno wewnętrzne z treścią i drugie, które stanowi tylko "opakowanie" pierwszego - mogę dla każdego z nich określić po jednym elemencie graficznym tła. Dajmy na to dla wewnętrznego "div" element tła z lewej strony, a dla zewnętrznego element tła ze strony prawej. Dzięki temu zabiegowi całość może się poszerzać i zwężać dowolnie, w zależności od ilości treści (efekt "sliding doors"), a nie zdarzy się nieciekawa sytuacja, że tekst będzie wystawał poza swoje tło.

Wracając do tematu. Internet Explorer wcześniejszy, niż wersja 7, nie odczytuje użytej tu cechy min-width (a także min-height, max-width i max-height) i zdarzają się sytuacje, że przy małej ilości treści oba elementy graficzne tła nachodzą na siebie. Na dodatek podany kolor tła (tu: rgb(0,0,255), czyli blue-niebieski) "rozlewa się" na cały element div id="box-zewnetrzny" zasłaniając element div id="box-wewnetrzny". Jeśli kolor elementu graficznego tła boxu wewnętrznego będzie taki sam, jak kolor tła boxu zewnętrznego, to ten element graficzny zniknie. Dlatego dla elementu zewnętrznego lepiej nie opisywać koloru tła!

7.Kolejność opisu cech tła

Tło opisujemy w takiej kolejności:

background [color, image, repeat, attachement, position;], np tło dla elementu "dziabag":

# dziabag {background: #fff url(../grafika/dziabag.jpg) no-repeat fixed 40px 20%;}

co oznacza, że tło będzie białe z grafiką o nazwie dziabag.jpg. Grafika nie będzie powtarzana, za to zostanie unieruchomiona (przy przewijaniu strony grafika nie będzie się przesuwać). Położenie grafiki tła to 40 pikseli od lewej i 20 procent strony od góry. Jeśli chcesz dla odmiany umieścić grafikę w lewym górnym rogu, możesz napisać: "top left" lub "0 0".

6.Kolejność opisu cech czcionek

Załóżmy, że dla pewnego elementu "terefere" chcemy scharakteryzować czcionkę. Kolejność tego opisu powinna być następująca:

• # terefere {
  • font-style: ...;
  • font-variant: ...;
  • font-weight: ...;
  • font-size: ...;
  • line-height: ...;
  • font-family: ...;
  • }

Oczywiście nic nie stoi na przeszkodzie, aby użyć zapisu skróconego. Ale w tym przypadku kolejność jest jeszcze bardziej ważna:
# terefere {... ... ... .../... ...;}.

5.Kolejność opisu odsyłaczy (linków)

Stosuje się zasadę LoVe / HAte czyli: link - visited - hover - active, oto przykład:
a:link {color: blue; text-decoration: underline;}
a:visited {color: purple; text-decoration: none;}
a:hover {color: blue; text-decoration: underline;}
a:active {color: blue; text-decoration: underline;}

4.Zdjęcie (grafika) jako element pływający (float) - dla IE6

W przypadku, gdy umieszczałem element typu zdjęcie (grafikę) jako element pływający, chował się on za elementem nadrzędnym i tylko lekko zza niego wystawał.
Kod css wyglądał następująco:

• # technikum img {
  • float: left;
  • display: inline;
  • width: 100px;
  • height: 50px;
  • }

Aby rozwiązać ten problem wpisałem dodatkową linijkę kodu:

• # technikum img {
  • position: relative;
  • float: left;
  • display: inline;
  • width: 100px;
  • height: 50px;
  • }

Jednocześnie nie wpłynęło to negatywnie na układ w pozostałych przeglądarkach.

Niestety IE potrzebuje czasem potwierdzenia czegoś, co jest oczywiste. Dlatego, choć przeglądarki powinny automatycznie odczytywać spozycjonowanie relatywne, z grzeczności dla osób korzystających jeszcze z IE6 zawsze wpisuję formułę { position: relative; }.

3.Kolejność znaczników

Zdarza się, że tekst objęty jednymi znacznikami trzeba umieścić między innymi znacznikami. Pytanie, w jakiej kolejności powinny pojawiać się znaczniki aby wszystko działało tip-top?

Znaczniki <div>, <p> , <li> oraz <table> są elementami blokowymi, natomiast znaczniki <a>, <span> i <font> to elementy wierszowe.
Elementy wierszowe nigdy nie mogą obejmować elementów blokowych, ponieważ spowoduje to niepoprawne wyświetlanie tekstu lub obrazu. Elementy blokowe mogą natomiast obejmować zarówno wiersze, jak i inne bloki.
np. <p><a>terefere</a></p> lub <div><p><a>terefere</a></p></div>. - zapis poprawny;
np. <a><p>terefere</p></a> lub <a><p><div>terefere</div></p></a>. - zapis zły

Jeśli zastanawiasz się nad ustawieniem kolejności znaczników tego samego typu w formie: <span><a>terefere</a><span>, czy <a><span>terefere</span><a> to pamiętaj, że wiekszą wagę ma znacznik będący bliżej tekstu.
Oznacza to, że jeśli kolor textu dla <a> opisałem jako czarny a dla <span> jako niebieski, to text „terefere” w pierwszym przypadku będzie czarny, a w drugim niebieski.
Analogicznie jest ze znacznikami blokowymi.

2.Definicja „clear”

Funkcja „clear” ma odwrotne działanie do właściwości „float”. Pozwala na blokowanie elementu, tzn. uniemożliwia innym elementom oblewanie tego elementu, dla którego opisano właściwość „clear”.

Gdy zdefiniowałem dla pewnego elementu funkcję {clear: both;}, {clear: left;} lub {clear: right;} w IE6 zniknął jeden z elementów spozycjonowanych absolutnie, który znajdował się poniżej pływających!

Rozwiązanie tego problemu jest bardzo proste. Wystarczy pod elementami opisanymi jako pływające (uprzednio zamkniętymi) dodać element <div id="lalamido">&nbsp;</div> i jemu przypisać w arkuszu css deklarację

#lalamido { clear: both; }.

I to by było na tyle.

1.Element div z "id" i "class"

Zdarza się, że IE6 (lub wcześniejszy) nie odczytuje tła dla elementu klasy.
Przykładowo dla elementu <div id="technikum" class="chmura"> opisałem tło w arkuszu css w następujący sposób:

#technikum.chmura { background: rgb(190,223,254) url(../grafika/chmura.gif) 0 0 repeat-x; }.

IE6 pogubił się w miejscu, gdzie zdefiniowano dla div zarówno "id" jak i "class".

Aby obejść ten problem, rozbiłem cały div na dwa elementy: jeden o identyfikatorze

<div id="technikum">

oraz drugi o identyfikatorze

<div class="chmura">.

Element class="chmura" umieściłem w elemencie id="technikumb".

Ostatecznie kod xhtml ma następującą postać:

• <div id="technikum">
  • <div class="chmura">
  • tralalala terefere tu jest tekst tralalala terefere
  • </div>
• </div>

A odpowiadający mu kod css ma postać:

• # technikumb { .... }
• . chmura { .... }

Ciekawostką jest fakt, że czasem IE6 odczytuje poprawnie element div opisany podwójnie, a czasami nie! Brawo, brawo, bravissimo!