Dnes trochu prakticky - nějakou dobu se snažím vymyslet nějaký jednoduchý, funkční a kompatibilní způsob, jak vytvořit obrázkový hover efekt v CSS. Jeden hezký návod jsem našel zde, ovšem cosi mi na něm vadilo, tak ho malinko rozšířím a poupravím, takže teď si návod přečtěte, ať tak nějak víte. Budete to potřebovat k dalšímu postupu. Opravdu. A jak říkají mí američtí bratři: for real!
Opravdu si to přečtěte.
Nejprve si upravíme HTML kód do modernější varianty, a upravíme popisky na tlačítkách (jinak nejsou moc kúl), tedy použijeme moderní seznamy (<ul> <li>) a výběr popisků nechám na vás. HTML kód zde:
<ul id="menu">
<li><a href="#">První věc</a></li>
<li><a href="#">Super věc</a></li>
<li><a href="#">Přjíemná věc</a></li>
<li><a href="#">Nechtěl bych</a></li>
<li><a href="#">Atakdále</a></li>
</ul>
Hlavní nedostatek v originálním návodu pro mě představuje nemožnost výstavby horizontálního menu. Proto tedy již od začátku tvořím menu právě horizontální.
Protože bez CSS kódu by to jaksi nebylo ono, přikládám jej zde též. Podrobněji popíši níže.
#menu li {
list-style-type: none;
padding: 0; margin: 0;
float: left;
}
#menu a {
display: block;
width:108px;
margin: 0;
padding:18px 0 22px 5px;
font-size: 12px;
color: white;
background: url("button.png") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover {
background-position: -113px 0;
}
Hover funguje na principu posouvání jednoho obrázku, tedy jeden obrázek obsahuje rovnou oba stavy a má dvojnásobnou šířku. Toto opatření je zde hlavně kvůli rychlosti načítání, kompatibilitě a v extrémních případech i rychlosti prohlížeče (posunout obrázek je méně náročné, než jej vyměnit).
Nyní k CSS: Protože máme seznam, který chceme uspořádat vedle sebe, hned po odstranění nežádoucích prvků seznamu uvedeme vlastnost float: left;. V definici #menu a musíme nastavit display: block;. Ani moc nevím proč, ale bez toho to moc nefunguje. Nejspíš to bude něco s šířkou elementu =). Dále odkazu musíme nastavit fixní šířku, a samozřejmě pozadí (nezapomeňte na posunutí pozadí - 0 0 no-repeat;). Dále je na vás volba fontu, barvy atd.
V dalším kroku (stav :hover) je potřeba jen nastavit posunutí pozadí o určitý počet pixelů - background-position: -113px 0;.
Že je to jednoduché?
Tento způsob je zaměřen hlavně na jednoduchost, praktičnost, a hlavně kompatibilitu (bez potřeby JavaScriptu v IE). Kód je krátký a přehledný a doufám, že někomu pomohl. Dříve jsem se s takovým kódem trápil pěkně dlouho a bezúspěšně. Dnes jsem si řekl, že bych už na to měl přijít. No a přišel =).
5. 11. 2007
V kategorii Webdesign
Nikdo nekomentoval »
Titulek tohohle spotu není úplně přesný, nýbrž přesně napůl. Vlastně úplně stejně, jak vypadá interface nového iPodu Classic, tedy menu vejpůl. Ovšem nadpis je taky trochu napůl, neb přímo firmware z iPodu Classic na 5G (Video) nedostanete. Co jsem tím vlastně myslel?
Určitě jste viděli ty hezounké, nové iPody s tím rozděleným meníčkem a tak hezkými fíčurkami. Protože na nového iPoda nemáme, dopomůžeme si lehkým flashnutím firmwaru, čímž se tak trochu dopouštíme porušení smlouvy, kterou nám napsal Steve Jobs, a to té části, kde se zavazujeme nedělat žádné zásahy do oficiálního firmwaru. No co, když si nainstalujete jiného ICQ klienta, než právě ICQ (může to být klidně webová služba), porušujete smlouvu stejným způsobem. Já vás varoval.
Celý článek »
19. 10. 2007
V kategorii Hračky
Komentáře (13) »
Nakolik jsou Američani blbí, aby si museli dávat příklad, jak vypadá jméno při vyplňování formuláře? A nakolik jsme blbí my, když jméno v příkladu opíšeme a počeštíme tak, že by to nepochopila ani jedna z mých babiček?
Narážím na vyplňování formuláře pro nový e-mailový účet v Microsoft Office Outlooku 2007, kde v originální verzi bylo zřejmě napsáno „Barbara Sankowich.“
Kdo je tedy ten blbější? Američani, nebo my? Odpověď hledejte mezi dvěma bagry. A mimochodem, zkuste zadat do prohlížeče www.contoso.com :-).
13. 10. 2007
V kategorii Psaníčka
Nikdo nekomentoval »
Update: Díky moc za radu Bedneemu. Vše již funguje bezchybně.
Jednou si takhle kóduji šablonu mého postranního webového projektu - Little Offroaders. Vše probíhá v čistotě a kompatibilitě, jenže když jsem se pokusil web otevřít v IE…
V životě jsem nic takového neviděl - Internet Explorer se rozhodl nezobrazovat styly. Stejný problém obsahuje jak IE6, tak i novější sedmička.
Původně jsem web rozdělil do dvou CSS (jeden pro IE) kvůli neohrabanémů paddingu a marginu právě v Internet Exploreru, což za normálních okolností nedělá problém, ale již předtím to nefungovalo. Nyní jsem udělal jeden univerzální styl a chyba tu je stále. Nejspíš to bude integrovaným knedlíkem v IE, který se instaluje tak trochu omylem do každého počítače.
Pokud je chyba na mém přijímači (což si nemyslím), tak to nechápu ani trochu. Ono ani jinak bych to nepochopil. Pokud máte aspoň nejmenší tušení, proč mi IE odmítl interpretovat CSS, popřípadě nápad na řešení, budu moc vděčný za komentář.
10. 10. 2007
V kategorii Webdesign
Komentáře (5) »
Jak myslíte, že vznikl český (československý) hiphop? Byli to PSH? Nebo WWW? No ani ne…
Je celkem jasné, že hiphopová kultura se do čech dostala přes fenomén grafitti. Ovšem našel se někdo, kdo o grafitti rapoval, ale s hiphopovou a grafitti scénou neměl nic společného a neměl ani potuchy o tom, do jakého žánru se řadí její píseň. Hiphop, jaký známe dnes nám poprvé představila dvanáctiletá holka.
Byla to Michaela Paštéková v roce 1994, kdy nevědomky vydala jednu z prvních hiphopových skladeb na Slovensku s názvem Sprayer Frayer. No nevím, jak vám, ale mě to připadá jako neuvěřitelná shoda náhod. No neříkejte - v době, kdy u nás začínal hiphop a grafitti vydat rapovou skladbu, která pojednává právě o grafitti a nevědět o tom, navíc být 12letá holčina se skvělou flow… Neuvěřitelné!
Protože byl k písničce natočen (opět nevědomky) stylový “neighborhood ghetto” videoklip z prostředí potagovaného sídliště, poskytuji ho zde taktéž.
Mimochodem, kromě této písně jsem nenašel žádné žánrově podobné skladby, i když v některých klipech jsou vidět jakési náznaky čehosi, ovšem není to ta malá rapující Míša. Později vydala nějakých pár alb, a z hudební scény tak nějak zmizela. Myslím, že by nebylo úplně od věci pozvat jí na featuring s nějakou dnešní hiphopovou skupinou… Ale teď už k tomu videoklipu:
Celý článek »
8. 10. 2007
V kategorii Psaníčka
Komentář (1) »