eRIZ's weblog

PHP, webdesign, Linux, Windows i inne, bo nie samym chlebem człowiek żyje

Dwukolumnowy proporcjonalno-stały layout bez problemów

Gdyby nie to, że IE<=6 potrafi płatać przeróżne figle, to webmasterzy mieliby dosłownie sielankowe życie. :) A tak, trzeba się męczyć (może to celowe działanie Stwórcy, aby zarobki nie pospadały? :D). Załóżmy, że IE w pełni obsługuje (no co? Pomarzyć nie można?! ;P) wszelkie standardy, zachowuje się tak, jak inne przeglądarki. O ile w przypadku IE7 nie jest już tak źle, to IE6 działa tak, że tylko lokalni szamani są w stanie przewidzieć, jak zostanie zinterpretowana konkretna strona…

Załóżmy, że IE6 obsługuje wszystko jak trzeba. Wtedy wystarczyłby np. display: table-cell i wszyscy byliby zadowoleni. Wracamy na Ziemię i kończy się sielanka… Co można zrobić?

Bardzo często muszę stworzyć jakiś layout określony mniej-więcej w ten sposób: dwie kolumny, z czego pierwsza ma określoną szerokość np. 150 pikseli, a druga dopasowywuje się do rodzica (załóżmy, że do całej szerokości przeglądarki).

Układ wyjściowy

W dalszej części będziemy bazować na tym krótkim kawałku kodu.

  1. <div id="rodzic">
  2.         <div id="lewa">abc def ghi jkl mno pqr stu vwx yz</div>
  3.         <div id="tresc">Lorem ipsum...</div>
  4. </div>

W tej „wersji” zakładam, że warstwa tresc zawiera więcej tekstu niż lewa (dlaczego? chodzi o to, aby warstwa z treścią była wyższa od lewej, ponieważ tło treści bez tekstu nie będzie się zwiększać do pożądanej wysokości).

Najprostsze rozwiązania są zazwyczaj najlepsze i zazwyczaj (praktycznie zawsze) wystarcza:

  1. #rodzic
  2. { width: 100%; overflow: hidden }
  3.  
  4.         #lewa
  5.         { width: 150px; margin-right: -151px; }
  6.  
  7.         #content
  8.         { margin-left: 150px; }

Po co ten ujemny margines w lewej kolumnie? Ano, dla IE6… Można było go wcisnąć w komentarzu warunkowym i serwować tylko dla IE, ale – co ciekawe – nie wpływa na wygląd w innych przeglądarkach… Nierzadko się zdarza, że to jedyny hack, którego trzeba użyć, a skoro działa u innych i nie zajmuje wiele miejsca (mniej niż cały komentarz warunkowy) – można spokojnie go zostawić w głównym arkuszu (oczywiście, w przypadku większej liczby takich podchodów nawet nie ma co się zastanawiać – w komentarz). Jaka panuje zasada w wyliczaniu marginesu? Otóż, jego szerokość musi być co najmniej o jeden piksel większa niż sumaryczna warstwy (czyli padding+margin+width; tak jest najbezpieczniej). Kombinowanie z tym marginesem jest potrzebne, ponieważ bez niego w warstwie zawartosc wszystko do wysokości lewej kolumny przesunięte jest o jeden piksel. I nieważne, jak duży się ustawi margines w tresc – będzie przesunięte o ten piksel:

Bug w IE

Gdy dodamy margines – wszystko działa. :) Sprawdza się tak, jak to sobie zaplanowaliśmy wcześniej.

Układ wyjściowy

Kolorowanie

Przy display: table[-cell] (itp.), tło można bezpośrednio ustawić w stylach dla lewa, ale jest pewien problem – IE6… Co zrobić? Trzeba ustawić tło dla rodzica i odpowiednio je przesunąć tak, aby dotyczyło tylko lewej warstwy. Można to zrobić w dwojaki sposób:

  • Utworzyć obrazek o szerokości lewej kolumny i powtarzać go tylko w pionie
  • Ustawić tło (stosowane w wypadkach koloru) dla rodzica i przysłonić niepożądaną część koloru. Cóż, głupia przeglądarka – głupi sposób.

    Tło

Można również wykorzystać sposób Riddle’a, ale zależało mi na tym, aby nie stosować expressions. Fakt, u mnie lewa kolumna sie nie „rośnie” bezpośrednio wraz z zapełnianiem treścią, ale…

4 komentarze

dopisz swój :: trackback :: RSS z komentarzami

RSS z komentarzami :: trackback

Skomentuj

Możesz używać znaczników XHTML. Dozwolone są następujące tagi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Wszystkie komentarze przechodzą przez moderację oraz filtry antyspamowe. Nie zostanie opublikowany komentarz, jeśli:

  • Jego treść obraża kogokolwiek.
  • W treści znajdują się wulgaryzmy i słownictwo ogólnie uznane za nieprzyzwoite.
  • Mam wątpliwości co do autora wpisu (Wszelkie anonimy są kasowane - niezależnie od zawartości - wpisz prawdziwy e-mail. Jeśli usunąłem, Twoim zdaniem, komentarz niesłusznie - daj znać). Zdarza się, iż sprawdzam kim jest komentujący.
  • Zawiera jakąkolwiek formę reklamy.

Szufladka