logoNewsPhotoshopFlashwebdesignlogo

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>

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 */

#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


 Meno: *  
 Email:  
 WWW stránky:  

Text príspevku: *




Do nasledujúceho políčka opíšte číslo z obrázka:*



* = povinné položky



V diskusií zatiaľ nie je žiadny príspevok.




(c) 2005-2018 ARTIX DESIGN | RSS | Nastaviť ako domovskú stránku, lacné web stránky, cPanel Web Hosting
.