Pomoc - Układ ustalony wyśrodkowany

Start

Programowanie

Szablon

Układ ustalony wyśrodkowany

Paul O’Brien udostępnił pod adresem Three Column Layout with Equalizing Header and Footer niezwykle bogaty zestaw materiałów objaśniających techniki projektowania układów 3-kolumnowych z nagłówkiem i stopką. W tej części skorzystamy z jego sugestii.

Założenia projektu

Stworzymy układ 3-kolumnowy, ustalony, z nagłówkiem i stopką, z kolumnami wyrównanymi do najdłuższej. Oto pełny zestaw głównych założeń:

semantyczny kod: oznaczenia sygnalizujące treść, kolejność zgodna z logiczną strukturą treści,
stały: szerokość kolumn ściśle określona i niezmienna,
wyśrodkowany: umieszczony w centrum okna przeglądarki,
wyrównana wysokość kolumn: każda kolumna może być dowolnie wysoka,
z nagłówkiem i stopką: nagłówek nad kolumnami, stopka przy dolnej krawędzi wszystkich kolumn,
tło w kolumnach: różne, na całej wysokości,
linie rozdzielające kolumny.

Projektując wielokolumnowe układy stron, napotykamy problemy, które można rozwiązać na wiele sposobów. Projekt Paula O’Briena pozwali nam poznać kilka nowych technik.

Przygotowanie

Najpierw przygotujemy podstawowe pliki szablonu. Utwórz w katalogu /templates nowy katalog: 03_fixed_centre i przekopiuj doń całą zawartość utworzonego wcześniej katalogu /podstawa. Następnie wyedytuj plik templateDetails.xml i zmień nazwę szablonu:

<name>03_fixed_centre</name>

Możesz też, dla celów dokumentacyjnych, dodać opis szablonu:

  <description>
    3-kolumnowy, ustalona szerokość  kolumn, z nagłówkiem i stopką 
    oparty na opracowaniu P. O'Briena:
    Three Column Layout with Equalizing Header and Footer
  </description>

Dodaj także w elemencie images linię umieszczającą obrazek tła kolumn:

  <images>
     <filename>images/centredbg.png</filename>
     <filename>images/header.jpg</filename>
  </images>

Następnie zastąp zawartość plików index.php oraz template_css.css.

Index.php

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

<?php
/** 03_fixed_centre. Układ 3-kolumnowy, ustalony wg P. O'Briena 
    oparty na: Three Column Layout with Equalizing Header and Footer 
    (http://www.pmob.co.uk/)
*/
 
<body>
    <div id="content"> 
      <div id="content_nav_ext"> 
         <div id="content_main"> <!--najpierw główna treść -->  
            <?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="clear_footer"></div> <!-- oczysza miejsce na stopkę -->
      <div id="header">
          <h1><?php echo $GLOBALS['mosConfig_sitename']; ?></h1> 
      </div>
      <div id="footer">
         <?php include_once($GLOBALS['mosConfig_absolute_path'] 
         . '/includes/footer.php'); ?> 
      </div>
    </div> <!-- koniec ramki: #content -->
 </body>
</html>

Arkusz stylów

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

/* 03_fixed_centre 
   3 kolumny, ustalony wyśrodkowany, oparty na wg P. O'Briena 
   oparty na: 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: #F8F8F8;    /* kolor całej strony */
   color           : #000;
   text-align      : center;     /* wyśrodkuj stronę - dla IE*/
   min-width       : 782px;      /* dla Mozilli = 2px więcej niż #content*/
   font            : 76.1% Verdana, Arial, Helvetica, sans-serif;    
}
#content{
   position        : relative;
   height          : 100%;
   min-height      : 100%;
   width           : 780px;
   border-left     : 1px solid #888;
   border-right    : 1px solid #888;
   color           : #000;
   background      : url(../images/centredbg.png) repeat-y 50% 50%; /* tło kolumn */
   margin          : auto;       /* wyśrodkuj stronę */ 
   text-align      : left;       /* przywróć justowanie tekstu do lewej */           
 }
