Loading:

Promocja Helion.pl

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>


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=5908

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: divix
Ranga: Administrator serwisu Punktów: 38323
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-17 v.1.5 | design: diviXdesign & rainbowcolors