Odkaz "další »" - jak vyzrát na Konqueror?

28.1.2008 17:17 | Přečteno: 1455× | Abc | poslední úprava: 1.2.2008 22:09

Před nedávnem jsem nechával hlasovat o tom, kam byste nejraději umístili odkaz "další »" v boxících s výpisem naposledy změněných položek v různých sekcích. Vyhrála varianta, která by odkaz umístila do pravého spodního rohu v podobě falešného tlačítka.

Teď však marně řeším problém s prohlížečem Konqueror, který tlačítko přepisuje textem ze seznamu, je-li poslední položka příliš dlouhá. Mrkněte na obrázky a úryvky kódu, jestli byste mi nedokázali poradit nějaké elegantní řešení...

Abych odkaz umístil do pravého spodního rohu, musím jej floatovat (fixní pozice nepřipadá v úvahu, protože se stejné schéma bude používat i boxících, které jsou od kraje viewportu jinak vzdálené než pravý sloupec na hlavní stránce, viz třeba Slovník). Protože má být odkaz na spodku boxíku, je nutné jej vložit až za poslední položku seznamu. A proto musím odkazu nastavit zápornou vrchní margin, aby se vrátil zpět do boxíku.

Podotýkám, že není možné vložit odkaz mezi poslední a předposlední položku seznamu, protože kdybych jej floatoval odtud, mohl by v případě zalomeného posledního řádku viset vysoko nad spodním okrajem boxíku. Viz obrázek níže.

Kámen úrazu je v té záporné hodnotě u margin-top. Zatímco Firefox i Opera zalomí příliš dlouhý řádek, než aby zasahoval do odkazu, Konqueror kvůli tomu posunutí pomocí záporné margin o odkazu "neví" a klidně ho přepíše. Takhle vypadá CSS a výsledek:

.s_sekce_dalsi {
	margin:		-1.3em 0 0 0.5em;
	float:		right;
	border:		1px solid #c0c0c0;
}

Jak jsem řekl, Opera i FF se s tím vypořádají dobře. Takhle to vypadá v Opeře:

Co byste mi poradili? Jedna možnost je dát odkaz do pravého horního rohu. Tam by nebylo potřeba provádět žádné kejkle s negativní margin, takže by to Konqueror zvládl bez potíží:

Ale to se mi moc nelíbí... Nebo bych odkaz mohl dát mezi předposlední a poslední položky seznamu, ale - jak už jsem zmiňoval výše - pak by to dopadlo takto:

       

Obrázky

Komentáře

[Prcek]

Příloha:

• dalsi.png (5751 bytů)

Co treba dat tlacitko "dalsi>>" proste jako dalsi odrazku seznamu? (obrazek v priloze). Nebo to nemusi byt tlacitko ale normalni textovy odkaz.

[Robert Krátký]

To by sice šlo, ale jednak by to pak zabíralo více místa (řádek navíc) a kromě toho by to neodpovídalo tomu, jak by to většina uživatelů chtěla mít.

[12345]

Protože má být odkaz na spodku boxíku, je nutné jej vložit až za poslední položku seznamu. A proto musím odkazu nastavit zápornou vrchní margin, aby se vrátil zpět do boxíku.

Nejsem si jistý, jestli to dobře chápu, ale: „vracet zpět” odkaz je nutné proto, že kvůli float na něj není brán ohled při tvorbě layoutu rodiče? Jestli je to tak, dá se to vyřešit třeba přidáním nějakého clearing elementu za ten odkaz: <a href="#">Další »</a>
<div style="clear: right"></div>
</div> <!-- Konec rodiče --> Nevýhoda je, že se tím zanáší markup. Alternativní řešení je floatovat i celého rodiče, ale s tím by asi byly problémy. Nebo se ten clearing element dá přidat JavaScriptem (další nevýhoda).

[Filip Jirsák]