#nav_bar {
   float           : left;
   position        : relative;   /* dla IE - rozwiązuje problemy
                                  z wyświetlaniem elementów pływających */
   width           : 190px;      /* mniej o 2 px na border */
   padding-top     : 90px;       /* miejsce na nagłówek */
   padding-bottom  : 32px;       /* oddala nieco stopkę */
}
#misc_bar {
   float           : right;
   position        : relative;
   width           : 190px;      /* mniej o 2 px na border */
   padding-top     : 90px;       /* miejsce na nagłówek */
   padding-bottom  : 32px;       /*  oddala nieco stopkę */
}
 
#content_nav_ext {        
   float           : left;
   width           : 590px;      /* = #content - #misc_bar */
}
#header{
   position        : absolute;
   top             : 0;
   width           : 780px;
   height          : 90px;
   background      : #D0E0FF url(../images/header.jpg);
   border          : 1px solid #888;
}
 
#footer {
   clear           : both;
   position        : absolute;
   left            : 0;
   bottom          : 0;
   width           : 780px;
   height          : 50px;
   border-top      : 1px solid #888;
   border-bottom   : 1px solid #888;
   background-color: #EAF0FE;
   text-align      : center;
}
#content_main {
   width           : 400px;      /* = #content - #nav_bar - #misc_bar*/
   float           : right;      /* ustawia margines od lewej */
   padding-top     : 90px;       /* miejsce na nagłówek */
   padding-bottom  : 32px;       /*  oddala nieco stopkę */
}
 
#clear_footer {                  /* czyści obszar dla stopki */
   width           : 100%;
   height          : 52px;
   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         : 52px;       /* dla IE5 */
   height         : 50px;       /* dla IE6 */
   }
/*=============== KONIEC ŁATEK ===================== */
 
/* ========== TYLKO DLA PODGLąDU =================== */
h1 {                 /* Ukrywa wyświetlanie nazwy w nagłówku strony */
   display: none;
}
#nav_bar,#misc_bar {
    background-color: #F2F2F2;   /* tło w obszarze wypełnionym zawartością */
}

Tworzenie kolumn

Pojemniki na kolumny P. O’Brien zastosował w tym rozwiązaniu pojemnik - #content, pozycjonowany względnie, w którym umieścił element pływający #content_nav_ext z kolumnami lewą #nav_bar i centralną #content_main. Na zewnątrz umieścił pasek prawej kolumny #misc_bar, przekształcając go za pomocą właściwości #float w element pływający.

Wysokość kolumn

Blok #content ma określoną wysokość na 100% i jednocześnie minimalną wysokość również na 100%. W rezultacie pojemnik wypełnia całe okno przeglądarki, w którym powinno się znaleźć jeszcze miejsce na nagłówek i stopkę, o czym za chwilę.

W ten sposób ominął problem z IE, która nie interpretuje zgodnie ze specyfikacją wysokości bloków. IE traktuje zawsze min-height jako height, a gdy zawartość jest większa niż ustalona wysokość bloku, dostosowuje automatycznie rozmiar bloku do zawartości.

Taka deklaracja powoduje wszakże, że zdefiniowana wysokość będzie dla innych przeglądarek zarówno minimalną, jak i maksymalną. Aby uniknąć tej sytuacji, projektant użył reguły, nakazującej innym przeglądarkom dostosować wysokość automatycznie: height:auto i ukrył tę regułę przed IE. Wykorzystany został do tego celu selektor potomka (>), którego nie interpretuje IE, a interpretują inne przeglądarki.

html > body #content{height : auto;} /* dla Mozilli… */

IE po prostu tej reguły nie wykona. Tym sposobem mamy gwarancję, że wysokość wszystkich trzech kolumn będzie zawsze dostosowana do wysokości tej, w której system umieści najwięcej materiałów.

Tło kolumn

