| Autor | Zpráva | ||
|---|---|---|---|
| Petr ZZZ Profil |
#1 · Zasláno: 29. 9. 2010, 20:13:51
Zdravím, mám definiční seznam nastylovaný tak, aby termín a jeho definice (
<dt> a <dd>) byly v jednom řádku. IE6 zobrazuje vše jak třeba, ale FF dělá řádky <dt> o chlup vyšší než řádky <dd>. Na zhruba padesátém řádku už je to ujeté o výšku jednoho řádku, což je dost blbé. Dobře je to vidět na seznamu Cerambycidae s 57 položkami; tento seznam jsem nakopíroval třikrát: jednou s nastylovanými odkazy, jednou jen s tučnými jmény vlevo a jednou s textem stejně velkým vlevo jako vpravo.
Firefox mi pouze třetí seznam ukazuje dobře, u ostatních dvou nejsou řádky na stejné úrovni. Nejdřív jsem si myslel, že se někde ztratilo jedno <dd>, pak jsem řádky pročísloval a zjistil, že to je rozdílnou výškou řádku v <dt> a <dd>.
Nevíte někdo co s tím? Problematická místa na stránce najdete podle zeleného písma. U ostatních (kratších) seznamů je ten problém taky, ale u málo řádků to není nápadné. Podobný problém už se tady jednou řešil, ale buď něco nechápu nebo se to nevyřešilo: Jak nastylovat definiční seznam? Problematická stránka příslušné CSS |
||
| Tori Profil |
#2 · Zasláno: 29. 9. 2010, 20:44:19
Petr ZZZ:
můžu se jen zeptat, která verze FF vám to rozhazuje? koukla jsem to v 3.5.11 a všechny tři seznamy ok, nadpisy vypadaly taky normálně. Jen v Chrome 5.0.375 je první seznam rozhozený (tím 1px rozdílem), ale další dva už jsou také dobré. |
||
| panther Profil |
#3 · Zasláno: 29. 9. 2010, 20:47:09 · Upravil/a: panther
Petr ZZZ:
je to tím, že texty v <dt> jsou vyšší než deklarovaná výška řádku. Možné řešení by bylo následující: dl {overflow: hidden;}
dt {float: left; clear: both; /*aby clearoval pod poslednim z DD, ktere k nemu patri */ width: 600px; ...}
dd {float: right; clear: right; width: 300px; margin: 0; padding: 0;}Tori: „koukla jsem to v 3.5.11“ třeba nejnovější 3.6.10 (nebo nedávno nejnovější :-)), ale problém by měl být i ve starších verzích. Prvně jsem si toho taky nevšiml, nesedí číslování. |
||
| Tori Profil |
#4 · Zasláno: 29. 9. 2010, 20:51:01
panther:
„nesedí číslování“ no nevim, všechny tři seznamy mi končí 57 vpravo i vlevo. mám někde postnout screen? |
||
| Bubák Profil |
#5 · Zasláno: 29. 9. 2010, 21:03:13
Petr ZZZ:
Ve Firefoxu 3.6.10 je rozhozený první a druhý seznam, třetí je v pořádku. V Chrome 7.0.517.24 je rozhozený jen první seznam. Opera a IE zobrazí v pořádku, Safari jsem nezkoušel. Pokud mě nikdo nepředběhne, kouknu na problém zítra odpoledne. |
||
| Petr ZZZ Profil |
#6 · Zasláno: 29. 9. 2010, 23:46:42
panther:
Díky, vyzkouším Tori: Ano, pravý i levý sloupec končí u všech tří verzí číslem 57 a také počty řádků jsou shodné, ale řádky nesedí opticky, protože v pravém sloupci jsou řádky oproti levému sloupci zdrclé (první a druhý seznam mi ve FF nesedí, až třetí sedí). Jestli ti to ve FF sedí (tj. 57 Xylotrechus rusticus je na tom stejném řádku jako 57 not common) a chce se ti postnout screen, budu rád. Já konce prvních dvou seznamů vidím ve FF takto:
56 Xylotrechus pantherinus 57 not common 57 Xylotrechus rusticus ale má to vypadat takto: 56 Xylotrechus pantherinus 56 rare 57 Xylotrechus rusticus 57 not common Bubák: Díky moc za shlédnutí v ostatních prohlížečích a budu moc rád, když něco vymyslíš (pantherův návrh samozřejmě vyzkouším a dám vědět). |
||
| Tori Profil |
#7 · Zasláno: 30. 9. 2010, 00:09:37
Petr ZZZ:
screen (FF 3.5.11/Linux) |
||
| Plaváček Profil |
#8 · Zasláno: 30. 9. 2010, 07:14:48
Petr ZZZ:
Asi nejrychlejší řešení je úprava následujících definic: dl {width: 100%;overflow:hidden}
.dle dt { float:left; clear:left; color:#FFCC66; width:600px; }
.dle dd {float:left;width:280px;}P.S. Mimochodem bych ale řekl, že v tomto případě by možná bylo vhodnější použít tabulku. P.P.S. ten styl je docela masakr, ty se v něm vyznáš? :) |
||
| panther Profil |
#9 · Zasláno: 30. 9. 2010, 07:34:12
Plaváček:
„P.S. Mimochodem bych ale řekl, že v tomto případě by možná bylo vhodnější použít tabulku.“ taky už jsem nad tím včera přemýšlel, jestli common - not common - not rare - rare - very rare jsou definice k uvedeným termínům. Asi ne. Zase než navrhovat tabulku, je jednodušší pro PetraZZZ zasáhnout do stylů. |
||
| Petr ZZZ Profil |
#10 · Zasláno: 1. 10. 2010, 00:16:56 · Upravil/a: Petr ZZZ
Tori:
Díky za screen! Zajímavé – opravdu to nemáš rozhozené, v jiných Firefoxech to rozhozené panther, Plaváček: Tisíc díků, přinejmenším v mém FF (a IE) fungují obě řešení, trošku jsem jedno z nich přizpůsobil (musím použít třídu i na dl, protože mám jiné definiční seznamy stylované jinak); už je to hotové (na původním odkazu).
Tabulku jsem na to nechtěl použít. Mně jsou definiční seznamy hrozně sympatické a chci se s nimi naučit dělat. Nejvíc se mi na nich líbí, že lze dt a dd stylovat rozdílně (v tabulce, pokud se nemýlím, by se muselo každé druhé td opatřit třídou).
Plaváček: „ten styl je docela masakr…“ Děkuji za pochvalu. :) „…ty se v něm vyznáš? :)“ Ehm, částečně. :)) Ještě pro budoucí generace výcuc toho podstatného (už po úpravě): CSS: .clb { clear:both; }
.ftx { styly odkazů }
/* dlf podle panthera, mírně pozměněno */
.dlf { overflow: hidden; }
.dlf dt { float: left; clear: both; width: 550px; color:#000000; margin-right:1em; }
.dlf dd { float: right; clear: right; width: 350px; color:#404040; margin: 0; padding: 0; }
/* dlg podle Plaváčka, mírně pozměněno */
.dlg { width: 100%; overflow:hidden }
.dlg dt { float:left; clear:left; width:550px; color:#000000; }
.dlg dd { float:left; width:350px; }HTML: <h4 class="clb">Tesaříci</h4>
<dl class="dlf ftx">
<dt><a href="zabra_00000084.html"><i>Saperda perforata</i></a></dt>
<dd>topol</dd>
<dt><a href="zabra_00000085.html"><i>Saperda punctata</i></a></dt>
<dd>jilm</dd>
<dt><i>Saperda octopunctata</i></dt>
<dd>lípa</dd>
</dl> |
||
| Bubák Profil |
#11 · Zasláno: 1. 10. 2010, 07:39:14
Petr ZZZ:
„v tabulce, pokud se nemýlím, by se muselo každé druhé td opatřit třídou“ Mýlíš se. Ve tvém případě není použití třídy nutné, protože můžeš stylovat kontextem odkaz v buňce. Pokud bys chtěl dát styl sloupcům tabulky, tak i to jde, je sice menší problém se staršími IE, protože neznají selektor sousedního potomka, ale naštěstí nedodržují CSS specifikaci a umožňují použít na element COL jakýkoliv styl. http://web.archive.org/web/20071002120942/http://llook.wz.cz/weblog/ruzny-soubory/col/nahrada-colgroup.html |
||
| Petr ZZZ Profil |
Bubák:
„Ve tvém případě není použití třídy nutné, …“ Děkuji za upozornění, přidal jsem do příkladu v #10 Saperda octopunctata bez odkazu, aby ty různé barvy písma ve třídě .dlf dávaly smysl. Dík i za odkaz na tabulku s různě stylovanými sloupci, úžasné, neznal jsem!
Na seznam literatury se ale definiční seznam hodí a těžko ho nahrazovat něčím jiným, ne? Příklad: CSS: body { background:#000; }
.lit dt { float:left; clear:left; color:#00ffcc; margin-right:1em; }
.lit dd { margin-left:2em; color:#00ff66; }HTML: <dl class="lit">
<dt>Weixler, H., Feller, S., Hamberger, J. (1999): </dt>
<dd>Gebirgsharvester made in Austria. Österr. Forstzeitung 8/99: 6-7.<dd>
<dt>Tilman, D., May, R. M., Lehman, C. L., Nowak, M. A. (2002): </dt>
<dd>Habitat destruction and the extinction debt. Nature 371: 65–66.<dd>
<dt>Volák, J. (1972): </dt>
<dd>Brouci z trouchu kaštanu obecného v kolónii mravence
<i>Lasius brunneus</i> Latr. Zprávy Českoslov. spol. entomol.
ČSAV, Praha, 8. S. 19–24.<dd>
</dl>Živá ukázka |
||
| Bubák Profil |
#13 · Zasláno: 1. 10. 2010, 14:05:29
Petr ZZZ:
Často je sporné, zda je správnější použít definiční seznam nebo tabulku. |
||
| Plaváček Profil |
#14 · Zasláno: 1. 10. 2010, 14:08:51 · Upravil/a: Plaváček
Petr ZZZ, Bubák
Jedná se o seznam dostupné literatury (nebo odkazů na zdroje) a tak by nejspíše nejvhodnější bylo použití obyčejného seznamu UL-LI. Definiční seznam je přeci jenom něco trochu jiného. |
||
| Petr ZZZ Profil |
#15 · Zasláno: 1. 10. 2010, 14:56:09
Plaváček:
Pokud ale chci mít autora a rok např. jinou barvou než zbytek citátu, tak bych musel psát: <li><b>Volák, J. (1972):</b> Brouci z trouchu…</li> a přemýšlet, zda použít <b> nebo <font> nebo jaký tag, a ten už bych nemohl použít na nic jiného. Takto použiju <dt> a <dd>, v HTML přiřadím třídu elementu <dl> a mám seznam nastylovaný a na jiný seznam můžu vytvořit zas jinou třídu. A <b> či <font> mám v zásobě na jiné účely. Prostě se mi nechce nechat plavat definiční seznam jen proto, že byl původně vytvořen na lexikon. Jinak řečeno – sémantiku se snažím zohlednit, ale jen pokud mi nesvazuje ruce, a použít definiční seznam na seznam literatury nepovažuji za takový prohřešek proti sémantice, abych cítil nutnost hledat jiné řešení.
Co ještě nemám vyřešeno v příkladu z #12, to jsou rozdílné velikosti písma v <dt> a <dd>. Zkoušel jsem to nějak zkombinovat s předchozími radami (#3, #8), ale jakmile odstraním width, tak se to rozpadne. Funguje to jen, když je v <dt> a <dd> stejná velikost písma.
|
||
| Bubák Profil |
#16 · Zasláno: 1. 10. 2010, 15:14:22 · Upravil/a: Bubák
Petr ZZZ:
„přemýšlet, zda použít <b> nebo <font> nebo jaký tag, a ten už bych nemohl použít na nic jiného.“ Proč, vždyť existuje kontext? <style>
.literatura {color: navy;}
.literatura b {color: green;}
</style>
<ul class="literatura">
<li><b>Volák, J. (1972):</b> Brouci z trouchu…</li>
<li><b>Burouk Pytlík (1975):</b> Mravenci v kredenci</li>
</ul> |
||
| Plaváček Profil |
#17 · Zasláno: 1. 10. 2010, 15:39:56 · Upravil/a: Plaváček
Petr ZZZ:
„jakmile odstraním width, tak se to rozpadne“ Tak fungují plovoucí prvky, zaberou jenom tolik místa, kolik potřebují. Je tedy logické, že při jiné velikosti písma (ve FF postačí i přidat bold) se budou chovat, tak jak se chovají. Ostatně - vzhledem k tomu, že máš šířku stránky explicitně stanovenou, nevidím v nastavení width žádný problém. P.S. při pohledu do tvého stylu se nemohu ubránit pocitu, že nedostatečně (spíš vůbec) využíváš možností, které skýtá dědičnost (či kaskáda) a ignoruješ možnosti kontextu, jak ukázal Bubák. Zbytečně se nadřeš a stylový předpis bude strašně chaotický. |
||
| panther Profil |
#18 · Zasláno: 1. 10. 2010, 16:26:15
Petr ZZZ:
„Pokud ale chci mít autora a rok např. jinou barvou než zbytek citátu, tak bych musel psát:“ to neznamená, že kvůli tomu musíš znásilňovat definiční seznam. Definiční seznam by měl obsahovat termín a definici, která jej vysvětluje. Hranice mezi správným použitím tabulky, seznamu a definičního seznamu může být v různých případech tenká a záleží jen na citu kodéra. To trochu zjednodušeně znamená, že ne vždy, když je někde dvojtečka (autor: dílo), je na místě definiční seznam. Takto sis to dle mého vyložil ty. |
||
| Petr ZZZ Profil |
#19 · Zasláno: 3. 10. 2010, 11:18:48
Bubák:
Díky moc, asi mi konečně došlo, co to je kontextová deklarace. :) Plaváček: „Tak fungují plovoucí prvky, zaberou jenom tolik místa, kolik potřebují.“ To chápu, ale nechápu, proč to nejde vyřešit čističem, když v podstatě stejný problém, popsaný v #1 a #6 (nevhodné posunutí způsobené různou velikostí písma), čistič vyřešil. I když… teď mě napadá – to je tím, že dt a dd s šířkou jsou blokové prvky, zatímco bez šířky jsou řádkové a čistič čistí jen bloky?
Width v seznamu literatury nastavovat nechci, líbí se mi, že je každý autor jinak dlouhý, ale je odlišen barvou. Jeden citát může znít třeba takto:
<dt>Geiser, R. (1992):</dt> <dd>Auch ohne Homo sapiens wäre Mitteleuropa von Natur aus eine halboffene Weidelandschaft. Laufener Seminarbeiträge 2/92. Akademie f. Naturschutz und Landschaftspflege-Laufen/Salzach. S. 22-34.</dd> a druhý takto: <dt>Müller, J., Bußler, H., Bense, U., Brustel, H., Flechtner, G., Fowles, A., Kahlen, M., Möller, G., Mühle, H., Schmidl, J., Zábranský, P. (2005):</dt> <dd>Urwald relict species – Saproxylic beetles indicating structural qualities and habitat tradition. Waldökologie-Online 2. Freising: 106-113.</dd> Kdyby mělo <dt> a <dd> definovanou šířku, zabíral by seznam literatury zbytečně mnoho místa, protože počty znaků v <dt> a <dd> se velmi různí.
„nedostatečně (spíš vůbec) využíváš možností, které skýtá dědičnost (či kaskáda) a ignoruješ možnosti kontextu“ No, úplně to pravda není, ale určitě mi spousta možností dosud uniká. panther: „…ne vždy, když je někde dvojtečka (autor: dílo), je na místě definiční seznam. Takto sis to dle mého vyložil ty.“ Netvrdím, že mi na sémantice nezáleží, ale nad dvojtečkami nepřemýšlím a v první řadě hledám možnosti nastylovat něco podle mých představ. Je ale pravda, že kontextová deklarace, jak navrhl bubák (#16), to řeší, a v tomto okamžiku jsem už zase ochoten sémantiku zohlednit. Takže na seznam literatury asi spíš <ul> než <dl>. :)
Všem Vám moc děkuji, zase jsem o kus dál! |
||
| H13 Profil |
#20 · Zasláno: 3. 10. 2010, 12:10:24 · Upravil/a: H13
Petr ZZZ
Všem Vám moc děkuji, zase jsem o kus dál! A budeš ještě dál, pokud se přeneseš přes svou nedůvěru vůči tabulkám. Ty data na tvý stránce jsou typický pro uložení (zobrazení) v tabulce (tabulka jednoduše vyřeší problémy, který musíš složitě řešit stylováním). Data v tabulce se zobrazují nejlépe (v tom smyslu, že v jakémkoliv prohlížeči, v jakémkoliv rozlišení se zobrazí podobně, a to dokonce i na malých rozlišeních jako je mobil - tedy data v tabulce se zobrazí stejně v IE6 jako na mobilu, zatímco s CSS a boxy už tak podobné není). Ano tabulky se nehodí pro designování celé stránky a její následné upravování (což je mnohem jednoduší za použití boxů a CSS), ale pro zobrazení dat typu "Název" : "Hodnota" (dva sloupce, mnoho řádků) jsou určeny tabulky. Jinak ještě bych odstranil text-align:justify; u dl. Pokud někdo používá velké písmo, pak to dělá zbytečně mezery. :-) 
|
||
| panther Profil |
#21 · Zasláno: 3. 10. 2010, 14:04:21
Petr ZZZ:
„čistič čistí jen bloky?“ čistič čistí jen to, co plave, tedy bloky. Inline prvek plavat nemůže, resp. pak už není inline. H13: „Data v tabulce se zobrazují nejlépe...“ dobře ostylovaný definiční seznam (a všechny další prvky) se zobrazí taky vždycky dobře. Není důvod, aby tomu bylo jinak. „zatímco s CSS a boxy už tak podobné není“ můžeš být, prosím, konkrétnější? Nesváděj neznalost nebo lenost autora na výstupní zařízení. „ale pro zobrazení dat typu "Název" : "Hodnota" (dva sloupce, mnoho řádků) jsou určeny tabulky.“ záleží na kontextu, dvojice Název: hodnota se dá zapsat několika způsoby a obecně nelze říct, že některý je lepší nebo horší. Pro každý případ se může hodit něco jiného. Možnosti jsem vyjmenovával už v [#18]: - definiční seznam (termín: definice) - seznam (autor: kniha) - tabulka |
||
| H13 Profil |
#22 · Zasláno: 3. 10. 2010, 19:18:01 · Upravil/a: H13
panther:
můžeš být, prosím, konkrétnější? Bohužel nemůžu, Nokii, která nedokázala správě zobrazit sloupce vytvořené pomocí boxů a CSS už nemám a IE6, který měl problém s float boxy (IE's broken float model) už sem hodně dlouho neviděl a konrétní věc, která způsobovala špatně zobrazení, už si opravdu nemapatuju - instalovat IE6, nebo hledat ten telefon už nebudu. :-( To ať raději Petr ZZZ používá CSS a můj příspěvek bere za nepodloženej :-( (což se v podstatě nic nestane, protože tipuju, že by byl nesmysl to překopávat do tabulek, když už se to zobrazuje pomocí CSS) Každopádně se tady nehádám o to, jestli jsou lepší tabulky nebo CSS, sám kvůli správě kódu raději všude, kde to jde, používám CSS, ale na jednoduchý tabulky typu název | hodnota prostě bez jakýhokoliv stylování použiju tabulku - žádný hraní si s CSS, co nejjednoduší kód zobrazitelnej všude. |
||
| H13 Profil |
#23 · Zasláno: 3. 10. 2010, 19:58:28 · Upravil/a: H13
EDIT: tak screenshot, co jsem sem hodil z nový nokie by byl zavádějící, protože jsem to zkoušel nasimulovat tabulkama a výsledek byl podobnej (takže nevypovídající o různosti použití css a tabulky :-( )
|
||
| panther Profil |
#24 · Zasláno: 3. 10. 2010, 20:52:22
H13:
„takže nevypovídající o různosti použití css a tabulk“ jasně, pokud se se styly umí zacházet, dá se s nimi dělat mnohem víc než z tabulkami. Tady jde spíše o nějaké sémantické cítění. I když něco na první pohled jako tabulka vypadat může (dva sloupce), dá se najít sémantičtější řešení než právě tabulka. Tady se mnou možná někdo nebude souhlasit, ale je to tak. Sám jsi řekl, že volíš jednoduchost - tabulku, já jdu druhým směrem - sémantika. Já vím, co chceš říct ty, ty (asi) víš, co chci říct já a tím bych to ukončil (už tak jsme mimo původní téma a ničeho zajímavého se tu asi nedobereme). |
||
| Petr ZZZ Profil |
#25 · Zasláno: 3. 10. 2010, 20:58:12
H13:
Tabulkám se nebráním, ale snažím se jim vyhnout tam, kde umím najít jiné řešení (někde taky mám tabulky z doby, kdy jsem to jinak neuměl, a nechce se mi to předělávat). Tabulka má delší kód, který mi připadne méně přehledný a v konkrétní souvislosti si myslím, že se bez tabulky obejdu. Místo: <table>
<tr>
<td> Carabus arvensis </td>
<td> not common </td>
</tr>
<tr>
<td> Carabus auronitens </td>
<td> common </td>
</tr>
</table>… které je delší o jeden tag, je přehlednější psát <dl>
<dt> Carabus arvensis </dt>
<dd> not common </dd>
<dt> Carabus auronitens </dt>
<dd> common </dd>
</dl>„Jinak ještě bych odstranil text-align:justify; u dl.“ Dík za tip, dobrý nápad. Potřebuji sice blok v jiném seznamu, ale do třídy .dlf jsem přidal text-align:left; (což přebije justify zapsané předtím pro všechny dl). Dík taky za screen z Nokie. Připadá mi, že vůbec zrušila moje CSS a zobrazuje to jak ji napadne (modré odkazy atd.). Jsem ale se zobrazením spokojen, důležité je, že "hodnota" je přiřazena správnému "názvu" a že to mobil vůbec zkousne.
|
||
|
Časová prodleva: 14 let
|
|||
0