Podle mne je to v Opeře a FF „správně“ jenom díky tomu, že se text zalomí na další řádek, tím pádem je na konci toho řádku dost místa. Kdybys text zkrátil, aby se vešel na jeden řádek, nebo naopak prodloužil, aby i druhý řádek zasahoval do tlačítka, dopadne to stejně (alespoň mně se to tak chová ve FF). Napadá mne jen možnost nastavit té poslední položce v seznamu margin-right na přibližnou šířku tlačítka – tedy nějakých 8ex. Zkrácené pak sice budou všechny řádky poslední položky, ale aspoň se to nebude překrývat…

[zager]

Tak bych na to asi taky sel. Nebo tim margin-right odsadit celou pravou stranu elementu UL. Ale tim padem bude nad tlacitkem vzdy bily prostor. Osobne to s floatovanim vzdycky resim tak, aby jej ve strance bylo uzito co nejmene :) Je to pekelnyho ladeni

[Josef Kufner]

Jo, taky mam pocit, ze to je tim zalomenim a ze to vsecky browsery renderuji spravne. Ubrat jednu skupinku kkk a zkusit znovu

A nic lepsiho nez ten pravy okraj posledni polozce me nenapada...

[Josef Kufner]

Možná by se ale dalo poexperimentovat s floatenim toho seznamu... ale to je trosku zvrhle...

[mrzout]

Nevymýšlet kolo a dát na konec něco jako:

<div class="buttons">

<div>Další</div>

<hr style="clear: both; visibility: hidden;"/>

</div>

Alespoň pak půjdou snadno přidávat další tlačítka.

[Filip Jirsák]

Což ale vloží tlačítko pod poslední položku a bude zarovnané doleva, ne? Nebo co je nastavené ve stylu pro třídu buttons?

[mrzout]

ne, jen ten button má styl float: right;

[mrzout]

<div style="float: right;">Další</div>

[Filip Jirsák]

To ale znamená, že bude tlačítko až na dalším řádku, což je právě to, čemu se chceme vyhnout…

[mrzout]

ano a to je IMHO chyba: jednoduché řešení připravené na další rozšíření nahrazovat složitým řešením, které dělá problémy

navíc logicky tlačítko na konkrétní LI logicky patří k obsahu toho LI a ne celého seznamu

[Filip Jirsák]

Nejprve si přečtěte starší zápisek, kde se o umístění tlačítka hlasovalo. Nebylo by trochu „zvláštní“ nechat hlasovat o nějakém návrhu, a pak prohlásit „fajn, zahlasovali jste si, a my to teď uděláme jinak“?

[mrzout]

OK, názor neměním, ale zadání je tedy pevně dané (i když pro hlasování mnou navrhovaná varianta nebyla).

Dal bych tedy:

<div style="position:relative; width: 200px; padding-right: 60px;">

<ul> <li></li> </ul>

<div style="position: absolute; right: 0; bottom: 0;">další</div>

</div>

Pak se na tlačítko počítá s pevnou šíří v px. Náhrada za em by mohla pomoci, ale čisté to IMHO není.

[happy barney]

btw, ten padding-right stačí nastaviť poslednému slovu posledného li (vložiť do samostatného span)

[mrzout]

ne, pokud je výška tlačítka vyšší než výška řádku toho slova

[Josef Kufner]

Nebude. Tlačítko může být stejně vysoké jako řádek. Ale ten padding u spanu na konci není vůbec blbý nápad.

[Filip Jirsák]

Pak je tu ještě jedna možnost, která na jednu stranu není košer z hlediska sémantiky, ale zase dělá přesně to, co bylo v návrhu – umisťuje tlačítko další do pravého dolního rohu. Nastavit obalujícímu prvku (ul nebo nadřazený div) position:relative (takže zůstane na svém místě, ale uvnitř se budou absolutně pozicované prvky umisťovan vůči tomuto obalu) a samotnému tlačítku nastavit position:absolute, bottom:0, right:0 (pro MSIE je potřeba nahradit expression). Tím se tlačítko přesune do pravého dolního rohu. Pak je ale potřeba vyřešit, aby nepřekrývalo text – to by se vyřešilo tím, že se tlačítko vloží ještě jednou na konec poslední odrážky, a nastaví se mu visibility:hidden – tohle skyrté tlačítko by tomu zobrazenému „drželo místo“. A to je taky ten prohřešek proti sémantice – ten prvek by musel v HTML být dvakrát (nebo by tam alespoň musel být span, který bude mít šířku tlačítka).

