REALIZACJA ROZWIJANEGO TŁA KOLUMNY

autor Krzysztof Gajewski

W programie graficznym wybieramy opcje prostokąt. Po uzyskaniu na ekranie formularza wpisujemy do niego szerokość projektowanej węższej kolumny, na ogół od 150px do 300px oraz wysokość 10px. Następnie barwimy uzyskany prostokątny pasek pastelowym np. niebieskim kolorem i zapisujemy w formacie gif pod nazwą np B300.gif. Otrzymany plik graficzny obrazu tła umieszczamy w pliku o nazwie images razem z innymi obrazkami i fotografiami.

W arkuszu CSS w selektorze #wrapper zapisujemy deklaracje; szerokości, centrycznej pozycji oraz tła obu kolumn. W selektorze #wrapper_right zapisujemy właściwość tło oraz wartości; adres url z nazwą pliku images oraz nazwą pliku obrazka B300.gif. Dalsze wartości oznaczają; do prawej krawędzi oraz rozwijaj pasek po osi pionowej y. Nasz niebieski pasek dosunięty do prawej krawędzi rozwinie się w dół aż do stopki przykrywając w tej części strony tło zrealizowane przez selektor #wrapper

Z tego powodu w kodzie XHTML dla dwóch kolumn oba tła muszą być realizowane w określonej kolejności. Najpierw realizujemy tło całej strony poleceniem <div id="wrapper"> a następnie poleceniem <div id="wrapper_right"> rozwijamy pasek dosunięty do prawej krawędzi strony, który zakrywa tło poprzednie na szerokosci 300px.

KOD XHTML DWIE KOLUMNY z ARKUSZEM CSS poniżej

<body>
   <div id="wrapper">
      <div id="wrapper_right">
         <div id="header"> NAGŁOWEK </div>			
            <div id="content"> KOLUMNA LEWA </div>
               <div id="sidebar"> KOLUMNA PRAWA </div>
                  <div id="footer"> STOPKA </div>
      </div>
   </div>  
</body>
</html>
Kolor tła lewej szerszej kolumny zależy od wartości background w selektorze #wrapper co pozwala bardzo prosto na zmianę koloru. Stosując metodę Dana Cederholma zmiana koloru tła tylko szerszej kolumny wymaga wykonania w programie graficznym nowego paska i jego wymiany w selektorze CSS.
body {font-size:small;}
#wrapper  {width:900px; margin:0 auto; background: #ffa500}
#wrapper_right  {background:url(images/B300.gif) right repeat-y}
#header  {background:#cd853f}
#content  {float:left; width:600px}
#sidebar  {float:right; width:300px}
#footer  {clear:both; background:#cd853f}
Zamieniając w trzech selektorach (#wraper_right, #content, #sidebar) wartości left na right i right na left przestawiamy kolumny miejscami. Wtedy lewa kolumna jest węższa a prawa kolumna staje się szersza.

KOD XHTML TRZY KOLUMNY z ARKUSZEM CSS poniżej

W kodzie XHTML dla trzech kolumn wymagana jest następująca kolejność realizacji tła. Najpierw realizujemy tło całej strony poleceniem <div id="wrapper"> a następnie polecenia <div id="wrapper_left"> i na końcu <div id="wrapper_right"> rozwijają dwa paski tła dosunięte do skrajnych krawędzi kolumn, pozostawiając odsłonięte tło środkowej kolumny. W miejscu jednego paska można użyć dwóch pasków o różnych kolorach, uzyskując różne tła w bocznych kolumnach. 

<body>
   <div id="wrapper">
      <div id="wrapper_left">
         <div id="wrapper_right">
            <div id="header"> NAGŁOWEK </div>
               <div id="sidebar_left"> KOLUMNA LEWA </div>							
                  <div id="content"> KOLUMNA CENTRUM </div>
                     <div id="sidebar_right"> KOLUMNA PRAWA </div>
                        <div id="footer"> STOPKA </div>
      </div>
   </div>  
</body>
</html>
Kolor tła środkowej kolumny zależy od wartości background w selektorze #wrapper co pozwala bardzo prosto na zmianę koloru.
body {font-size:small;}
#wrapper  {width:900px; margin:0 auto; background: #ffa500}
#wrapper_left  {background:url(images/B300.gif) left repeat-y}
#wrapper_right  {background:url(images/B300.gif) right repeat-y}
#header  {background:#cd853f}
#sidebar_left  {float:left; width:300px}
#content  {float:left; width:300px}
#sidebar_right  {float:right; width:300px}
#footer  {clear:both; background:#cd853f}