| Autor | Zpráva | ||
|---|---|---|---|
| surovka Profil |
#1 · Zasláno: 7. 10. 2012, 22:23:11
Ahoj, prosím jak udělám horním menu (CSS) měnící se při najetí myši z ikony na text? Aby se běžně zobrazovala ikona (obrázek obálky) a až na ní najedu myší, tak tam bude místo obálky text kontakt.
Prosím poraďte, jsem laik :-) |
||
| margin Profil * |
#2 · Zasláno: 7. 10. 2012, 23:15:33
Třeba takto:
<style>
a {
display: block;
width: 131px;
height: 98px;
overflow: hidden;
background: #395;
}
a:hover {
background: #447;
color: #def;
text-align: center;
font: bold 18px/98px sans-serif;
}
img {
border: none;
}
a:hover img {
display: none;
}
</style>
<a href=" Jak psát web">
<img src="Odkaz" width="131" height="98" alt="">
www.jpw.cz</a>Jde upravit podle potřeb, třebas hrátkami s marginem, paddindem, borderem... |
||
| Trejpa Profil |
#3 · Zasláno: 7. 10. 2012, 23:16:34
surovka:
#kontakt { background: url(obalka.gif) center no-repeat; }
#kontakt span { visibility: hidden; }
#kontakt:hover { background: none; }
#kontakt:hover span { visibility: visible; }<a href="#" id=kontakt><span>kontakt</span></a> |
||
|
Časová prodleva: 8 dní
|
|||
| surovka Profil |
#4 · Zasláno: 15. 10. 2012, 23:08:35
A když bych to chtěla udělat s obrázky? aby se mi přepínaly mezi sebou po najetímyší, ale aby to zároveň fungovalo jako tlačítko? To udělám jak?
|
||
| margin Profil * |
#5 · Zasláno: 15. 10. 2012, 23:41:37
surovka:
„aby se mi přepínaly mezi sebou po najetímyší“ Nestačilo by, kdyby se obrázek měnil při najetí jedné myši? Třeba takto: http://teststranek.kvalitne.cz/menu6/ http://teststranek.kvalitne.cz/menu7.1/ http://teststranek.kvalitne.cz/menu7.2/ |
||
| Trejpa Profil |
#6 · Zasláno: 15. 10. 2012, 23:43:25
surovka:
A pokud tam ten text být vůbec zobrazen nemá: <a href="#odkaz-na-kontakt"><img src=obalka.gif alt="kontakt" width=64 height=48 border=0 onMouseOver="this.src='obalka-pod-mysi.gif';" onMouseOut="this.src='obalka.gif';"></a> |
||
| jenikkozak Profil |
#7 · Zasláno: 15. 10. 2012, 23:47:40
surovka:
Využiješ pseudotřídu hover, jak ti radili kluci výše. Obrázek na pozadí se nastavuje pomocí background-image. U této pseudotřídy se dá buď obrázek změnit, nebo se dá změnit jeho pozice. margin: „Nestačilo by, kdyby se obrázek měnil při najetí jedné myši?“ Třeba je to sedmý pád. ;) |
||
| surovka Profil |
#8 · Zasláno: 15. 10. 2012, 23:57:14
jenikkozak:
b]margin[/b]:Jasně, že nám jenom jednu myš :-) Díky |
||
|
Časová prodleva: 6 dní
|
|||
| surovka Profil |
#9 · Zasláno: 21. 10. 2012, 13:29:51
Tak jsem se to snažila nějak sesmolit. A nevíte proč mi nefungují tak jak by měly první dvě ikony v horním menu? A proč je to tak rozházené a nezarovnané? www.surovka.cz
PS:Mějte se mnou prosím trpělivost :-) |
||
| Trejpa Profil |
surovka:
Ty v HTML hodně plaveš, že? Element UL neslouží k tomu, aby v něm byly bloky DIV. Pominu to divné zanořovaní divů, seznamů bez položek, divů, seznamů bez položek, divů… Proč je každý obrázek v odstavci? (Víš, k čemu slouží odstavec?) Proč mají obrázky pod myší jiný rozměr? Proč rozměry neuvádíš a necháváš stránku během načítání poskakovat? Proč nevyplňuješ alty u obrázků - aby vyhledávače ani lidé nepochopili jejich význam? Proč se soubor s kontakty jmenuje index-6.htm a ne třeba kontakty.htm? Sjednoť si velikosti obrázků a zkus to nějak normálně… jednoduše: <div id=menu> <a href=index.htm><img src="images/home.png" onmouseover="this.src='images/home2.png'" onmouseout="this.src='images/home.png'" alt="domů" width=68 height=127></a> <a href=index-2.htm><img src="images/sluzby.png" onmouseover="this.src='images/sluzby2.png'" onmouseout="this.src='images/sluzby.png'" alt="služby" width=68 height=127></a> <a href=index-3.htm><img src="images/kalendar.png" onmouseover="this.src='images/kalendar2.png'" onmouseout="this.src='images/kalendar.png'" alt="kalendář" width=68 height=127></a> <a href=index-4.htm><img src="images/foto.png" onmouseover="this.src='images/foto2.png'" onmouseout="this.src='images/foto.png'" alt="fotografie" width=68 height=127></a> <a href=index-5.htm><img src="images/cenik.png" onmouseover="this.src='images/cenik2.png'" onmouseout="this.src='images/cenik.png'" alt="ceník" width=68 height=127></a> <a href=index-6.htm><img src="images/kontakt.png" onmouseover="this.src='images/kontakt2.png'" onmouseout="this.src='images/kontakt.png'" alt="kontakt" width=68 height=127></a> </div> EDIT: Opraveny překlepy v kódu. Děkuji za upozornění. |
||
| surovka Profil |
#11 · Zasláno: 21. 10. 2012, 19:49:40 · Upravil/a: surovka
Trejpa: plavu a potřebuju to vypilovat..učím se na tom :-(
Trejpa: místo <a href máš <a ref :-) |
||
| Trejpa Profil |
#12 · Zasláno: 21. 10. 2012, 22:49:22
surovka:
Vytvořil jsem komentovaný příklad stránky. I když hlavní myšlenka je vytvoření dvousloupcové struktury, možná tam pochytíš i pár dalších pár principů, třeba že obvykle stačí poměrně jednoduchý a přehledný HTML kód. |
||
|
Časová prodleva: 13 let
|
|||
0