Autor Zpráva
Syp
Profil *
Ahoj,

vypadá to triviálně, ale není nebo mi něco uniká.
Mám navigaci, kde může být 4-n odkazů a potřebuji, aby byly do celé šířky webu.
Také mají spodní border, který nemůže být nalepený ihned na tlačítko (tj. jedině border-bottom) a dále pravý bílý border.

A co je nejdůležitější, musí se centrovat horizontálně a počítá se s tím, že odkaz může být i na 2 řádky.

Můj kód: Odkaz podařilo se mi krom toho vycentrování všechno a s tím bych potřeboval poradit, zda-li by někoho nepadla nějaká finta.

Výška nikdy nemůže být fixní a blokový odkaz v table-cell nefunguje na 100% výšku, proto je použit display inline block.

PS. A ve Firefoxu to nefunguje zcela jako v chromu.

Nemá někdo řešení?
radekt
Profil
Menu na celou šířku stránky sice lze dosáhnout pomocí display: table, viz třeba zde. Ale na hodně malých displejích, jsou-li v položkách delší texty, se to rozsype.
Tomáš123
Profil
Syp:
Ukážka. Snáď jediným problémom je ten miznúci rámček medzi položkami (zväčši si jeho hodnotu a bude jasné prečo sa to deje). Riešenie mi momentálne nenapadá, hrajme sa, že je to premyslený grafický efekt :-).

Pri menších rozlíšeniach bude určite lepšie položky zobraziť pod sebou.
Syp
Profil *
Tomáš123:
Super! I ve firefoxu to vypadá dobře, ted ještě vymyslet ten border a bude to vyřešené.


Možná tam mezi to narvat prázdné LI s pevnou šířkou, které ten border budou simulovat, ale nebude to uplně čisté


Bohužel to ještě trpí neduhem, že odkaz není klikací po celé ploše ...
radekt
Profil
Syp:
Bohužel to ještě trpí neduhem, že odkaz není klikací po celé ploše ...
na to stačí li a { display: block; }

Syp:
Možná tam mezi to narvat prázdné LI s pevnou šířkou, které ten border budou simulovat, ale nebude to uplně čisté
to nebude potřeba:
border mezi položkami: li { border-right: 1px solid white; }
pak je potřeba vyhodit bílé znaky, aby se to o ně neposouvalo: ul { font-size: 0;}
možností je více, viz článek
Tomáš123
Profil
radekt:
na to stačí li a { display: block; }
Nestačí. Bloky nejde vertikálne centrovať. V tomto prípade navyše display: block nezaistí roztiahnutie prvku na rozmery rodiča. (Neviem prečo.)

Druhým problémom je nastavený rámček zľava aj zdola. V rohu sa stretávajú a vzniká neželaný efekt zúženia.

Syp:
Riešením prvého problému by mohol byť absolútne napoziciovaný a roztiahnutý pseudoelement :after. Ukážka.

Druhý problém by okrem nečistej možnosti s prázdnymi jednopixelovými položkami šlo riešiť aj pomocou vlastnosti outline. Nedá sa tak však, bohužiaľ, nastaviť rozličné hodnoty pre každú stranu (medzi dvojicou položiek vznikne širšia medzera). Yuhů navrhuje (nutné odrolovať na riadky s vlastnosťou outline) použiť box-shadow.

Využiť pseudoelement položky zoznamu <li> na spodný rámček sa mi nepodarilo. Rámčeky neboli v rovine.

Najlepšou alternatívou mi príde nastaviť zvislý rámček vzniknutému pseudoelementu prvku <a>. Ukážka.
Syp
Profil *
Tomáš123:
Fantastický. Figl s pseudoelementem mě nenapadl.
Moc jsi mi pomohl.

Děkuji @:-) !


PS. To s tím, že se neroztahuje áčko pokud je blokové, to je poměrně známé, stačí zagooglit, existuje na to finta s velkým paddingem a oříznutím přes overflow, ale to bych pak neudělal ten spodní border a ty pravé.

Tohle je super řešení, tak ještě jednou dík a dobrou noc! @:-)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: