Pomoc - Zmienna szerokość kolumn

Start

Programowanie

Szablon

Zmienna szerokość kolumn

Dan Caderholm w przetłumaczonej na język polski książce Kuloodporne strony internetowe przedstawił szczegółowo technikę projektowania płynnych układów stron. Nie dlatego, że uważa je za lepsze niż projekty o stałej szerokości.

Każde z rozwiązań - pisze - ma swoje zastosowania, które w dużej mierze zależą od wymagań projektowych. […]. Jeśli nasz projekt skorzysta na wprowadzeniu zmiennej szerokości, powinniśmy wprowadzić płynny układ ku uciesze użytkowników naszej witryny…

Założenia układu

Chcemy stworzyć podstawę do szablonu według propozycji Dana Caderholma, która będzie się charakteryzować następującymi właściwościami:

płynny 3-kolumnowy układ,
zmienna szerokość bocznych kolumn, zachowane proporcje
zachowane proporcje szerokości kolumn,
wysokości kolumn dostosowane do wysokości najdłuższej kolumny,
nagłówek powyżej górnej krawędzi kolumn,
stopka poniżej dolnej krawędzi kolumn,
tło w kolumnach,
czytelny kod, CSS z minimalną ilością łatek.
semantyczna struktura i układ treści.

Plik index.php

Skopiuj następujące fragmenty kodu do pliku index.php:

<?php
/** 06_liquid_D_Cadehorlm: 
    3-kolumnowy, płynny układ, stała szer. kol, 
    na podstawie: Dan Caderholm: Kuloodporne strony internetowe */
 
<body>
  <div id="content">
 
        <div id="header">
           <h1><?php echo $GLOBALS['mosConfig_sitename']; ?></h1>
        </div>
        <div id="content_nav_ext">
           <div id="content_main">
              <?php mosMainBody(); ?>
           </div>
           <div id="nav_bar">
 
                 <?php mosLoadModules( 'left' ); ?>
 
           </div>
        </div><!-- koniec #content_nav_ext -->
        <div id="misc_bar">
 
              <?php mosLoadModules( 'right' ); ?>
 
        </div>
        <div id="footer">
           <?php include_once($GLOBALS['mosConfig_absolute_path'] 
            . '/includes/footer.php'); ?> 
        </div>
     </div>
  </div>
</body>
</html>

Arkusz stylów CSS

Skopiuj następujący kod do pliku template_css.css.php:

/*  06_liquid_D_Cadehorlm: 
    3-kolumnowy, płynny układ, stała szer. kol, 
    na podstawie: Dan Caderholm: Kuloodporne strony internetowe */
html, body{
   padding         : 0;
   margin          : 0;  
   } 
body {
   font            : 80.1% Verdana, Arial, Helvetica, sans-serif;
   }
#header {
  background      : #cde;
  }
#content_nav_ext {
  float           : left;
  width           : 70%;
  }
#content_main {
  }
#nav_bar {
  background      : #9c3;
  }
#misc_bar {
  position        : relative;
  float           : right;
  width           : 30%;
  background  : #fc6;
  }
#footer {
  position        : relative;
  clear           : both;
  background      : #cc9;
  height          : 1%;
  }

Plik instalacyjny

Skopiuj następujący kod do pliku templateDetails.xml:

<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="1.0.0">
  <name>06_liquid_D_Cadehorlm</name>
  <creationDate>2006.08.06</creationDate>
  <author>test</author>
  <copyright>GNU/GPL</copyright>
  <authore-mail>
 Ten adres email jest ukrywany przed spamerami, włącz obsługę JavaScript w przeglądarce, by go zobaczyć
 </authore-mail>
  <authorUrl>http://www.joomla.pl</authorUrl>
  <version>0.9</version>
  <description>
    3-kolumnowy, płynny układ ze stałą szerokością bocznych kolumn,
    na podstawie: Dan Caderholm: Kuoodporne strony internetowe
  </description>
  <files>
     <filename>index.php</filename>
  </files>
  <css>
     <filename>css/template_css.css</filename>
  </css>
</mosinstall>

