| Autor | Zpráva | ||
|---|---|---|---|
| Syp Profil * |
#1 · Zasláno: 3. 5. 2016, 07:55:42
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 |
#3 · Zasláno: 3. 5. 2016, 17:56:18
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 |
#6 · Zasláno: 5. 5. 2016, 11:32:10
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! @:-) |
||
|
Časová prodleva: 8 let
|
|||
0