Diskuze: Tlačítka v menu

HTML a CSS HTML a CSS Tlačítka v menu American English version English version

Aktivity (1)
Avatar
Tomas633
Člen
Avatar
Tomas633:28.9.2013 7:56

Ahoj, zkouším takovou věc a pořád mi to nejde, potřebuju aby se mi změnila barva v menu po najetí.

nav ul li{
float: right;
font-size: 15px;
padding: 5px;
position: relative;
right: 250px;
bottom: 20px;
margin: 2px 20px 0px 0px;


}
nav a{
text-decoration: none;
color: white;
font-weight: 700;
}
nav ul{
list-style-type: none;
}

nav ul li:hover{
background: #4182F6;
padding: 5px;
color: black;
}

http://prntscr.com/1tx4g6 když jsem najel na domů

<header>
      <p><img src="TR.png" alt="TR" /></p>
            <nav>
               <ul>
                   <li><a href="kontakt.html">Kontakt</a></li>
                   <li><a href="dovednosti.html">Dovednosti</a></li>
                   <li><a href="omne.html">O mně</a></li>
                   <li><a href="index.html">Domů</a></li>

               </ul>
            </nav>
  </header>
 
Odpovědět 28.9.2013 7:56
Avatar
Ondrca
Redaktor
Avatar
Ondrca:28.9.2013 8:45
nav:hover{
background-color:blue;
}
Nahoru Odpovědět 28.9.2013 8:45
Zase jsem o něco chytřejší
Avatar
Tomas633
Člen
Avatar
Tomas633:28.9.2013 12:01

Omlouvám se po najedí barva písma, jsem to nedopsal celé. Mění se mi jen pozadí to je background.

 
Nahoru Odpovědět 28.9.2013 12:01
Avatar
kleofas.hatlapatka:7.10.2013 12:24

nav a:hover{color:y­ellow;}

Musíš si uvědomit, že to co chceš měnit je tag <a> ... Napsal jsem sice řešení, ale je takové nešikovné z toho hlediska, že pokud button bude větší tak se neprojeví přebarvení písma hned, ale až po skutečném přejetí písma.

Obejít se to dá samozřejmě zabalením do <div>, ale jsem nováček a nevím jestli to není moc velká prasečina :)

Nahoru Odpovědět 7.10.2013 12:24
Apeluji na všechny co odpovídají na dotazy, tak pokud je to jen trochu možné dávejte rovnou reálná řešení třeba v htt...
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:7.10.2013 12:34

Správné rozložení mena je

<nav>
 <ul>
  <li><a>polozka 1</a></li>
  <li><a>polozka 2</a></li>
 </ul>
</nav>

změnu (:hover) dáváš vždy na <a>, <a> musíš nastavit display:block, aby vyplnil celou velikost rodiče (možná budeš muset nastavit velikost 100%)

Nahoru Odpovědět 7.10.2013 12:34
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.