Objaśnienia

Układ kolumn

1 krok W pudełku #content umieściliśmy kolejno bloki:

#header
#content_nav_ext o szerokości 70%
#misc_bar o szerokości 30%
#footer

W bloku #content_nav_ext umieściliśmy #content_main i #nav_bar, przekształcając je w elementy pływające za pomocą właściwosci float. Blok content_nav_ext wyrównaliśmy do lewego brzegu elementu obejmującego, a #misc_bar do prawego. W rezultacie oba elementy wypełniły całą szerokość okna przeglądarki i przylegają do siebie wewnętrznymi krawędziami.

Krok 2. Jak widać na ilustracji, dzięki tym ustawieniom dwa bloki znajdują się już na swoim miejscu.

Musimy teraz umieścić w obszarze #content_nav_ext kolumny z główną treścią i paskiem nawigacyjnym. Nadajmy w arkuszu stylów szerokość elementowi #content_main równą 60%, a elementowi #nav_bar równą 40%. Obu elementom nadajemy też właściwość #float i wyrównujemy do prawej i do lewej strony.

Uzyskamy efekt, jak na ilustracji obok - wszystkie kolumny znajdują się na swoich miejscach.

Oto zmodyfikowane fragmenty kodu arkusza stylów:

#content_main {
  float           : right;
  width           : 60%;
}
#nav_bar {
  position        : relative;
  float           : left;
  width           : 40%;
  background      : #ced;
}

Odstępy i dopełnienie

W układach o zmiennej szerokości kolumn ustawienie odstępów między kolumnami przysparza nieco problemów. Stosowane są dwa rozwiązania:

określenie odstępów za pomocą wartości procentowych, podobnie jak kolumn,
wprowadzenie dodatkowych elementów <div> wewnątrz każdej z kolumn, co pozwala ustawiać dopełnienia i marginesy niezależnie od szerokości kolumn.

Wykorzystanie pierwszej metody daje prostszy kod, ale szerokość odstępów będzie zależna od szerokości okna przeglądarki. A więc będzie zmienna. Zobaczmy, jak to uczynić w układzie trzykolumnowym.

Najpierw dodamy odstęp między kolumną #misc_bar, a pojemnikiem #content_nav_ext z dwiema pozostałymi kolumnami. Wystarczy, że zmniejszymy szerokość elementu #misc_bar np. o 5%, które przeznaczymy na lewy margines:

#misc_bar {
  position        : relative;
  float           : right;
  width           : 26.5%;
  margin-left     : 3.5%;
  }

Aby uzyskać odstęp między kolumną #nav_bar i kolumną #content_main, możemy odjąć kilka procent szerokości lewej lub centralnej kolumny i zamienić je na margines. Szerokość marginesu trzeba wyliczyć z prostego równania, bowiem tym razem ustalamy szerokość odstępu z szerokości elementu content_nav_ext. Oto zmieniony kod CSS

#nav_bar {
  position        : relative;
  float           : left;
  width           : 35%;
  margin-right    : 3.5%;
}

Samo ustawienie odstępów między kolumnami nie wystarczy. Co prawda tekst nie będzie się już zlewać, ale w bocznych paskach będzie dotykać krawędzi. Konieczne jest zatem ustawienie dopełnienia. W jego określaniu również należałoby skorzystać z wartości procentowych. Jeśli zastosowalibyśmy inne wartości, np. piksele, to trudno będzie przeliczyć np. 10px na wartość procentową, którą - dla równowagi - należy odliczyć od szerokości elementu. A do tego kłopotu dojdą jeszcze problemy związane z interpretacją modelu pudełkowego przez IE5/5.5.

Można zastosować jeszcze dwie inne metody:

dodać dopełnienie wszystkim elementom, które znajdą się w bocznych paskach
stworzyć w bocznych paskach dodatkowe elementy <div> i zdefiniować dla nich dopełnienie.

Druga z metod jest bezpieczniejsza. Przy pierwszej trzeba bowiem każdorazowo, gdy dodamy nowy element, pamiętać o uwzględnieniu dopełnienia. Oczywiście - nic za darmo. Tym razem ceną będzie dodatkowy, niesemantyczny element w kodzie pliku index.php. Oto zmodyfikowany fragment tego pliku:

