Mysleme v HTML
Většina lidí, s kterými jsem se v poslední době setkal a mluvil s nimi o výhodách a nevýhodách CSS layoutu, mi tvrdila, že raději zůstávají u tabulek, protože se jimi dá klasický n-sloupcový layout tvořit lépe.
A právě v tom to je. Velká část lidí, která přešla k CSS zůstala myšlením stále u tabulek. Co tím chci říct? To, že budeme vytvářet design v CSS totiž samo o sobě nestačí. Musíme se také odprostit od starých návyků a začít myslet jinak.
Pokud při navrhování nové prezentace začneme jejím rozdělením na dva sloupce, začali jsme špatně. Pokud jako první věc napíšeme do kódu menu, začali jsme také špatně.
Toto všechno jsou návyky z dob tabulkového layoutu. V CSS máme přece mnohem větší možnosti, nemusíme psát kód v pořadí v jakém ho chceme zobrazit. To je právě jedna z obrovských výhod oproti tabulkám.
Popíšu zde na ukázku jednoduchý kód, který ale umí velké věci. HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<link rel="Stylesheet" type="text/css" href="./styles/style.css" media="screen" />
<title></title>
</head>
<body>
<div id="inner">
<h1>Nadpis</h1>
<p>dulezity obsah</p>
<p>mene dulezity obsah</p>
<ul id="menu">
<li><a href="#">Uvod</a></li>
<li><a href="#">Dalsi</a></li>
<li><a href="#">Odkazy</a></li>
</ul>
<p id="feet">bezvyznamny obsah(paticka)</p>
</div>
</body>
</html>
CSS:
body{
text-align:center;
font:normal 1em Verdana,sans-serif;
}
#inner{
margin:auto;
width:555px;
min-height:500px;
background: #66ccFF;
position:relative;
padding-left:150px;
text-align:justify;
}
ul#menu{
position:absolute;
top:50px;
left:10px;
padding:10px;
margin:0px;
background:#ffff99;
border:1px solid #f90;
}
ul#menu li{
list-style-type:none;
padding:0px;
margin:5px 0px 0px 0px;
}
#feet{
position:absolute;
bottom:10px;
height:20px;
padding:0px;
margin:0px;
}
a:hover{
text-decoration:none;
}
Proto bychom při tvorbě webu měli nejdříve napsat kostru HTML kódu, která bude vytvářet logickou strukturu, a až poté začít tvořit design.
Pokud se budeme držet tohoto postupu, budou naše stránky přístupné i bez stylů, vyhledávače naše stránky lépe ohodnotí a budeme mít zákládní SEO webu z krku.
Jak tedy tvořit? Pište tak, aby v dokumentu byl nejblíže tagu body nadpis a následoval hlavní obsah. Poté můžete napsat menu, nebo méně důležitý obsah, jako je třeba reklama apod.
Vždy si zkuste prohlédnout web bez stylů, abyste viděli zda-li máte správnou strukturu.
Sloupcový layout Pokud se nevyhnete tvorbě sloupcového layoutu, nezoufejte, i to se dá udělat čistě bez tabulek.
Vytvořte si obrázek(gif) široký přes celý váš obsah a vysoký do 10px. Tzn. aby zahrnoval všechny sloupce ale nezahrnoval nevyužité místo po stranách. Nabarvěte ho stejně jako chcete mit layout. Příklad takového obrázku je ZDE Tento obrázek pak nechte pomocí CSS opakovat na pozadí obsahu stránky(repeat-y) A je to! máte sloupcový layout se stejnou délkou sloupců! Teď už stačí jen absolutním pozicováním přesunout do sloupců nějaký obsah....
zkrácená ukázka kódu:
<html>
<head>
<style>
#inner{
margin:auto;
width:700px;
min-height:300px;
background: url("http://www.nosd.cz/pictures/bg.gif") repeat-y;
padding-left:150px;
position:relative;
}
#menu{
position:absolute;
top:30px;
left:0px;
}
</style>
</head>
<body>
<div id="inner">
<h1>Nadpis</h1>
<p>Text.......</p>
<ul id="menu">
<li><a href="#">Odklaz</a></li>
</ul>
</div>
Kód je jen na ukázku. tak mě za něj neukamenujte:-)
tabulky sa dnes hodia len na vypis velkych tabulkovych hodnot.. inak su uplne zbytocne... preto sa to vola tabulky :-D takze tabulkove hodnoty.... pri tabulkach treba cakat kym sa vsetko nenacita, az potom sa obsah tabulky zobrazi zato u beztabulkoveho sa zobrazi najprv text a potom sa za behu nacitavaju pozadia