CSS jsou v "main.css" a "text.css". Styly textů jsou ve vlastním souboru protože je načítá i systém ve WYSIWYG editoru.
U tohoto příkladu máme menu řešené pomocí tabulky pro potřebnou dynamickou šířku. Ostatní je ve vrstvách.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="text.css" type="text/css">
</head>
<body>
<div id="header"><div>www stránky</div></div>
<div id="menu"><table cellspacing="0" cellpadding="0"><tr>
<td class="h"> </td><td class="t"><a href="">Menu</a></td><td class="e"> </td>
<td class="h"> </td><td class="t"><a href="">Menu</a></td><td class="e"> </td>
<td class="h"> </td><td class="t"><a href="">Menu</a></td><td class="e"> </td>
<td class="h"> </td><td class="t"><a href="">Menu</a></td><td class="e"> </td>
<td class="h"> </td><td class="t"><a href="">Menu</a></td><td class="e"> </td>
</tr></table></div>
<div id="body">
<div id="lcol">
<div class="boxheader">Nadpis</div>
<div class="boxtext"><p>Text</p></div>
</div>
<div id="rcol">
<h1>Nadpis</h1>
<div class="ibox"><p>Text</p></div>
<div class="iboxend"></div>
</div><div class="break"></div>
</div>
<div id="footer">Vytvořil: 2006 © <a href="http://www.smartware.cz" target="_blank">Smartware s.r.o.</a>, <a href="http://www.multicms.net/redakcni_system.html" title="Tyto stránky pomáhá vytvářet MultiCMS" target="_parent">Redakční systém <img src="img/powered-by-multicms.gif" border="0" alt=""></a></div>
</body>
</html>
Následuje výpis "main.css". Na konci CSS je definován vzhled šablony při tisku. Je vypnuto zobrazení hlavičky, patičky, menu a boxů.
body {
margin: 0px;
padding: 0px;
text-align: center;
background-color: #FFFFFF;
background-image: url(img/bck.jpg);
background-repeat: repeat-x;
}
#header {
width: 1003px;
height: 260px;
margin: 0px auto 0px auto;
background-image: url(img/header.jpg);
background-repeat: no-repeat;
text-align: left;
}
#header div {
color: #44621A;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding-top: 92px;
padding-left: 360px;
}
#menu {
width: 1003px;
height: 34px;
margin: 0px auto 0px auto;
background-image: url(img/fill.gif);
background-repeat: repeat-y;
text-align: center;
}
#body {
width: 979px;
_width: 1003px;
margin: 0px auto 0px auto;
background-image: url(img/fill.gif);
background-repeat: repeat-y;
padding-left: 12px;
padding-right: 12px;
}
#footer {
clear: both;
width: 1003px;
height: 26px;
margin: 0px auto 0px auto;
background-image: url(img/bottom.jpg);
background-repeat: no-repeat;
text-align: center;
font-family: Verdana;
font-size: 10px;
color: #AAAAAA;
}
#footer a {
text-decoration: none;
color: #AAAAAA;
}
#lcol {
float: left;
width: 218px;
text-align: left;
}
#rcol {
float: right;
width: 758px;
text-align: center;
}
div.boxheader {
width: 189px;
_width: 218px;
padding-left: 29px;
height: 21px;
_height: 28px;
padding-top: 7px;
background-image: url(img/boxh.jpg);
background-repeat: no-repeat;
font-family: Arial;
font-size: 13px;
font-weight: bold;
}
div.boxtext {
width: 218px;
}
p {
margin: 0px;
padding-bottom: 6px;
}
h1 {
width: 726px;
_width: 758px;
padding-left: 32px;
height: 22px;
_height: 29px;
padding-top: 7px;
background-image: url(img/iheader.jpg);
background-repeat: no-repeat;
text-align: left;
margin: 0px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
}
div.ibox {
width: 744px;
_width: 756px;
margin: 0px auto 0px auto;
padding-left: 4px;
padding-right: 4px;
text-align: left;
border-left: 2px solid #7E7E7F;
border-right: 2px solid #7E7E7F;
}
div.iboxend {
width: 758px;
height: 9px;
background-image: url(img/iend.jpg);
background-repeat: no-repeat;
}
#menu table {
margin: 0px auto 0px auto;
width: 980px;
border: 0px;
}
#menu td.h {
width: 33px;
height: 26px;
background-image: url(img/btnh.jpg);
background-repeat: no-repeat;
}
#menu td.t {
height: 26px;
background-image: url(img/btnf.jpg);
background-repeat: repeat-x;
}
#menu td.e {
width: 8px;
height: 26px;
background-image: url(img/btne.jpg);
background-repeat: no-repeat;
}
#menu td.t a {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
#menu td.t a:hover {
color: #000000;
text-decoration: none;
}
.break {
clear: both;
height: 1px;
font-size: 1px;
}
* html .break {
d\isplay:none;
}
@media print {
#header, #menu, #lbox, #footer {
display: none;
}
#body {
float: none;
width: 100%;
}
}
V další části si ukážeme, co s takto připravenou šablonou dál. | 
Všechny diskuze
Zpět