Podstawy układów elastycznych

Podstawy układów elastycznych są proste: jeśli użyjemy względnych jednostek miar - emów lub procentów - zarówno czcionka, jak i elementy układu o określonej szerokości można powiększać lub pomniejszać dzięki mechanizmom wbudowanym w przeglądarki. Pewien kłopot sprawiają grafiki. Ale korzystając z technik przycinania, uzyskuje się satysfakcjonujące rozwiązanie.

Prekursorskie rozwiązanie układu elastycznego zaprezentował Patrick Griffiths projektem Elastic Lawn w CSS Zen Garden. Poświęcił mu też artykuł Elastic Design. Udaną realizację koncepcji elastycznego układu podjął Michał Sobkowiak, tworząc szablon w technice em108 dla polskiej dystrybucji Joomla!.

Spróbujmy przekształcić w elastyczny projekt 03_fixed_centre opracowany na podstawie sugestii P.O’Briena. Podstawowe założenia są podobne, nie będziemy ich powtarzać. Nowością jest nadanie układowi pełnej elastyczności.

Przygotowanie

Utwórz w katalogu /templates nowy katalog: 04_flexible i przekopiuj doń zawartość katalogu /03_fixed_centre. Wyedytuj plik templateDetails.xml i zmień nazwę szablonu:

<name>04_flexible</name>

Zmodyfikuj też opis szablonu i - odpowiednio komentarz w nagłówku pliku index.php.

Zmiana jednostek miar w arkuszu stylów

Rozpocznijmy od zabiegu najprostszego - przeliczenia wszystkich szerokości i wysokości wyrażonych w pikselach na emy. Przyjmijmy, że 1 emowi odpowiada 12 pikseli. Oto zmodyfikowany arkusz stylów. A ponieważ przy przeliczaniu wartości otrzymamy w kilku przypadkach liczby nieskończone, wymagające zaokrąglenia, zmodyfikowaliśmy nieco szerokości.

/* 04_flexible. 3 kolumny, elastyczny, oparty na  P. O'Brien:
    Three Column Layout with Equalizing Header and Footer 
    (http://www.pmob.co.uk/)
*/
/* Ukryj przed Mac/IE commented backslash v2 \*/
html, body {
   height:100%
   }
/* koniec łatki */
body {
   padding         : 0;
   margin          : 0;
   background-color: #f5f5f5;       /* kolor strony */
   color           : #000;
   text-align      : center;        /* wyśrodkuj stronę - dla IE*/
   min-width       : 64.1em; 
   font             : 80.1% Verdana, Arial, Helvetica, sans-serif; 
}
#content{
   position        : relative;
   height          : 100%;
   min-height      : 100%;
   width           : 64.1em;
   border-left     : 1px solid #888;
   border-right    : 1px solid #888;
   color           : #000000;
   background      : url(../images/centredbgxxx.png) repeat-y 50% 50%; /* tło kolumn */
   margin          : auto;          /* wyśrodkuj stronę */
   text-align      : left;          /* przywróć justowanie do lewej */     
 }
#content_plus_nav {                 /* treści główne - #nav_bar i #content_plus_nav */
   float           : left;
   width           : 52em;          /* = #content - #misc_bar*/
}
#header{
   position        : absolute;
   top             : 0;
   width           : 64em;
   height          : 5.92em;
   background      : #F0ECD9 url(../images/logoj.jpg) no-repeat 0 0;
   border          : 1px solid #888;
   overflow        : hidden;        /* przycina obrazek tła */
}
#nav_bar {
   float           : left;
   position        : relative;      /* dla IE - rozwiązuje problemy
                                      z wyświetlaniem elementów pływających */
   width           : 12em;
   padding-top     : 6em;           /* miejsce na nagłówek */
   padding-bottom  : 3em;           /* oddala nieco stopkę   */
}
#misc_bar {
   float           : right;
   position        : relative;
   width           : 12em;
   padding-top     : 6em;           /* miejsce na nagłówek */
   padding-bottom  : 3em;           /*  oddala nieco stopkę */
}
#footer {
   clear           : both;
   position        : absolute;
   left            : 0;
   bottom          : 0;
   width           : 64em;
   height          : 4.2em;
   background-color: #F0ECD9;
   text-align      : center;
   border          : 1px solid #888;   
}
#main_content {
   width           : 40em;          /* = #content - #nav_bar - #misc_bar*/
   float           : right;         /* ustawia margines od lewej */
   padding-top     : 6em;           /* miejsce na nagłówek */
   padding-bottom  : 3em;           /* oddala nieco stopkę */
}
#clear_footer {                     /* czyści obszar dla stopki */
   width           : 100%;
   height          : 4.35em;
   clear           : both;
   }
/*=================== ŁATKI ======================== */
/* tu będą umieszczane łatki */
html > body #content{
   height : auto;  /* dla Mozilli, IE zawsze traktuje height jako min-height*/
   }
* html #footer {                    /* Style tylko dla IE */
   height         : 4.35em;        /* dla IE5 */
   height         : 4.2em;         /* dla IE6 */
   }
/*=============== KONIEC ŁATEK ===================== */
/* ========== TYLKO DLA PODGLąDU =================== */
/* reguły do usunięcia - ułatwiające podgląd efektów podczas projektowania */
#nav_bar,#misc_bar {
    background-color: #F5F4F0;      /* tło w obszarze wypełnionym zawartością */
}

Skalowanie ukłądu elastycznego

• w IE układ zmniejsza się i zwiększa w sposob ograniczony, ale rozmieszczenie elementów nie zmienia się,
• w Operze skalują się także grafiki - przy powiększeniu do dużych rozmiarów ich bitmapowy charakter jest przyczyną niezbyt ładnego efektu,

Obrazek w nagłówku - technika przycinania

W Operze skalującej także grafiki, poza koniecznością optymalizacji obrazka w nagłówku, problemu nie ma. W przypadku IE czy Firefoksa pojawia się problem przy zwiększaniu. Ale można go rozwiązać dość prostą sztuczką. W pewnym momencie u dołu i z prawego boku obrazka zaczyna się wyłaniać tło strony.

Zauważ, że w tych przeglądarkach podczas zmniejszania układu widoczny jest coraz mniejszy obszar obrazka w nagłówku. To efekt umieszczenia w stylach elementu header:

#header{
...
   overflow        : hidden; /* przycina obrazek tła */
}

To jedna z technik osiągnięcia elastyczności fragmentów układu zawierających grafikę. Jeśli obrazek nie może się powtarzać, powinien na tyle duży, aby przy sporym powiększeniu strony nadal wypełniał cały obszar elementu, w którym został umieszczony.

Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda, Zespół Dokumentacji PCJ