Autor | Zpráva | ||
---|---|---|---|
Haňulík Profil |
#1 · Zasláno: 13. 4. 2016, 09:13:16
Dobrý den,
potřebovala bych odladit horizontální menu. <!DOCTYPE html> <html> <head> <style> #menu{margin-top:20px} ul { list-style-type: none; margin: 0; padding: 40; overflow: hidden; background-color: white; font-weight:bold; } li { float: left; } li a, .dropbtn { display: inline-block; color: black; text-align: left; padding: 14px 16px; text-decoration: none; min-width:150px; } li a:hover, .dropdown:hover .dropbtn { background-color: #00cccc; color:white; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #00cccc; min-width: 160px; padding-top:80px; position:absolute; top:0px; z-index:-1 ; } .dropdown-content a { color: black; padding: 10px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #00cccc; color:white} .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div id="menu"> <ul> <li class="dropdown"> <a href="#" class="dropbtn">jazykova<br>kurzy</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown"> <a href="#" class="dropbtn">překlady<br>a tlumočení</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown"> <a href="#" class="dropbtn">další<br>vzdělávání</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> </body> </html> Problém je, že v zadání je odkaz dvoubarevný. tj. např. jazykové kurzy budou jazykove (color:red) a kurzy (color:green). Můžete mi poradit, jak toto vyřešit? Pokud tam hodím natvrdo span style k danému řádku ,tak zase nebude fungovat a:hover. A zase rozdělit to na dva styly odkazu, tak mi to nepřijde úplně nejlepší řešení. A moc nevím, jak to vyřešit. Děkuji za rady, nebo nasměrování. |
||
Taurus Profil |
#2 · Zasláno: 13. 4. 2016, 09:39:29
Dva styly není špatné řešení. Může být obecné
a {color: red} a dodatečné a.jiny {color: green} Odkazy v menu netřeba řešit vyjma toho, které má mít odlišnou barvu. To pak bude mít: <a href="" class="jiny">...</a> A je vymalováno. |
||
Haňulík Profil |
#3 · Zasláno: 13. 4. 2016, 09:47:06
Taurus:
No mě ale přijde divné, abych ten jeden odkaz rozdělovala na dva (pro každý řádek jeden), přičemž by to odkazovalo na jeden a ten samý link. Ale asi to bude jediné řešení. |
||
Keeehi Profil |
#4 · Zasláno: 13. 4. 2016, 09:48:42
Haňulík:
Rozhodně se to dá obalit uvnitř spanem. Vyzkoušej nejdříve to. |
||
Haňulík Profil |
#5 · Zasláno: 13. 4. 2016, 09:55:05
Keeehi:
Jako udělat tedy dva styly a v html to potom uzavřít jedním spanem? <span> <a style="prvni"....></a> <a style="druhy"...></a> </span> ? |
||
Keeehi Profil |
#6 · Zasláno: 13. 4. 2016, 10:24:24
Haňulík:
Obráceně. Jeden odkaz, dva spany v něm. Stačil by i jeden ale se dvěma to bude názornější. |
||
Taurus Profil |
#7 · Zasláno: 13. 4. 2016, 10:36:11
Aha, pardon, špatně jsem to pochopil. Jak říká Keeehi, dovnitř odkazu dej span. Pak není třeba tříd, stačí v CSS jen zaměřit.
|
||
Haňulík Profil |
#8 · Zasláno: 13. 4. 2016, 10:37:09
Keeehi:
No já to zkoušela takhle: <li class="dropdown"> <a href="#" class="dropbtn"><span style="color:red">jazykova</span><br><span sytel="color:green">kurzy</span></a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> Jenže pak zase nefunguje a:hover, protože je tam spanem natvrdo daná barva. a:hover má být potom totiž bílé. |
||
Taurus Profil |
#9 · Zasláno: 13. 4. 2016, 10:56:47
Použij pro span class, ne style. V CSS nastav odkaz obecně zelený a pro "a span" červený.
|
||
Bubák Profil |
#10 · Zasláno: 13. 4. 2016, 12:11:07
Taurus:
„Použij pro span class, ne style.“ Obojí je zbytečné, stačí obalit spanem. Haňulík: CSS bych napsal nějak takto: li a span { color: red; } li a:hover span { color: blue; } |
||
Keeehi Profil |
Když použiješ style, tak je to velmi silné pravidlo. Stačí použít ne tak silné zaměření. O síle selektorů.
<a href="#" class="dropbtn"><span class="red">jazykova</span><br><span class="green">kurzy</span></a> .red { color: red; } .green { color: green; } a:hover .red, a:hover .green { color: white; } Nebo alternativně <a href="#" class="dropbtn"><span>jazykova</span><br>kurzy</a> a { color: green; } a span { color: red; } a:hover, a:hover span { color: white; } |
||
Haňulík Profil |
#12 · Zasláno: 13. 4. 2016, 13:29:20
Keeehi:
Děkuji, vyřešeno. Já mám zlovyk psát nejdřív všechno style="...." a pak to přehazovat do jednotného css souboru. |
||
Časová prodleva: 7 let
|
0