Loading:

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.Współpraca 2.imagesy 3.exp 4.getenv() 5.getmyuid() 6.yp_first 7.link 8.yaz_record 9.Nowa broń 10.vfprintf()

56853.05

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.

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>