<div id="content_nav_ext">
           <div id="content_main">
              <?php mosMainBody(); ?>
           </div>
           <div id="nav_bar">
              <div class="padding"> <!-- dodany znacznik  -->
                 <?php mosLoadModules( 'left' ); ?>
              </div> <!-- dodany znacznik  -->
           </div>
        </div><!-- koniec #content_nav_ext -->
        <div id="misc_bar">
           <div class="padding"> <!-- dodany znacznik  -->
              <?php mosLoadModules( 'right' ); ?>
           </div> <!-- dodany znacznik  -->
        </div>

Arkusz stylów trzeba uzupełnić np. a taką deklarację:

#nav_bar div.padding, #misc_bar div.padding{
  padding           : 0 10px;
  }

Minimalna i maksymalna szerokość

Aby zapobiec zbytniemu rozszerzeniu lub zwężeniu elementów, możemy skorzystać z właściwości max-width i min-width, dodając odpowiednie reguły do elementu #content obejmującego stronę, np.:

#content {
max-width: 1280px;
min-width: 800px;
}

Po osiągnięciu maksymalnej szerokości układ przestanie się rozciągać, po osiągnięciu minimalnej przestanie się zwężać, a w razie potrzeby pojawi się dolny pasek przewijania.

Tym samym sposobem możemy zapobiec zbytniemu zwężeniu kolumny z główną treścią. Dodajemy do właściwości elementu content_main dodatkową regułę:

#content_main {
  float: right;
  width: 60%;
  min-width: 400px; /* zapobiega zbytniemu zwężeniu */
}

Niestety, przeglądarki IE nie interpretują właściwości min-width i max-width. Niemniej, ze względu na inne przeglądarki, warto ją wprowadzić.

Wyrównanie długości kolumn

Dan Caderholm użył do symulacji równej wysokości kolumn stosunkowo prostego zabiegu. Rozwiązanie wymaga jeszcze jednego elementu <div> oraz dwóch obrazków. Uzupełnijmy kod pliku index.php> o ten dodatkowy element:


<div id="content">
  <div id="content_inner"> <-- dodana linia -->
.... pozostała część kodu ....
  </div> <-- dodana linia - koniec #content_inner-->
</div> <-- koniec#content --> 
W programie graficznym tworzymy dwa obrazki szerokości np. 2000px, a więc dostosowane do bardzo dużych monitorów. Jeden nazwiemy np.lewetlo.gif, a drugi prawetlo.gif. Nasza prawa kolumna ma szerokość 30%.  2000px x 30% daje nam 600px. Taką szerokość obrazka dla prawetlo.gif od prawej strony wypełniamy kolorem pomarańczowym. Dla lewej kolumny obliczenie jest nieco bardziej złozone. Jest to 40% z 70% szerokości całej strony, zatem szerokość lewej kolumny to 28% x 2000px, czyli 558px. Lewą część obrazka wypełniamy zielonym tłem, a prawą zmieniamy na przezroczystą, żeby nie zasłaniać tła prawej kolumny.
Obrazki umieszczamy w katalogu /images naszego projektu i uzupełniamy kod pliku templateDetails.xml, by nie zapomnieć dodać tej informacji (nie jest ona konieczna, jeśli nie będziemy korzystać z instalatora, ale jeśli zechcemy instalować szablon, w pliku  templateDetails.xml muszą być wyszczególnione wszystkie elementy składowe szablonu. Dodajmy więc do tego pliku linie:
  <images>
    <filename>images/lewetlo.gif</filename>
    <filename>images/prawetlo.gif</filename>
  </images>
</mosinstall>
I uzupełnijmy kod arkusza stylów:
#content{
   max-width       : 1280px;
   min-width       : 800px;
   background      : url(../images/prawetlo.gif) repeat-y 70% 0;
   }
#content_inner {
   background      : url(../images/lewetlo.gif) repeat-y 35% 0;
   }



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