Popisek pod obrázkem Vyřešeno

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Uživatelský avatar
belier
Level 1
Level 1
Příspěvky: 98
Registrován: únor 11
Bydliště: R.p.R
Pohlaví: Muž
Stav:
Offline
Kontakt:

Popisek pod obrázkem

Příspěvekod belier » 21 črc 2014 09:40

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&amp;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

Reklama
Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6991
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Popisek pod obrázkem  Vyřešeno

Příspěvekod Myloš » 21 črc 2014 10:30

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/.
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)

Uživatelský avatar
belier
Level 1
Level 1
Příspěvky: 98
Registrován: únor 11
Bydliště: R.p.R
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Popisek pod obrázkem

Příspěvekod belier » 21 črc 2014 10:47

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

Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6991
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Popisek pod obrázkem

Příspěvekod Myloš » 21 črc 2014 10:54

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.
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)


Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 4 hosti