Autor | Zpráva | ||
---|---|---|---|
Petr Dvořák Profil |
#1 · Zasláno: 29. 9. 2014, 13:38:33
Zdravím, zajímalo by mě proč mi nefunguje v navigaci hover{background-color:black;}. Předem vám děkuji za odpověď.
HTML: < <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <link href="styl.css" rel="stylesheet" type="text/css"/> <title></title> </head> <body> <div id="obdelnik"> <div id="hlavicka"> </div> <div id="navigace"> <div id="lista"><a href= "#">AHOJ</a></div> <div id="lista1"><a href= "#">AHOJ</a></div> <div id="lista2"><a href= "#">AHOJ</a></div> <div id="lista3"><a href= "#">AHOJ</a></div> <div id="lista4"><a href= "#">AHOJ</a></div> </div> </div> </body> </html CSS: body { background-image:URL("skolka2.jpg"); background-repeat:repeat-y; background-attachment: scroll; background-position: center; } #obdelnik { width: 1000px; height: 1250px; background: white; border: 10px solid whhite; margin-left: auto; margin-right: auto; filter: alpha(opacity=50); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } #hlavicka { width: 1000px; height: 300px; background-image: url("hlavicka.gif"); background-repeat: no-repeat; background-position: 50px; filter: alpha(opacity=50); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; } #navigace a {text-decoration:none;} a:hover{color: black;} .lista:hover{background-color: black;} #lista { width: 200px; height: 50px; background: #FCFA09; float:left; font-size: 20px; text-align: center; vertical-align: middle; line-height: 50px; font-family: Comic Sans MS; text-decoration: none; } #lista1 { width: 200px; height: 50px; background: #97CA01; float:left; font-size: 20px; text-align: center; vertical-align: middle; line-height: 50px; font-family: Comic Sans MS; } #lista2 { width: 200px; height: 50px; background: #FF0305 ; float:left; font-size: 20px; text-align: center; vertical-align: middle; line-height: 50px; font-family: Comic Sans MS; } #lista3 { width: 200px; height: 50px; background: #FF9C02 ; float:left; font-size: 20px; text-align: center; vertical-align: middle; line-height: 50px; font-family: Comic Sans MS; } #lista4 { width: 200px; height: 50px; background: pink; float:left; font-size: 20px; text-align: center; vertical-align: middle; line-height: 50px; font-family: Comic Sans MS; } |
||
juriad Profil |
#2 · Zasláno: 29. 9. 2014, 13:40:13
Protože žádný element nemá třídu lista. Vše jsou id-ečka.
|
||
Petr Dvořák Profil |
#3 · Zasláno: 29. 9. 2014, 14:32:24
Můžeš mi to prosím nějak víc rozvést? co bych měl v tom kódu udělat?
|
||
Bubák Profil |
#4 · Zasláno: 29. 9. 2014, 14:49:13
Petr Dvořák:
„co bych měl v tom kódu udělat?“ Přiznám se, že mi z tvého kódu jení zřejmé, čeho chceš dosáhnout. Proč #lista nemění barvu pozadí, má (nejmíň) tři důvody, ale myslím si, že tvým přáním není měnit barvu pozadí elementu #lista .
Inspiruj se třeba tady: http://teststranek.kvalitne.cz/menu6/ Nepoužívej zbytečně příliš silné selektory, jako třebas idéčka pro každý odkaz, pokud chceš mít menu zbarvené jako na pouti, vystačíš si s třídami. |
||
Marschmallow Profil |
#5 · Zasláno: 29. 9. 2014, 16:01:07
Petr Dvořák:
Takhle by to mělo fungovat Živá ukázka. Měl jsi tam prohozené div class a div id .
1.) Když máš deklaraci <div id="tohlejediv"></div> , tak v CSS uvádíš #tohlejediv {} .
2.) Když máš deklaraci <div class="tohlejetrida"></div , tak v CSS uvádíš .tohlejediv {} .
U DIVu je v CSS na začátku mřížka "#" (Windows zkratka: CTRL+ALT+X). U CLASSu je v CSS na začátku tečka ".". |
||
Bubák Profil |
#6 · Zasláno: 29. 9. 2014, 16:35:13
Marschmallow:
„Takhle by to mělo fungovat Živá ukázka.“ Klikací plocha je mnohem menší, než plocha, na které dochází k hoveru, to je velmi matoucí. „Windows zkratka: CTRL+ALT+X“ To platí pro levý Alt, já osobně používám pravý Alt + X. Petr Dvořák: Nevím, proč při hoveru nastavuješ odkazům černý text a černé pozadí, něco takového se (nekorektně) označuje jako černoši v tunelu. CSS pro menu jde napsat poněkud přehledněji a úsporněji, koukni na: http://kod.djpw.cz/bagb http://kod.djpw.cz/bagb- |
||
Petr Dvořák Profil |
#7 · Zasláno: 29. 9. 2014, 16:47:44
Už jsem si s tím poradil. Každopádně děkuji za pomoc.
|
||
mimochodec Profil |
#8 · Zasláno: 29. 9. 2014, 16:56:52
Bubák:
Pane Bubák, nepoužívejte prosím v příkladech ten Comic Sans, lidi nám to potom používají na internetech. Děkuji. |
||
Bubák Profil |
#9 · Zasláno: 29. 9. 2014, 17:06:56
mimochodec:
K pouťově zbarvenému menu se Comic Sans hodí ;-) Petr Dvořák: „Už jsem si s tím poradil.“ A jak? |
||
Petr Dvořák Profil |
Zatím si s tím hraju, takže to není konečná fáze. Jedná se o stránky pro mateřskou školku,a protože mají barevné logo a v něm použitý comic sans, proto jsem zachoval tento styl :-)
HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <link href="styl.css" rel="stylesheet" type="text/css"/> <title></title> </head> <body> <div id="obdelnik"> <div id="hlavicka"> </div> <div id="lista"> <div class="menuItem1"><a href="#"><b>AHOJ</b></a></div> <div class="menuItem2"><a href="#"><b>AHOJ</b></a></div> <div class="menuItem3"><a href="#"><b>AHOJ</b></a></div> <div class="menuItem4"><a href="#"><b>AHOJ</b></a></div> <div class="menuItem5"><a href="#"><b>AHOJ</b></a></div> </div> </div> </body> </html> CSS: body { background-image:URL("skolka2.jpg"); background-repeat:repeat-y; background-attachment: scroll; background-position: center; } #obdelnik { width: 1004px; height: 1250px; background: white; border: 10px solid whhite; margin-left: auto; margin-right: auto; filter: alpha(opacity=50); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } #hlavicka { width: 1005px; height: 300px; background-image: url("hlavicka.gif"); background-repeat: no-repeat; background-position: 50px; filter: alpha(opacity=50); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; border-bottom: 3px solid; } #lista { width: 1004px; height: 50px; background: white; float:left; font-size: 20px; text-align: center; vertical-align: middle; line-height: 50px; font-family: Comic Sans MS; } .menuItem1{border-right: 1px solid; width:200px;height:50px; float: left;} .menuItem1:hover{background-color: #FCFA09;} .menuItem2{border-right: 1px solid;width:200px;height:50px; float: left;} .menuItem2:hover{background-color: #97CA01;} .menuItem3{border-right: 1px solid;width:200px;height:50px; float: left;} .menuItem3:hover{background-color: #FF0305;} .menuItem4{border-right: 1px solid;width:200px;height:50px; float: left;} .menuItem4:hover{background-color: #FF9C02;} .menuItem5{width:200px;height:50px; float: left;} .menuItem5:hover{background-color:pink;} a {text-decoration: none;} #lista a {color: black;} |
||
Časová prodleva: 10 let
|
0