Do ustalenia tła kolumn zastosowany został obrazek tła w bloku #content. Obrazkiem jest pasek szerokości elementu #content podzielony na trzy części równe szerokościom lewej, centralnej i prawej kolumny. Każdej można nadać inny kolor dzięki ustalonej i niezmiennej szerokości kolumn. Wysokość obrazka jest nieistotna, bo umieszczająca go regula nakazuje powtarzanie obrazka w pionie:

background : url(../images/centrebg.png) repeat-y center center;

Umieszczenie nagłówka

Umieszczanie nagłówka i stopki Umieszczenie nagłówka jest w tym rozwiązaniu stosunkowo proste. Autor skorzystał z własności pozycjonowania bezwzględnego position : absolute.

Ale dodanie pozycjonowanego bezwzględnie nagłówka wymaga obniżenia wszystkich trzech kolumn tak, aby nie zachodziły na obiekt #header. Elementy pozycjonowane bezwzględnie są wyjmowane z normalnego toku układu i nie wpływają w żaden sposób na pozostałe. W naszym przypadku elementy code>#nav_bar, #content_main i #misc_bar nie wiedząc, że nad nimi jest #header, przykryłyby go.

Projektant ustalił więc dla tych bloków górne dopełnienie wysokości nagłówka, by zrobić dla niego miejsce:

padding-top     : 85px;  /* konieczne: miejsce na nagłówek */

Oczywiście, wielkość dopełnienia zależy od planowanej wysokości nagłówka.

Umieszczenie stopki

Umieszczenie stopki jest nieco bardziej złożone. Podobnie jak dla nagłówka, projektant ustawił elementowi #footer własność position : absolute; i nakazał przyleganie do lewej krawędzi: left: 0 elementu #content oraz do dolnej krawędzi okna przeglądarki: bottom: 0.

Dodanie do właściwości elementu #footer reguły: clear:both powinno spowodować, że stopka nie będzie oblewana z lewej i prawej strony.

Tak się jednak nie dzieje. Aby uzyskać pożądany efekt, autor umieścił w kodzie dodatkowy element #clear_footer i w tym elemencie umieścił regułę clear:both oraz określił szerokość i wysokość obszaru, który ma być oczyszczony, co rozwiązało problem:

#clear_footer {               /* czyści obszar dla stopki */
   width           : 100%;
   height          : 52px;
   clear           : both;
   }

Zwróć jeszcze uwagę na 32px dopełnienia do dolnych krawędzi elementów #nav_bar, #content_nav_ext i #misc_bar. Powoduje ono, że zawartość środkowych kolumn jest we wszystkich przeglądarkach oddalona nieco od stopki. Przyjrzyj się uważnie np. w Firefox, IE i Operze - w każdym przypadku ta odległość będzie nieco inna. Można by zastosować sztuczkę likwidującą te różnice w wyświetlaniu przez różne przeglądarki, ale nie burzą one układu, więc nie ma potrzeby komplikować kodu specjalnymi łatkami.

Przystosowanie szablonu do Joomla! i Mambo

Uklad 3-kolumnowy, ustalony

Otrzymany układ bardzo dobrze sprawdza się w Joomla. Wymaga wszakże dostosowania. Do pliku index.php trzeba dodać instrukcje umieszczające kod modułów i ukrywające go w razie potrzeby oraz instrukcje ukrywające prawą kolumnę.

Modyfikacji w związku z tym wymagać będzie również arkusz stylów. W przykładzie Prosty układ - dla Joomla! i Mambo wystarczyło dodać deklaracje dla content. W tym przypadku to nie wystarczy, bowiem nie tylko pojemnik content_nav_ext będzie szerszy, ale także blok jego rodzica, obejmujący również kolumnę nav_bar. Trzeba więc również ustalić deklaracje dla content_main_ext.

W omówieniu pominęliśmy również zupełnie kwestię odstępów między kolumnami. Oczywiście, całość trzeba również uzupełnić deklaracjami stylów dla różnych standardowych elementów Joomla.

Rozwiązanie tych problemów pozostawiamy jako ćwiczenie, w którym pomocne będą kolejne omówienia.

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