Diskuze: HTML - navigační lišta, tlačítka fungují jen po kliknutí na text

HTML a CSS HTML a CSS HTML - navigační lišta, tlačítka fungují jen po kliknutí na text American English version English version

Avatar
lukas.sei
Člen
Avatar
lukas.sei:

Čaute,
Omlouvám se za hromady mých otázek.
Ale mám tu další. Právě jsem na své stránce udělal navigační lištu jak je to tady popsáno v "návodu". Ale všiml jsem si že čudlíky fungují pouze pokud se klikne na text.
Nejde nějak nastavit aby čudlíky fungovaly i když kliknu kdekoliv kolem něho v té oražové zóně ?
Doufám že mě chápete a doufám že mi pomůžete.
Můj kód:
https://jsfiddle.net/e0Lreegn/

 
Odpovědět 9. ledna 16:55
Avatar
Dennis Tschamler
Redaktor
Avatar
Dennis Tschamler:
  • Odstranit padding <li> a nastavit ho <a>.
  • Nastavit <a> display : block ( Odkaz se defaultně chová jako inline element. Když ho nastavíš na block, přizpůsobí svoji velikost rodičovskému elementu. )

https://jsfiddle.net/e0Lreegn/2/

Editováno 9. ledna 17:23
 
Nahoru Odpovědět 9. ledna 17:22
Avatar
David Hanina
Člen
Avatar
Odpovídá na Dennis Tschamler
David Hanina:

Osobně mi příjde jednodušší prohodit <li> a <a>

<a href><li>Neco</li></a>
 
Nahoru Odpovědět  -1 9. ledna 17:26
Avatar
lukas.sei
Člen
Avatar
lukas.sei:

děkuji :)

 
Nahoru Odpovědět 9. ledna 17:32
Avatar
Dennis Tschamler
Redaktor
Avatar
Odpovídá na David Hanina
Dennis Tschamler:

Kdyby chtěl později vytvořit rozbalovací menu, tak bych se radši držel klasické struktury:

<ul><li><a></a></li></ul>

A už je to víceméně taková konvence, jak strukturovat menu.

 
Nahoru Odpovědět 9. ledna 17:35
Avatar
lukas.sei
Člen
Avatar
lukas.sei:

Ještě bych se chtěl zeptat. Nechci kvůli toho zakládat nové téma. Chtěl bych udělat responzivní design hlavičky mojí stránky. Takže pokud by se zobrazila tahle stránka na monitoru s menším rozlišením tak by se velikost hlavičky zdvojnásobila.
Velikost hlavičky mám nastavenou přes CSS pomocí:

header{height: 78px;}

.
Zkoušel jsem to pomocí:

.mala{height: 78px; @media (min-width: 1130px) {height: 200%;}}

A v HTML <header class="mala">. Ale nefungovalo to.

 
Nahoru Odpovědět 9. ledna 18:16
Avatar
Odpovídá na lukas.sei
Matyáš Procházka:

@media se zapisuje takto:

.mala {
        height: 78px
}

@media screen and (max-width: 1130px) {
        .mala {
                height: 156px;
        }
}
 
Nahoru Odpovědět 9. ledna 18:28
Avatar
lukas.sei
Člen
Avatar
lukas.sei:

dík za trpělivost se mnou. Opět jste mi hodně pomohli :)

 
Nahoru Odpovědět  +1 9. ledna 18:34
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 8 zpráv z 8.