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

Aktivity (1)
Avatar
lukas.sei
Člen
Avatar
lukas.sei:9.1.2016 16:55

Č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.1.2016 16:55
Avatar
Dennis Tschamler
Redaktor
Avatar
Dennis Tschamler:9.1.2016 17:22
  • 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.1.2016 17:23
 
Nahoru Odpovědět 9.1.2016 17:22
Avatar
David Hanina
Člen
Avatar
Odpovídá na Dennis Tschamler
David Hanina:9.1.2016 17:26

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

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

děkuji :)

 
Nahoru Odpovědět 9.1.2016 17:32
Avatar
Dennis Tschamler
Redaktor
Avatar
Odpovídá na David Hanina
Dennis Tschamler:9.1.2016 17:35

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.1.2016 17:35
Avatar
lukas.sei
Člen
Avatar
lukas.sei:9.1.2016 18:16

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.1.2016 18:16
Avatar
Odpovídá na lukas.sei
Matyáš Procházka:9.1.2016 18:28

@media se zapisuje takto:

.mala {
        height: 78px
}

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

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

 
Nahoru Odpovědět  +1 9.1.2016 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.