Avatar
mkores.mk
Člen
Avatar
mkores.mk:

Ahoj,

potřeboval bych poradit ohledně navigačního menu. Rád bych, aby po najetí na určitou položku v menu se objevil úzký pruh nad ním. Položka .aktivni označuje
aktivní stránku (dělám to podle tutoriálu zde)

https://www.dropbox.com/…emv/web2.jpg

Bohužel vždy, když najedu na jinou položku, tak se úzký pruh zobrazí pouze nad textem a ne nad celým li.

Takto to mám v HTML:

<body>
   <header>
                <a href="index.html"><div id="logo"><h1>TJ Sokol Miličín</h1></div></a>
        <nav>
                <ul>
                <li class="aktivni"><div class="cara"><a href="akt.html">Aktuality</a></div></li>
                <li><div class="cara"><a href="dok.html">Dokumenty</a></div></li>
                <li class="cara"><a href="sport.html">Sport</a></div></li>
</nav>
        </header>

V CSS takto:

nav ul li:hover .cara, .aktivni {
        display:block;
background: #FFF;
box-shadow:0px 0px 5px white;
color: f01d26;
height: 10px;
}

Když teda div vložím do li, zobrazí se pruh pouze nad textem, class="cara" dám do tagu s li, pruh se mi po najetí vůbec nezobrazuje.

Pomůžete mi prosím někdo? :)

 
Odpovědět 30.6.2014 15:43
Avatar
ZdeCH
Člen
Avatar
ZdeCH:

Ahoj je nějaký důvod proč ti nevyhovuje mít to třeba takto?
to funguje i bez divu

.aktivni{
 display:block;
 background: #FFF;
 box-shadow:0px 0px 5px white;
 color: f01d26;
 height: 10px;
 }

nav > ul li:hover{
 display:block;
 background: #FFF;
 box-shadow:0px 0px 5px white;
 color: f01d26;
 height: 10px;
 }
Editováno 30.6.2014 16:44
Nahoru Odpovědět 30.6.2014 16:43
Neřešitelný problém je ten o kterém nevím ...... a taky ona ...
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na mkores.mk
Daniel Vítek:

btw. chybí ti ukončení seznamu (</ul>)

 
Nahoru Odpovědět  +1 30.6.2014 16:57
Avatar
mkores.mk
Člen
Avatar
mkores.mk:

Takto mi při pohybu myší nad odkazem pokaždé čára problikne.

Mám ho tam, jenom chyba při kopírování :)

 
Nahoru Odpovědět 30.6.2014 17:04
Avatar
ZdeCH
Člen
Avatar
Odpovídá na mkores.mk
ZdeCH:

teda zkoušel jsem to s černou čárou na bílém pozadí, ale nic mi neproblikávalo.

Nahoru Odpovědět 30.6.2014 18:03
Neřešitelný problém je ten o kterém nevím ...... a taky ona ...
Avatar
mkores.mk
Člen
Avatar
mkores.mk:

Když jezdíš v textu tak to nedělá. Když si nastavíš padding a jezdíš v tom odsazení tak ano

 
Nahoru Odpovědět 30.6.2014 18:23
Avatar
Pavel Junek
Redaktor
Avatar
Odpovídá na mkores.mk
Pavel Junek:

Takhle by to nestačilo?

<body>
<header>
<a href="index.html"><div id="logo"><h1>TJ Sokol Miličín</h1></div></a>
<nav>
<a href="akt.html" onmouseover="this.style.textDecoration= 'overline'" onmouseout="this.style.textDecoration= 'none'" class="nepodtrzeno">Aktuality</a>
<a href="dok.html" onmouseover="this.style.textDecoration= 'overline'" onmouseout="this.style.textDecoration= 'none'" class="nepodtrzeno">Dokumenty</a>
<a href="sport.html" onmouseover="this.style.textDecoration= 'overline'" onmouseout="this.style.textDecoration= 'none'" class="nepodtrzeno">Sport</a>
 </nav>

A CSS

.nepodtrzeno{text-decoration: none}
 
Nahoru Odpovědět 30.6.2014 21:14
Avatar
mkores.mk
Člen
Avatar
mkores.mk:

