Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
mkores.mk
Člen
Avatar
mkores.mk:30.6.2014 15:43

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:30.6.2014 16:43

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:30.6.2014 16:57

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

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

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:30.6.2014 18:03

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:30.6.2014 18:23

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:30.6.2014 21:14

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:30.6.2014 21:51

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:30.6.2014 22:37

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
Šupák
Avatar
Odpovídá na mkores.mk
Honza Bittner:30.6.2014 22:45

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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Petr D
Člen
Avatar
Petr D:30.6.2014 22:51

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:30.6.2014 22:57

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
Šupák
Avatar
Odpovídá na mkores.mk
Honza Bittner:30.6.2014 22:59

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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
mkores.mk
Člen
Avatar
Odpovídá na Honza Bittner
mkores.mk:30.6.2014 23:12

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
Šupák
Avatar
Odpovídá na mkores.mk
Honza Bittner:30.6.2014 23:16

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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
mkores.mk
Člen
Avatar
mkores.mk:30.6.2014 23:27

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
Šupák
Avatar
Odpovídá na mkores.mk
Honza Bittner:1.7.2014 8:14

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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
mkores.mk
Člen
Avatar
mkores.mk:3.7.2014 10:40

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:15.7.2014 19:26

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.