<html>
  <head>
    <style>
    .dalsi {
      padding: 0px 3px;
      background: lime;
    }
    </style>
  </head>
  <body>
  <div style="background-color: orange; width: 150px; position: relative;">
  <ul>
    <li>odrážka</li>
    <li>odrážka</li>
    <li>odrážka</li>
    <li>odrážka</li>
    <li>odrážka</li>
    <li>odrážka</li>
    <li>odrážka</li>
    <li>odrážka xxx xxx xxx xxx
      <span class="dalsi" style="visibility: hidden">další</span>
    </li>
  </ul>
  <span class="dalsi" style="position: absolute; bottom: 0px; right: 0px;">další</span>
  </div>
  </body>
</html>

[happy barney]

zaujímavá situácia nastane, keď text bez tlačítka sa zalamuje na dva riadky, ale s tlačítkom na tri ... aké má byť správne chovanie? dva + tlačítko na prázdnom alebo na treťom jedno slovo, na konci tlačítko a na druhom voľné miesto ?

[Filip Jirsák]

Ve výše uvedeném návrhu to bude dva řádky a tlačítko na prázdném. V případě se zkrácením poslední položky přes padding nebo margin to budou minimálně tři řádky textu, protože tam se zkrátí všechny řádky, a tlačítko by bylo vždy vedle textu.

[Josef Kufner]

A co dát před ten poslední span nedělitelnou mezeru (&nbsp;) a odstranit ostatní mezery ?

[Filip Jirsák]

K čemu by to bylo dobré? Obojí stejně zabere 3 řádky, a je skoro jedno, jakým způsobem se to zobrazí (i když varianta dva řádky textu a na třetím jen tlačítko je logičtější).

[happy barney]

k čemu? aby sa ľahšie splnila podmienka slovo + medzera + tlačítko > šírka stĺpca

[Josef Kufner]

Bude se to výrazně hezčeji chovat v mezních případech.

[Filip Jirsák]

Jestli to dobře chápu, tak to pouze pevně spojí poslední slovo s místem pro tlačítko. Což je ale poněkud nešťastné, protože nikdo nechce cpát násilím poslední slovo vlevo vedle tlačítka, když by se vešlo klidně na předchozí řádek. Účelem je mít tlačítko na posledním řádku, pokud se tam vejde – ne za každou cenu nějaký text vlevo vedle tlačítka. Navíc to pevné spojení by způsobilo ještě jeden problém – pokud by poslední slovo spolu s mezerou pro tlačítko bylo příliš dlouhé (delší než řádek), nezalomilo by se místo pro tlačítko přirozeně na další řádek, ale vyteklo by z okna – skutečné tlačítko by se ale pozicovalo do okna a překrylo by konec toho dlouhého slova. Což už je opravdu extrémní případ…

[Josef Kufner]

Bude to vypadat lépe, protože to nebude naplácané na sobě. Prostě to jen lépe (rovnoměrněji) využije tak jako tak zabraný prostor.

Pokud bude poslední slovo příliš dlouhé, zalomí se na další řádek a pokud bude ještě delší, dopadne to špatně v obou případech. Jo, takle bude mít o pár px míň místa, ale i tak to bude stačit. Dalo by se to vyřešit rozdělením mezery na dvě poloviny, kde jedna polovina by byla napevno u textu a druhá by byla zalamovací. Tím by byly vyřešeny hezky oba mezní případy.

[Filip Jirsák]

Toho samého lze docílit tak, že tomu neviditelnému tlačítku nastavím o něco větší šířku, nebo mu nastavím padding nebo margin. Což jsem předpokládal jako samozřejmost, takže mne to nenapadlo to explicitně psát.