Gimp: tworzenie szablonów stron WWW cz. 6

Przygotowanie kodu XHTML/CSS

XHTML/CSS

Układ jest wykonany na bazie przykładu czwartego (example 4) z artykułu Ryan Brilla pt. "Creating Liquid Layouts with Negative Margins" (http://www.alistapart.com/articles/negativemargins/).

Ujemne marginesy

Efekt ujemnych marginesów pozwala na przygotowanie dwóch elementów div, z których jeden ma stałą szerokość (np. 245 pikseli) i przylega do lewej krawędzi, a drugi wypełnia pozostałą przestrzeń. W ten sposób otrzymujemy układ płynny (tj. zależny od szerokości okna przeglądarki), który zawiera panel pionowy stałej szerokości.

Do wykonania efektu potrzebny jest następujący kod XHTML:

 1. <div id="calosc">
 2. <div id="pojemnik">
 3. <div id="tresc">
 4. Lorem ipsum...
 5. </div>
 6. </div>
 7. <div id="panel">
 8. Lorem ipsum...
 9. </div>
10. <br class="czyszczenie" />
11. </div>

Listing zwinięty - 11 linii

Występują w nim cztery następujące elementy div:

• div#tresc (zielony) - jego szerokość jest zmienna, wypełnia całą dostępną przestrzeń,
• div#panel (niebieski) - jego szerokość jest stała i wynosi 245 pikseli,
• div#calosc (czerwony) - dodatkowy pojemnik,
• div#pojemnik (żółty) - dodatkowy pojemnik.

Wygląd strony przy małej i dużej szerokości przeglądarki jest przedstawiony na rysnku.

W stylach CSS nadajemy tło elementu #calosc i wymuszamy minimalną szerokość:

1. #calosc {
2.   background: red;
3.   min-width: 400px;
4. }

Listing zwinięty - 4 linii

Uwaga: właściwość min-width nie jest obsługiwana przez IE. Gdy szerokość okna przeglądarki IE jest malutka, układ rozjeżdża się!

Następnie ustalamy style pojemnika: nadajemy mu szerokość 100%, dosuwamy go do prawej krawędzi i ustalamy ujemny lewy margines równy szerokości lewego panela:

1. #pojemnik {
2.   background: yellow;
3.   width: 100%;
4.   float: right;
5.   margin-left: -245px;
6. }

Listing zwinięty - 6 linii

W kolejnym kroku ustalamy lewy margines elementu przeznaczonego na tekst. Margines ten jest równy szerokości lewego panela:

1. #tresc {
2.   background: green;
3.   margin-left: 245px;
4. }

Listing zwinięty - 4 linii

Na zakończenie ustalamy szerokość panela i dosuwamy go do lewej krawędzi:

1. #panel {
2.   background: blue;
3.   width: 245px;
4.   float: left;
5. }

Listing zwinięty - 5 linii

Element czyszczący br wymusza wysokość

1. pojemnika #calosc:
2. br.czyszczenie {
3.   clear: both;
4.   height: 0;
5.   padding: 0;
6.   margin: 0;
7.   line-height: 0;
8. }

Listing zwinięty - 8 linii

1. Obróbka XCF-a, edycja wyglądu grafiki chmur
2. Obróbka XCF-a, przygotowanie tekstu i krojenie pliku
3. Przygotowanie kodu XHTML/CSS
4. Przygotowanie kodu XHTML/CSS c.d.