nagradzam tutoriale

  • Kolumny równej wysokości za pomocą CSS

    dodano 10.01.2008 / komentarzy: 2 / autor: palmiak

    Pytanie o to jak zrobić kolumny o takiej samej wysokości za pomocą CSS jest jednym z najpopularniejszych jakie padają na forach. Postaram się w tym tutorialu opisać najpopularniejsze metody dzięki którym osiągniemy nasz cel.

    Nasza strona testowa

    Do tych eksperymentów użyjemy strony, która składać się będzie z dwóch kolumn. Kolumna po lewej będzie miała nazwę lewo, a po prawej prawo. Na razie nie będę wypełniał jej treścią. Zacznę to robić dopiero w przykładach by pokazać jakie mogą wyniknąć problemy.

    Metoda prymitywna, czyli height

    Najprostszą metodą jest nadanie obu kolumnom tej samej wysokości w arkuszu stylu:

    #lewo, #prawo {
    width:400px;
    height:220px;
    float:left;
    }
    #lewo {
    background:red;
    }
    #prawo {
    background:blue;
    }

    No i niby wszystko jest dobrze. Kłopoty zaczynają się w momencie kiedy nie wiemy jakiej wysokości będzie tekst (projektujemy skórę do CMSa). W tym momencie okazuje się, że podana przez nas wysokość jest za duża bądź za mała, tak jak na tym przykładzie. Jak widać ta metoda przydaje się tylko wtedy kiedy mam pełną kontrolę nad tekstem.

    Obrazkowo

    Jest to jedna z moich ulubionych metod ze względu na pomysłowość. Najczęściej gdy robimy stronę to nasze kolumny lewo i prawo są zawarte w jakimś wrapperze, containerze czy jak to tam nazwiemy. Zawsze też ten container rozciąga się wysokość tej wyższej kolumny. No to czemu by nie zrobić obrazka o wysokości jednego piksela, odpowiedniej szerokości i kolorach które będą naśladować nasze kolumny.

    Od strony kodu będzie to wyglądało tak:

    <div id="container">
            <div id="lewo">treść</div>

            <div id="prawo">treść</div>
    <div class="clear"></div>
    </div>

    a CSS do tego wygląda następująco

    #container {
                    width:800px;
                    background:url(tlo.jpg) repeat-y;
                    }
            #lewo {
                    width:400px;
                    float:left;

                    }

            #prawo {
                    width:400px;
                    float:left;
                    }
            .clear {
                    clear:both;
                    }

    Spójrzmy na przykład

    Muszę przyznać, że jest to dość skuteczne wyjście. Mogą się niestety pojawić problemy gdy ktoś wyłączy obrazki.

    Marginem i paddingiem

    Zamiast tłumaczyć jak to konkretnie działa, pokażę lepiej krok po kroku co się dzieje. Zerkajcie w kod źródłowy by widzieć co się dokładnie zmieniło.

    Jedyne na co trzeba uważać to, żeby nie przekroczyć wysokości podanej w marginach/paddingach. Jeśli ją przekroczymy przestanie nam to działać jak należy.

    Bordery

    Działa to na podobnej zasadzie jak trick z obrazkiem, tylko zamiast obrazka użyjemy bordera, który będzie naśladował jedną z kolumn. Oczywiście główną rolę odegra znowu nasz container. Najpierw musimy nasze dwie kolumny otoczyć containerem, a następnie musimy jeszcze dodać diva, który rozwiązę kwestie floatów za pomocą clear:both. Tym sposobem wyglądać to będzie tak:

    <div id="container">
            <div id="lewo">treść</div>

            <div id="prawo">treść</div>
    <div class="clear"></div>
    </div>

    Teraz czas na dopisanie stylu:

            #container {
                    width:400px;
                    background:red;
                    border-right:300px solid blue;
                    }
            #lewo {
                    width:400px;
                    float:left;

                    }

            #prawo {
                    width:300px;
                    float:left;
                    margin-right:-300px;
                    }
            .clear {
                    clear:both;
                    }

    W sumie strona jest szeroka na 700px (400px + 300px bordera). Zwykłe tło containera będzie robić za lewą kolumnę, a border za prawą. Oczywiście jeśli w prawej części nie napiszemy margin-right:-300px to treść nie wskoczy nam na miejsce. Pozostaje nam spojrzeć na przykład.

    Która najlepsza?

    Tak naprawdę to trudno powiedzieć. Nawet pierwszy sposób nadaje się do pewnych sytuacji. Ba - będzie w niektórych sytuacjach ideałem.

    Obrazek udający kolumny trzeba stosować z rozwagą i zobaczyć jak nasza strona będzie wyglądać jeśli wyłączymy pokazywanie obrazków - możemy nagle zobaczyć biały tekst na biały tle.

    Trzeci sposób jest bardzo elastyczny. I sprawia mało problemów. Trzeba tylko zawsze pamiętać czy margin miały mieć wartość ujemną czy dodatnią.

    Czwarty sposób jest dość zakręcony. Przy większej ilości kolumn trzeba się troszkę naliczyć. Osobiście w praktyce nigdy nie stosuję.

    Komentarze / dodaj komentarz


    • autor: Kolumny równej wysokości za pomocą CSS | Tworzenie stron www. Projektowanie
      dodano: 20.01.2008

      [...] Pytanie o to jak zrobić kolumny o takiej samej wysokości za pomocą CSS jest jednym z najpopularniejszych jakie padają na forach. Postaram się w tym tutorialu opisać najpopularniejsze metody dzięki którym osiągniemy nasz cel. (more…) [...]


    • autor: gorący_huberto_:P
      dodano: 18.07.2008

      Z tego co sam się bawiłem :P
      to :P
      zauważam iż… :P

      Jeśli container i tak ma mieć stałą szerokość, to wystarczy coś takiego:

      display: table;
      height: 200px;
      width: 1000px;

      Nie wiem co na to Opera :P Nie sprawdzałem :P

    Napisz komentarz