Loading:


Struktura HTML dwóch kolumn dla stałej szerokości i rozszerzalnej procentowej

Skrypt tworzy strukturę strony z dwoma kolumnami, przy czym jedna z nich ma stałą szerokość 400px natomiast druga wypełnia pozostałą szerokość strony.

 

Przykład bazuje na wycentrowanej stronie z nagłówkiem oraz stopką.

 

Skrypt poprawnie działa dla: IE 6, 7, 8, FF 2, 3, 3.6, Safari, Chrome oraz Opera.

 

Listing 1.0 zawiera link do strony z przykładem.


Listing 2.0 zawiera kod źródłowy.



Napisz Artyku³

Listing

//listing 1.0
// http://funkcjenet.boo.pl/funkcjenet/html/struktura_strony_2_kolumny.html

//listing 2.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Funkcje.net - układ dwóch kolumn dla stałej szerokości i rozszerzalnej procentowej.</title>
<style type="text/css">
.FunkcjeNet {
        margin:0 auto;
        width:1000px
}

.naglowek {
        background:#3300CC;
        width:100%;
        height:80px;
}

.content {
        width:100%;
        background-color:#3399CC
}

.pierwszaKolumna {
        float:left;
        width:400px; /* deklaracja własnej szerokości */
        margin-right:20px; /* deklaracja własnego odstępu od klumn */
        height:400px;
        background-color:#336699
}

.drugaKolumna {
        background-color:#3399CC
}

.clearFloat {
        clear:both;
        font-size:1px
}

.stopka {
        background:#000099;
        width:100%;
        height:80px
}
</style>
</head>

<body>
<div class="FunckjeNet">
        <div class="naglowek">
        <b>Funkcje.net - Skrypty oraz Funkcje PHP, Flash, JavaScript, HTML, CSS, AJAX, XML </b>
    </div>
    <div class="content">
        <div class="pierwszaKolumna">
                <b>Stała szerokość kolumny</b>
        </div>
        <div class="drugaKolumna">
                <div class="marginesDrugiejKolumny">
                <b>Szerokość zależna od wielkości okna</b><br />
                Skrypt pobrany ze strony Funkcje.net, Skrypt pobrany ze strony Funkcje.net, Skrypt pobrany ze strony Funkcje.net,
                Skrypt pobrany ze strony Funkcje.net, Skrypt pobrany ze strony Funkcje.net, Skrypt pobrany ze strony Funkcje.net,
                Skrypt pobrany ze strony Funkcje.net, Skrypt pobrany ze strony Funkcje.net, Skrypt pobrany ze strony Funkcje.net,
                Skrypt pobrany ze strony Funkcje.net, Skrypt pobrany ze strony Funkcje.net, Skrypt pobrany ze strony Funkcje.net,
            </div>
        </div>
        <div class="clearFloat"> </div>
    </div>
    <div class="stopka">Zbiór ponad 4300 Funkcji, Skryptów, Kursów oraz Artykułów dotyczących projektowania stron WWW dla początkujących i zaawansowanych.</div>
</div>
</body>
</html>




Dodano przez: divix
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors