Popisek pod obrázkem

[belier]

Zdravím,

omlouvám se za asi celkem banální dotaz, ale bojuju s tím celé ráno, googlím, ale nedaří se mi to rozchodit.

mám článek u kterého je obrázek zarovnaný doprava.

Kód: Vybrat vše

<img src="/getattachment/0101165b-c735-4db6-b560-0dd5877533da/mk1.jpg.aspx?width=600&height=450" style="margin-top: 30px; margin-left: 35px; margin-bottom: 40px; width: 600px; height: 450px; float: right;" title="Na rybách..." /><br />

Potřeboval bych co nejjednodušeji přidat pod tento obrázek textový popisek. Peru se s různýma divama, ale nedaří se mi. Napadá vás nějaké jednoduché řešení? Díky

[Myloš]

Obrázek uzavři do odstavce (<p>), kterému nastavíš pevné rozměry o velikosti obrázku plus místo na popisek.
Namísto obrázku floatuj celý odstavec.
Chceš-li popisek pod obrázkem vycentrovaný, ve vlastnostech tohoto konkrétního odstavce přidej text-align: center.

Ukázku – sice bez floatování, ale jinak jde o klikací náhledy s popisky – mám na Swebu: http://kesolim.sweb.cz/fotky_branik/ (původně to bylo bez té reklamy, tu si tam vymyslel server).

Místo <p> samozřejmě můžeš použít <div> – odstavec jsem dal jako příklad; div totiž nenese žádný sémantický význam, proto se divům (a spanům) vyhýbám, pokud pro daný prvek na stránce existuje značka, která sémanticky vyhovuje obsahu. Pokud by tě zajímalo pár informací k sémantice webu, vřele tvé pozornosti doporučuji http://www.semantika.name/.

[belier]

Super, povedlo se, díky moc. Jednoduché a funkční

[Myloš]

Rádo se stalo – teď jsem se ještě podíval, ty odstavce ve skutečnosti také floatuji (v přilinkovaném CSS).
Je-li to všechno, klikni u příspěvku s odpovědí na zelenou „fajfku“ vyřešeno.