| 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: 10 let
|
|||
0