Autor Zpráva
Haňulík
Profil
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
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
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
Haňulík:
Rozhodně se to dá obalit uvnitř spanem. Vyzkoušej nejdříve to.
Haňulík
Profil
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
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
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
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
Použij pro span class, ne style. V CSS nastav odkaz obecně zelený a pro "a span" červený.
Bubák
Profil
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;
}
Nevím, jaké barvy tam chceš, tak si to uprav. Sice to jde napsat jako hover spanu, ale já jsem zvyklý psát hover coby hover odkazu ještě z dob IE6, což byly časy, kdy hover v majoritním prohlížeči fungoval jen pro odkazy.
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
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: