NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: problém se stylování <a>

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

Aktivity
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:30.1.2014 16:34

Ahoj, mám problém se stylováním <a>... http://prntscr.com/2nxtha

Potřebuji, aby byla výška 50px - to již je nastaveno přes line-height, ale jaksi nefunguje. Také ho potřebuji dostat na střed.

Všechno tak, aby bylo :hover použito jen na šířku textu, né na celý bílý pruh.

Odpovědět
30.1.2014 16:34
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Juraj Mlich
Tvůrce
Avatar
Odpovídá na Honza Bittner
Juraj Mlich:30.1.2014 16:36 
#selektor {
    display: block;
    height: 50px;
    margin: auto;
}
Editováno 30.1.2014 16:37
 
Nahoru Odpovědět
30.1.2014 16:36
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:30.1.2014 16:38

pokud text-align nefunguje, tak bych mu nastavil

display: block;
height: 50px;
width: co potřebuješ px;
margin: 0 auto;

nevím jestli toto bude fungovat.

 
Nahoru Odpovědět
30.1.2014 16:38
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Juraj Mlich
Honza Bittner:30.1.2014 16:40

To sice ano, ale pak bude :hover efekt na celém bílém bloku, což nechci.

Nahoru Odpovědět
30.1.2014 16:40
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:30.1.2014 16:42

Width bych potřeboval nejlépe automaticky, toho se dá docílit případně přes text-align:center na bílém pruhu... Zbývá ještě dořešit výška, což se divně zarovnává jen kolem písma.

Nahoru Odpovědět
30.1.2014 16:42
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:30.1.2014 16:43

tak obsah zanoř do span a dej hover efekt na ten.

 
Nahoru Odpovědět
30.1.2014 16:43
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:30.1.2014 16:44

<a> dělá vždy problémy prostě ...

Nechci ho obalovat... :P

Nakonec mě napadlo vyzkoušet display: inline-block; a funguje, společně s text-align na rodičovském elementu.

Nahoru Odpovědět
30.1.2014 16:44
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:30.1.2014 16:46

obalování je prasárna, myslel spíš zanoření:

<a><span></span></a>
 
Nahoru Odpovědět
30.1.2014 16:46
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:30.1.2014 16:52

To by pořád nevyřešilo můj problém s tím, že nechci mít klikatelný celý pruh... :)

Jak jsem psal tak mi to už funguje, takže ok... :D

Nahoru Odpovědět
30.1.2014 16:52
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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 9 zpráv z 9.