Tipy a triky pro tvorbu stránek.
- CSS zvlášť pro MSIE a ostatní prohlížeče
- Odstránkování
- Pozadí s opakováním
- Odkaz Více
- Ikonka webu - favicon
- Přesměrování stránky
CSS zvlášť pro MSIE a ostatní prohlížeče
Tato finta vám ušetří mnoho času a problémů s laděním stránek pro Microsoft Internet Explorer. Problémy s nekompatibilitou zpracování kaskádových stylů vyřešíte tím, že vytvoříte dva CSS soubory - jeden základní pro všechny prohlížeče a druhý doplňkový, výhradně pro MSIE. Můžete tak snadno dosáhnout shodného zobrazení stránek ve všech prohlížečích.
Toto řešení publikoval Pavel Růžička. Bližší popis najdete v článku Podmíněné komentáře v Internet Exploreru.
XHTML
<head>
<link rel="stylesheet" type="text/css" media="all" href="css.css"/>
<!--[if IE ]>
<link rel="stylesheet" type="text/css" media="all" href="./cssproIE.css" />
<![endif]-->
</head>
<body>
</body>
</html>
Odstránkování
Navigace ve formě odkazování na další stránky. Lze ji vidět predevším u internetových obchodů, katalogů a vyhledávačů, jestliže se obsah nevejde na jednu stránku a je jej třeba rozdělit na stránky další.
Toto řešení publikoval Ian Main. Bližší popis v angličtině najdete v článku CSS Pagination Links.
CSS
{
padding: 2px;
}
.odstrankovani ul
{
margin: 0;
padding: 0;
text-align: left;
font-size: 16px;
}
.odstrankovani li
{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
.odstrankovani a, .odstrankovani a:visited
{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.odstrankovani a:hover, .odstrankovani a:active
{
border: 1px solid #2b66a5;
color: #000;
background-color: lightyellow;
}
.odstrankovani li.aktualni-stranka
{
font-weight: bold;
padding: 0 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}
.odstrankovani li.zruseny-odkaz
{
padding: 0 5px;
border: 1px solid #929292;
color: #929292;
}
.odstrankovani li.dalsi-stranka
{
font-weight: bold;
}
* html .odstrankovani li.aktualni-stranka, * html .odstrankovani li.zruseny-odkaz
{
margin-right: 5px;
padding-right: 0;
}
XHTML
<body>
<div class="odstrankovani">
<ul>
<li class="zruseny-odkaz">< Předchozí</li>
<li class="aktualni-stranka">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="dalsi-stranka"><a href="#">Další ></a></li>
</ul>
</div>
</body>
</html>
Pozadí s opakováním
Toto řešení ukazuje, jak lze pomocí velice malého obrázku vytvořit působivé a efektivní pozadí celé stránky nebo třeba jen určité její části. Využívá se zde opakování obrázku na pozadí.
Toto řešení publikovala Petra Větrovská. Bližší popis najdete v článku Background-repeat.
CSS
{
background: url("pozadi.gif") top left repeat-x;
background-color: #fff;
margin: 0;
padding: 0;
}
#obal
{
margin: 20px 15%;
padding: 1em;
color: #000;
background: #3296f4 none;
}
XHTML
<body>
<div id="obal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc imperdiet magna
</div>
</body>
</html>
Odkaz Více
Toto řešení ukazuje, jak pomocí CSS vytvořit populární odkaz "více" nebo "více zde", který po kliknutí zobrazí pokračování započatého textu ve zvětšeném objektu. Při opětovném kliknutí jinam zase tento text elegantně zmizí.
Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku SHOW ME SOME MORE....
CSS
font-size: 76%;
}
.tucne {
font-weight:bold;
}
.holder {
width:210px;
margin:5px;
padding:1em;
border:1px solid #ddd;
float:left;
}
.holder h2 {
color: navy;
text-align:center;
letter-spacing:0.2em;
font-variant: small-caps;
}
a.skryty {
color:#000;
text-decoration:none;
outline-style:none;
}
a.skryty em {
display:none;
}
a.skryty:hover {
text-decoration:none;
}
a.skryty:active, a.skryty:focus {
background:#fff;
}
a.skryty:active span, a.skryty:focus span {
display:none;
}
a.skryty:active em, a.skryty:focus em {
display:block;
color:#000;
width:100%;
font-style:normal;
cursor:default;
}
.clear {
clear:both;
}
XHTML
<body>
<div class="holder">
<h2>Lorem ipsum</h2>
<p class="tucne">DOLOR SIT AMET</p>
<p>Nunc tincidunt varius felis.<br />
Etiam id lectus sed justo posuere lacinia. <br />
Etiam odio mi, elementum vitae,<br />
porta non lacus. Praesent vestibulum. </p>
<p><a class="skryty" href="#more"><span>více </span>
<em>Cum sociis natoque et magnis,<br />
nascetur ridiculus mus. Fusce ac ante.<br />
Donec pretium nunc sollicitudin velit. <br />
Integer ac lorem. Vestibulum in odio.<br />
Ut metus. Maecenas vestibulum metus.<br />
Mauris sit amet felis. Ut dui.<br />
Donec lacinia in enim. Integer ut orci.<br />
Maecenas ac augue. Nullam semper justo.<br /><br />
Morbi blandit rhoncus ante. Donec lectus.<br />
Ut condimentum. Quisque tempus porta,<br />
lorem volutpat purus, non venenatis velit.<br />
In est sapien, ultrices in, condimentum,<br />
vestibulum vitae, odio. Nullam sodalesn.<br /></em></a></p>
</div>
</body>
</html>
Ikonka webu - favicon
Ikonka webu - favicon se zobrazuje jako obrázek vedle URL adresy v adresním řádku, nebo v oblíbených položkách prohlížeče.
Jak ikonku vyrobit?
Ikonka je vpodstatě normální obrázek s příponou .ico. Velikost je obvykle 16 × 16 pixelů. Stačí tedy vytvořit jakýkoliv obrázek, který chcete mít jako ikonku o této velikosti a uložit s příponou ico. Pokud nemáte grafický editor s podporou takového formátu, stačí uložit obrázek jako .GIF a pak jej přejmenovat se správnou příponou.
Při velikosti 16 x 16 pixelů, to opravdu nemusí být žádné mistrovské dílo, spíš naopak, co nejjednodušší ale výstižný obrázek.
Pokud si na to netroufáte sami, existuje mnoho stránek kde si můžete nechat ikonku vyrobit z nějakého vašeho obrázku.
např. FavIcon from Pics
Kam ikonku uložit?
Je jedno jak ikonku nazvete a kam ji uložíte, musíte k ní jen zadat správnou cestu. Pokud ale ikonku nazvete favicon.ico a uložíte ji přímo do rootu webu, tzn. aby byla na adrese www.vasweb.cz/favicon.ico, nemusíte k ikonce vůbec cestu určovat, prohlížeč si ji najde sám - ikonka se tak zobrazuje na jakékoliv URL adrese na vaší doméně, tedy i na chybových stránkách apod.
Vložení ikonky do stránky
Odkaz na ikonku se vkládá podobně jako externí styly či skripty - do hlavičky stránky, tagem:
<link rel="shortcut icon" href="favicon.ico" "type="favicon.ico"/>
Přesměrování stránky
Přesměrování stránky meta tagem.
Nejoblíbenější způsob, protože se nemusí skriptovat a dá se vložit rovnou do staré stránky:
Číslo 4 vyjadřuje počet sekund, po kolika se udělá přesměrování. Adresa url na přesměrování může být i relativní:
Stará stránka s meta tagem by neměla být prázdná.
Kromě textu, který ujistí čtenáře, že je na správné cestě, by měla obsahovat odkaz na novou url.
Může se totiž stát, že uživatel bude mít možnost meta refresh zakázanou
(v Internet Exploreru je to na kartě Zabezpečení > Vlastní úroveň),
třebaže to je řídký jev.
Odkaz se bude také výborně hodit vyhledávačům a uživatelům alternativních browserů.
