| Autor | Zpráva | ||
|---|---|---|---|
| Mesiah Profil |
Moderátor Str4wberry: Titulek „stylování HTML5 NAV“ nevystihuje podstatu dotazu. Příště zkus prosím vymyslet lepší. Dobrý den,
prosím Vás mám problém se stylováním elementu NAV v HTML5. Problém je v tom, že když "najedu myší" na položku menu, tak se nezmění na pacenku, ale zůstává šipka. Tento problém je u Chrome a FireFoxu, v IE9 funguje správně. Edit: vyřešeno, problém byl s pseudoelementem :before, bylo nutné jej vynechat a jeho chování nahradit stylovaným divem... :/ header nav { background:#fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fafafa)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(top, #fff, #fafafa); /* Safari 5.1, Chrome 10+ */
background: -moz-linear-gradient(top, #fff, #fafafa); /* Firefox 3.6+ */
background: -ms-linear-gradient(top, #fff, #fafafa); /* IE 10 */
background: -o-linear-gradient(top, #fff, #fafafa); /* Opera 11.10+ */
border-bottom:1px solid #fff;
clear:both;
color:#171717;
font:14px Arial, Helvetica, sans-serif;
height:40px;
margin:0;
padding:0;
position:relative;
width:100%;
}
header nav:before { border-bottom:1px solid #ccc;
content:'';
height: 39px;
position: absolute;
width: 100%;
}
header nav ul { margin:0; padding:0; }
header nav li { list-style:none; float:left; }
header nav a { color:#171717; display:inline-block; line-height:40px; text-decoration:none; padding:0 23px 0 23px; }
header nav a:hover { color:#d7091c; }<nav>
<ul>
<li><a href="home.html">Vyhledávání</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Nápověda</a></li>
</ul>
</nav> |
||
| Str4wberry Profil |
#2 · Zasláno: 27. 8. 2011, 23:29:41 · Upravil/a: Str4wberry
cursor: pointer pro elementy, kde zůstává šipka, nezabralo?Aha, tak jsem se na to podíval a problém je v tom, že header nav:before zakrývá header nav, mělo by stačit vyměnit height za top. Ale použití toho <div>u je lepší řešení, má lepší podporu mezi prohlížeči.
|
||
|
Časová prodleva: 13 let
|
|||
0