NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
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
Invi
Tvůrce
Avatar
Invi: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
Odpovídá na Invi
Neaktivní uživatel:9.1.2016 17:26

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

<a href><li>Neco</li></a>
Nahoru Odpovědět
9.1.2016 17:26
Neaktivní uživatelský účet
Avatar
lukas.sei
Člen
Avatar
lukas.sei:9.1.2016 17:32

děkuji :)

 
Nahoru Odpovědět
9.1.2016 17:32
Avatar
Invi
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Invi: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
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.