Vždyť to se objeví jenom takový úzký proužek hned nad odkazem, já bych rád jak jsem dával screen.

 
Nahoru Odpovědět 30.6.2014 21:51
Avatar
Pavel Junek
Redaktor
Avatar
Odpovídá na mkores.mk
Pavel Junek:

tak takhle

<body>
<header>
<a href="index.html"><div id="logo"><h1>TJ Sokol Miličín</h1></div></a>
<nav>
<a href="akt.html" class="nepodtrzeno">Aktuality</a>
<a href="dok.html" class="nepodtrzeno">Dokumenty</a>
<a href="sport.html" class="nepodtrzeno">Sport</a>
 </nav>

CSS si uprav jak chceš

a:hover{border-style: solid none none none; border-width: 10px}
.nepodtrzeno{text-decoration: none;}
 
Nahoru Odpovědět 30.6.2014 22:37
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na mkores.mk
Honza Bittner:

Problém máš v tom, že se to snažíš udělat, tu lajnu, přes extra element, což bych nedoporučoval.

Udělej to přes :before, který nastyluješ pro LI. :)

Nahoru Odpovědět 30.6.2014 22:45
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Findthee
Člen
Avatar
Findthee:

Neskutečná prasárna:D
http://jsfiddle.net/7vFsZ/

 
Nahoru Odpovědět  -2 30.6.2014 22:51
Avatar
mkores.mk
Člen
Avatar
mkores.mk:

Bohužel, to taky není ono.

Teda měl bych místo :hover dát :before a všechno ostatní nechat, tak jak to mám? :)

 
Nahoru Odpovědět 30.6.2014 22:57
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na mkores.mk
Honza Bittner:

Ne, hover míti musíš, jinak neodchytneš ten stav.

Budeš tedy míti asi 2 selektory, něco jako ul li a ul li:hover:before, ul li.aktivni:before

Editováno 30.6.2014 22:59
Nahoru Odpovědět 30.6.2014 22:59
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
mkores.mk
Člen
Avatar
Odpovídá na Honza Bittner
mkores.mk:

Mohl by jsi mi napsat tedy ten kousek kódu, jak to tam bude přesně? Nějak se v tom ztrácím...

 
Nahoru Odpovědět 30.6.2014 23:12
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na mkores.mk
Honza Bittner:

Napíšu ti kostru pro CSS.

nav ul li{
  ...styly pro li...
}

nav ul li a{
  ...styly pro a...
  padding: 0 20px;
  line-height: 50px;
  font-size: 18px;
}


nav ul li:hover:before, nav ul li.aktivni:before{
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background: red;
  position: absolute;
  top: 0;
  let: 0;
}

Takto nějak by to mělo fungovati.
(v UL LI nech pouze A)

Editováno 30.6.2014 23:16
Nahoru Odpovědět 30.6.2014 23:16
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
mkores.mk
Člen
Avatar
mkores.mk:

Tak to vypadá takto:

https://www.dropbox.com/…odiled/w.jpg

A v HTML bude toto?

<li><a href="sport.html" class="aktivni">Sport</a></div></li>
Editováno 30.6.2014 23:29
 
Nahoru Odpovědět 30.6.2014 23:27
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na mkores.mk
Honza Bittner:

Třídu aktivní dávej vždy na LI.

Čára by měla být pouze nad .aktivni nebo při :hoveru, takže nevím co to dělá? Možná zkus dát na LI ještě relativní pozici?

Nahoru Odpovědět 1.7.2014 8:14
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
mkores.mk
Člen
Avatar
mkores.mk:

Jo, s relativní pozicí je to krásné :)

Ještě takovou otázečku, kdybych chtěl tento styl použít na podmenu, které bude vlevo, tzn. že ta čára by měla být ne nad odkazem ale nalevo od textu.

https://www.dropbox.com/…i/web1.1.png

 
Nahoru Odpovědět 3.7.2014 10:40
Avatar
mkores.mk
Člen
Avatar
Odpovídá na Honza Bittner
mkores.mk:

Nevíš? :)

Akceptované řešení
+20 Zkušeností
Řešení problému
 
Nahoru Odpovědět 15.7.2014 19:26
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 19 zpráv z 19.