Webdesign tutorials / CSS
Jednoduchý CSS-layout s tie?om 2/2
Pridané: 22.6.2005 • Autor: www.artix.sk • Obťiažnosť: stredná
Tutoriál Tento tutoriál je pokra?ovanie tutoriálu Jednoduchý web-layout s tie?om a po?íta s tým, že máte vytvorený obrázok "pozadie.gif" ktorý použijeme ako pozadie.
8. Vytvoríme si kostru webstránky:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Centrovaný layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
</body>
</html>
<html>
<head>
<title>Centrovaný layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
</body>
</html>
9. Medzi tagy <head> a </head> pridáme definície CSS:
<style type="text/css">
body {
background: white; /* farba pozadia stránky */
text-align: center; /* definícia pre IE - vycentrovanie */
margin: 0; /* definícia pre Operu - stránka nebude ma? žiadne okraje */
padding: 0; /* definícia pre Gecko - stránka nebude ma? žiadne okraje */
body {
background: white; /* farba pozadia stránky */
text-align: center; /* definícia pre IE - vycentrovanie */
margin: 0; /* definícia pre Operu - stránka nebude ma? žiadne okraje */
padding: 0; /* definícia pre Gecko - stránka nebude ma? žiadne okraje */
#pozadie {
width: 750px;
margin-left: auto; /* tento div bude vycentrovaný */<br />
margin-right: auto;
background: url("pozadie.gif") repeat-y; /* v dive sa bude vertikálne opakova? obrázok "pozadie.gif" */
}
#frame {
text-align: left;
width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
10. Medzi tagy <body> a </body> vložíme naše dva už nadefinované divy:
<div id="pozadie">
<div id="frame">
text
</div>
</div>
11. Výsledok môže vyzera? nasledovne: http://www.artix.sk/files/webdesign/css/1/index.html
Diskusia
* = povinné položky
V diskusií zatiaľ nie je žiadny príspevok.