Tu ležala reklama.

21. Apríl 2008 15:30 0 komentárov

Okrúhle rohy

Ako spraviť okrúhle rohy pre všetky prehliadače? Pre Mozillu to ide pomocou -moz-border-radius ľahko, ale pre iné prehliadače je treba spraviť niečo iné. Sú dve možnosti ako spraviť okrúhle rohy. Jedno je s použitím obrázkov a druhé bez použitia obrázkov. No my to spravíme ten jednoduchší spôsob s použitím obrázkov.

Čo budeme potrebovať je ako taká znalosť CSS a xHTML. Na začiatok si vytvoríme štyri obrázky(rohy) s rozmermi napr.: 20 x 20 pix.

Rohy

Keď máme rohy môžeme sa pustiť do layoutu. Layout bude pozostávať z siedmich divov. Dalo by sa to spraviť aj jednoduchšie, ale pre rýchlejšie načítavanie obrázkov aj samotnej stránky je to takto lepšie. Pre lepšie pochopenie rozmiestnenia divou som načrtol jednoduchý layout:

Layout

Oranžovou farbou sú naznačené rohy. Zelenou farbou sú naznačené divy medzi rohmi tie to diely sa dajú využiť ako nadpis stránky a pätička. A šedou farbou je vyznačení obsah stránky.

No a teraz samotný kód. Ako prvé si vytvoríme obaloví div s názvom napr.: "container" so šírkou napr.: 100px.

 

#container {
margin: 10px auto; /*vycentrovanie pre mozillu, operu, safari a netescape*/  
width: 100px; /*pevná šírka*/
height: 100px; /*pevná výška*/
text-align: left;
}

Obal máme a teraz ide ta najprácnejšia časť a to rohy. Pre každý roh je treba spraviť vlastný div. V každom dive/rohu je treba zadať výšku, šírku, zarovnanie(float) a pozadie(cestu k danému rohu).

#l-d{
height: 20px;
width: 20px;
float: left;
background: url('roh-l-d.gif') no-repeat;
}
#l-h
{
height: 20px;
width: 20px;
float: left;
background: url('roh-l-h.gif') no-repeat;
}
#p-d{
height: 20px;
width: 20px;
float: right;
background: url('roh-p-d.gif') no-repeat;
}
#p-h{
height: 20px;
width: 20px;
float: right;
background: url('roh-p-h.gif') no-repeat;
}

Rohy by sme mali. Pri tvorbe zložitejšie layoutu s viacerými boxmi s okrúhlymi rohmi je lepšie použiť triedu ako id kvôli valide kódu. Ďalšou časťou sú časti medzi rohmi(divy nafarbené na šedo). Tu som zvolil triedu namiesto id lebo sa bude opakovať hore aj dolu. Ako som už spomínal že tieto časti sa dajú využiť hore na nadpis a dole na tzv. pätičku.

.h-d{
width: 60px;
height: 20px;
background: green;
float: left;
}

No a posledné čo je potrebné spraviť je miesto pre obsah. Túto časť si môžete aj viacej rozčleniť, ale nám to takto postačí.

#telo{
width: 100px;
height: 80px;
background: rgb(85,85,85);
float: left;
}

Tak toto by bol celí CSS kód. Nie je moc zložitý. Teraz, ale treba ho nakódovať aj v xHTML. Celý xHTML kód vyzerá takto:

<div id="container">
<div id="l-h"></div>
<div class="h-d">
<b>Nadpis</b>
</div>
<div id="p-h">
</div>
<div id="telo">
Text stránky.
<br>text text text text text text text text</div>
<div id="l-d"></div>
<div class="h-d">by kletely</div>
<div id="p-d"></div>
</div>

Použiteľnosť: Mozilla Fiefox, Opera, Internet Explorer(5-7), Safari a Netescape. No a to je na záver asi všetko. Celý kód.

Tagy: css, layout, dizajn
Kategórie: Dizajn, Tvorba webu
Autor: kletely

Podobné články:
Pridaj na TopČlánky Pridaj na Linkuj Pridaj na Vybrali.SME.sk Pridaj na Jagg Pridaj na Delicious Pridaj na Twitter

Tu ležala reklama.

0 komentárov ku článku „Okrúhle rohy

(povinné)

(povinné, ale nezorbrazi sa)



(povinné)

(Zakázené)

Môžete používať tieto tagy:

<i> <em> <b> <strong> <a> <u> <img>

Prosím píšte s diakritikov a zrozumitelne! Blog podporuje Gravatar!

Kontakt

Vytvoril kletely v roku 2008 - 2021 všetky práva vyhradené.


Stránka beží na vlastno ručne napísanom redakčnom systéme Frup.