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

HTML a CSS HTML a CSS problém se stylování <a> American English version English version

Aktivity (1)
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Juraj Mlich
Redaktor
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
Vždy je lepšie učiť sa z cudzích chýb, než z vlastných chýb.
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  +1 30.1.2014 16:38
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/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.