Budowa stron na DIV-ach.
Wiele osób nadal nie potrafi zbudować strony opartej na DIV-ach. W tym artykule postaram się przybliżyć nudowę stron na warstwach.
1. Klasyczna budowa - top, menu po lewej stronie, treść po prawej i stopka.
Plik HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="menu"></div>
<div class="srodek"></div>
<div class="stopka"></div>
</div>
</body>
</html>
W tym pliku "ustawiamy" wszystkie DIV-y na ich miejscach.
Plik CSS:
.container
{
width: 620px;
}
.top
{
clear: both;
height: 130px;
border: gray dashed 1px;
}
.menu
{
float: left;
width: 120px;
height: auto;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
.srodek
{
float: right;
border: gray dashed 1px;
width: 490px;
height: auto;
margin: 3px 0px 0px 4px;
}
.stopka
{
clear: both;
height: 20px;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
W tym pliku ustawiamy położenie, szerokość, wysokość, obramowania i marginesy wszystkich DIV-ów.
2. Często spotykana budowa - top, menu lewe, środek, menu prawe + stopka:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="menu_lewe"></div>
<div class="srodek"></div>
<div class="menu_prawe"></div>
<div class="stopka"></div>
</div>
</body>
</html>
CSS:
.container
{
width: 740px;
}
.top
{
clear: both;
height: 130px;
border: gray dashed 1px;
}
.menu_lewe
{
float: left;
width: 120px;
height: auto;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
.srodek
{
float: left;
border: gray dashed 1px;
width: 485px;
height: auto;
margin: 3px 0px 0px 4px;
}
.menu_prawe
{
float: right;
width: 120px;
height: auto;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
.stopka
{
clear: both;
height: 20px;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
Tak oto uzyskujemy budowy stron na DIV-ach. Bardzo dużo można poczytać o nich na forach o w kursach CSS.
1. Klasyczna budowa - top, menu po lewej stronie, treść po prawej i stopka.
Plik HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="menu"></div>
<div class="srodek"></div>
<div class="stopka"></div>
</div>
</body>
</html>
W tym pliku "ustawiamy" wszystkie DIV-y na ich miejscach.
Plik CSS:
.container
{
width: 620px;
}
.top
{
clear: both;
height: 130px;
border: gray dashed 1px;
}
.menu
{
float: left;
width: 120px;
height: auto;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
.srodek
{
float: right;
border: gray dashed 1px;
width: 490px;
height: auto;
margin: 3px 0px 0px 4px;
}
.stopka
{
clear: both;
height: 20px;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
W tym pliku ustawiamy położenie, szerokość, wysokość, obramowania i marginesy wszystkich DIV-ów.
2. Często spotykana budowa - top, menu lewe, środek, menu prawe + stopka:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="menu_lewe"></div>
<div class="srodek"></div>
<div class="menu_prawe"></div>
<div class="stopka"></div>
</div>
</body>
</html>
CSS:
.container
{
width: 740px;
}
.top
{
clear: both;
height: 130px;
border: gray dashed 1px;
}
.menu_lewe
{
float: left;
width: 120px;
height: auto;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
.srodek
{
float: left;
border: gray dashed 1px;
width: 485px;
height: auto;
margin: 3px 0px 0px 4px;
}
.menu_prawe
{
float: right;
width: 120px;
height: auto;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
.stopka
{
clear: both;
height: 20px;
border: gray dashed 1px;
margin: 3px 0px 0px 0px;
}
Tak oto uzyskujemy budowy stron na DIV-ach. Bardzo dużo można poczytać o nich na forach o w kursach CSS.
Materiał dodany przez użytkownika: maciekt