Szablon strony 3kolumnowej – prosty i rozbudowany

Najprostrzy szblon jaki można wymyślić zamieściłam poniżej. Dzięki niemu stworzysz 3kolumnową stronę ale… (o „ale…” będzie dalej)

plik index

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>Strona w układzie 3-kolumnowym – prosta</title>
    <link rel=”stylesheet” href=”style.css” type=”text/css” />
</head>
<body>
        <div id=”header”>NAGŁÓWEK</div>
        
        <div id=”left”><p>LEWY PANEL</p></div>
        
        <div id=”center”><p>ŚRODKOWY PANEL</p></div>
        
        <div id=”right”><p>PAWY PANEL</p></div>
        
        <div id=”footer”>STOPKA</div>
        
</body>
</html>

 

plik style.css

#header, #footer {
    background-color: #008000; /* tło naglowka i stopki, jasne szare */
    clear: both; /* nie pozwala na nałożenie innych elementow */
    width: 100%;
    margin: 0 auto;
}

#left, #center, #right {
    float: left; /* elementy beda ustawione obok siebie, opływając się z lewej */
}

#center{
    width: 70%;
    background: #aba;
}

#left, #right{
    width: 15%;
    background: #afa;
}

 

Jeżeli jednak zależy ci na szablonie, który nie „rozjedzie” Ci się po zmianie marginesów oraz divy wyrównają się względem siebie na wysokość – polecam poniższy, rozbudowany przykład. Zostały tam dodane pewne własności, których omówienie jest w komentarzach. Miłego korzystania życzę 🙂

 

plik index

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Strona w układzie 3-kolumnowym</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" 
            type="text/javascript"></script> <!-- w tym miejscu łączymy się z bibliotekami javy-->
    <!-- to jest skrypt javascript ustawiający wysokości 3 kolumn na podstawie identyfikatora css
    i wcale nie jest bardzo skomplikowany -->
    <script type="text/javascript"> 
    $(document).ready(function(){
        var colRight =  $("div#right").height();
        var colLeft = $("div#left").height();
        var colCenter = $("div#center").height();
        
        if (colLeft > colRight && colLeft > colCenter)
        {
            $("div#right").css({'height' : colLeft});
            $("div#center").css({'height' : colLeft});
        } 
        else if (colCenter > colLeft && colCenter > colRight)
        {
            $("div#left").css({'height' : colCenter});
            $("div#right").css({'height' : colCenter});
        }
        else if (colRight > colLeft && colRight > colCenter)
        {
            $("div#left").css({'height' : colRight});
            $("div#center").css({'height' : colRight});
        };
    });
    </script>
</head>
<body>
    <div id="box">
        <div id="header">
            <h1>NAGŁÓWEK</h1>
        </div>
        <div id="container">
            <div id="left">
                <h3>LEWY PANEL</h3>
                <ul>
                    <li>link #1</li>
                    <li>link #2</li>
                    <li>link #3</li>
                </ul>
            </div>
            <div id="center">
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...                                 
                </p>
            </div>
            <div id="right">
                <h3>PAWY PANEL</h3>
                <p>
                    Lorem ipsum dolor sit amet...
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
                </p>
            </div>
        </div>
        <div id="footer">
            <h1>STOPKA</h1>
        </div>
    </div>
</body>
</html>

plik style.css
#box {
    width:100%;
    height: 100%;
    margin: 0 auto; /* margines górny i dolny: brak, lewy i pawy automatycznie, 
    dzięki temu strona zostanie wyśrodkowana*/
}

#header, #footer {
    background-color: #008000; /* tło naglowka i stopki, jasne szare */
    clear: both; /* nie pozwala na nałożenie innych elementow */
    display:flex; /* ustawienie tzw. elastycznego pudełka - wykasuj a zrozumiesz po co to jest */
}
#header p, #header h1, #footer p, #footer h1 {
    margin: 0 auto;
}

#container{
    width: 100%; 
    margin: 0 auto; 
}

#left, #center, #right {
    float: left; /* elementy beda ustawione obok siebie, opływając się z lewej */
    margin:  0 auto; 
    padding: 0 5px; /* padding - margines wewnetrzny */
    /*teraz musimy dodać tzw. wymiarowanie pudełka, czyli wlasność po ustawieniu której 
    padding i margin nie wpłynie na wielkość pudełka - nie rozciągnie sie element*/
    box-sizing:border-box;/* zapis dla wszystkich przeglądarek (w przyszłości) */
    -moz-box-sizing:border-box;/* zapis dla przeglądarki Firefox */
    -webkit-box-sizing:border-box;/* zapis dla przeglądarki Safari */
}

#center{
    width: 70%; 
    background: #aba; 
}
#center p {
    text-indent: 10px; 
}

#left, #right{
    width: 15%; 
    background: #afa;
}