ugrás a tartalomhoz

Képaláírás HTML elem?

Anonymous · 2006. Ápr. 12. (Sze), 09.11
Hogyan kell helyesen kódolni HTML-ben a képaláírásokat? Van erre valami elem, mint pl. a táblázatok címére? Köszi.
‹ h1 odaragad divhez ff alatt Tidy problema, tidy konfig, vagy kikapcsolás? ›
 ■
1

Úgy tudom nincs

Török Gábor · 2006. Ápr. 12. (Sze), 10.36
Szerintem külön elem erre nincs. Adj meg ALT és TITLE attributumokat, opciónálisan LONGDESC-et, így biztosítod, hogy bárki is vizslassa azt a képet, el tudja érni (keresők, akadállyal élők, buta böngészők stb.). Mindezek mellett folyószövegként még a kép mellé csatolhatsz egy képaláírást.
2

DL?

attlad · 2006. Ápr. 12. (Sze), 11.01

<dl>
  <dt><img alt="Ami a képen van"></dt>
  <dd>Megjegyzés</dd>
</dl>
3

Szélesség

Anonymous · 2006. Ápr. 12. (Sze), 12.38
A sima képaláírással (p class="kepalairas") az a gond, hogy ha pl. szövegbe kell beillesztenem float-olt képet, akkor a p-re is meg kell adnom ugyanakkora szélességet, mint amekkora az img -- különben ki fog lógni a képaláírás a szövegbe. Ami ciki, ha 30 féle méretű képpel dolgozom -- mindegyikhez külön képaláírás-stílust kéne megadni.

Ezt a definíciós lista sem oldja meg, mert a dl szélessége a nagyobbik gyermek szélességével lesz egyenlő. Szerintem nincs olyan megoldás, amivel megmondhatnám a dl-nek, hogy a dt szélességére cuppanjon rá, még akkor is, ha a dd a szélesebb.

Ha nincs más ötlet, akkor maradok a p class="kepalairas" megoldásnál, és a túl hosszú aláírás sorokat br elemmel töröm rövidre. Csúnya, de ez van...:(

Köszi a hozzászólásokat.

Edit
4

Szélesség

attlad · 2006. Ápr. 12. (Sze), 13.00
Honnan tudod hova kell rakni a BR elemeket? A DL-nek adhatsz automatikusan szélességet, amit a kép szélességéből kaphatsz meg. Ez remekül automatizálható, nincs pluszmunka meg BR. A DL-es megoldásnak az is előnye, hogy egyben tudod kezelni a képet a szöveggel.
5

?

Anonymous · 2006. Ápr. 12. (Sze), 13.05
Hogyan adok a DL-nek automatikusan szélességet a kép szélességéből?
6

Szerver oldalon

attlad · 2006. Ápr. 12. (Sze), 13.15
Amikor előállítod az oldalt szerver oldalon, akkor a kép szélességétől függően beállítasz egy stílust a DL-nek, meg persze az IMG-nek is meg kell adni a WIDTH és a HEIGHT paramétereket. A kép mérete jöhet adatbázisból vagy a képfájl alapján meghatározható.

A P megoldásnak mi az előnye a DL-hez képest?
7

Fapad

Anonymous · 2006. Ápr. 12. (Sze), 13.33
Pont azt szerettem volna elkerülni, hogy méricskélni kelljen képfájlt, stb. Reméltem, hogy ezt valahogy automatice kezelik a böngészők -- végtére is elég fontos dologról van szó...:(

Tehát csak valami fapados HTML megoldást szerettem volna. Egyébként fura, hogy táblázathoz van caption, képhez viszont nincs.

A BR elemeket saciometrikus módszerrel illesztem be a P szövegbe...:) Előnye nem sok, talán kevesebb a kód. A DD-t is meg kell törni, ha nem adok meg neki szélességet.

E.
11

Kezelik

attlad · 2006. Ápr. 12. (Sze), 14.25
Kezelik a böngészők mivel megjelenítik a TITLE szöveget ha fölé viszed az egeret. A te gondod, hogy nem úgy viselkednek alapból, ahogy akarod. A viselkedést JavaScript segítségével tudod megváltoztatni. Vagy azt is lehet írni hogy nem úgy jelenítik meg, a megjelenítést a CSS-sel lehet befolyásolni amit Jano írt. De ettől függetlenül kezelik.
8

Egy elemű lista?

Jano · 2006. Ápr. 12. (Sze), 13.43
Egy 1 darabból álló felsorolás nem igazán lista (description list). Másrészt mi van akkor ha ugyanazon a helyen egy nem aláirásos kép szerepel mondjuk egy másik cikkben?

Szemantikusság szempontjából egyszerűen az img alt és title (esetleg longdesc) paramétereit kell kitölteni majd ezt CSS-ben az :after/:before pszeudó elemekkel és a content tulajdonsággal megjeleníteni.

W3 ajánlás is ezt hozza példának: The 'content' property

IMG:before { content: attr(alt) }
Persze ez IE-ben nem megy, de ez vajon jeleni-e azt, hogy dt-dd listát eröltessünk jelölésként, ahol a dt-ben levő img elemnek a title paraméterének tartalmát fogjuk ugyis megismételni a dd elemben, redundanciát okozva ezzel a kódban.

Mások véleménye:
SimpleQuiz › Part XI › Image Floating
9

Mi a megoldás?

attlad · 2006. Ápr. 12. (Sze), 14.04
A CSS before-after megoldás IE miatt nem játszik. Ha nem DL, akkor mit írnál helyette kódot?

Válaszok:
Ha aláírás nélküli a kép, akkor simán P elembe rakom.

Ha aláírásos a kép akkor is P elembe rakom és kap egy TITLE paramétert, csak egy "kimeneti filter" alakítja át DL listává -> bármikor visszaválthatok a szemantikusabb megoldásra.

Redundancia: ez valóban zavaró, de ha DD-be kerül a leírás, akkor az IMG-ből esetleg elhagyható a TITLE.

Egy újabb lehetőség lehet az is, hogy simán IMG és TITLE paraméter CSS before-after és IE esetén egy JavaScript gondoskodik a megjelenítésről. (JS függő.)
10

Ezek közül mindenki választhat

Jano · 2006. Ápr. 12. (Sze), 14.17
Mivel tökeletes megoldás nincs, mindenki egyénileg eldöntheti ezek közül ő személyszerint miben köt kompromisszumot. Mindössze annyit szerettem volna elérni, hogy a DL listas megoldas ne úgy szerepeljen itt mint ami az altalanosan elfogadott best-practice.