Způsob vložení obrázku na střed v odstavci

xlifer:
„Můžu to napsat takto pomocí align=center“
Můžeš. Nebo si vytvoř třídu do stylů.

Dal bych ten obrázek samostatně. Nevnímám jako „správné“, aby odstavec obsahoval pouze obrázek.

jenikkozak:
S obrázkem v odstavci se mi lépe pracuje. Bude mít stejné odsazení jako ostatní odstavce a můžu vynechávat </p>.

Trejpa:
„S obrázkem v odstavci se mi lépe pracuje. Bude mít stejné odsazení jako ostatní odstavce a můžu vynechávat </p>“
Když ho nedáš do odstavce, můžeš vynechat i <p>. :-)

Nemíjelo. Vlastnosti obrázku nastavím jednou ve stylopisu. Nebudu muset do spousty HTML dokumentů vkládat před každý obrázek značku odstavce, která tam podle mě nemá co dělat, protože to odstavec není. Jinak bych vnímal třeba obrázkovou iniciálu, smajlíka či drobnou ilustraci v textu. Ale samostatný obrázek zarovnaný na střed není obsahem, který by měl být vymezen jako odstavec.

xlifer:
„Ale pak musíš pořešit centrování a odsazení jinak“
To přece není problém. Jedna z možností je deklarovat obrázku display: block; a vycentovat pomocí margin: auto; Padding, horní dolní margin lze nastavit podle potřeby.

Bubák:
„Jedna z možností je deklarovat obrázku display: block;“
Jenže ho pak musíš odlišit třídou nebo ID, aby ti to neměnilo „obyčejné“ obrázky vložené přímo do textu. U obrázku v samostatném odstavci to řešit nemusím, klidně jich můžu mít vedle sebe zarovnané na střed i více.

jenikkozak:
„Když ho nedáš do odstavce, můžeš vynechat i <p>. :-)“
Vysvětli, prosím, jak odstraněním nějaké značky <p> nedám obrázek do odstavce:

Trejpa:
Psal jsem o samostatném obrázku v odstavci. O elementu, ve kterém kromě obrázku nic jiného není.

„U obrázku v samostatném odstavci to řešit nemusím, klidně jich můžu mít vedle sebe zarovnané na střed i více.“
Tím už trochu měníš zadání. Pak se dá předpokládat, že k těm více obrázkům budeš chtít připojit popisky. Takový blok bych raději obalil <div>em a jednotlivé popisky, které se mohou skládat z několika vět, vložil právě do odstavce.

jenikkozak:
„Psal jsem o samostatném obrázku v odstavci.“
Když mu seberu značku <p>, dostane se zase do odstavce. Předchozího. Pořád se jedná o obrázek v odstavci.

Mezi následujícími příklady vidím rozdíl:

2. příklad:

jenikkozak:
Asi se neshodneme. Nechápu, proč by obrázek vedle textu mohl být v odstavci a obrázek bez textu ne.

Pro zajímavost: specifikace HTML 4.01 Strict dokonce vyžadovala, aby veškerý neblokový obsah (tedy i obrázky) byl v nějakém bloku.

To, co ty považuješ za nedokonalost, já považuji za stěžejní přednost.


Takhle obvykle používám obrázky. Jak bys je vyřešil ty ve stejném dokumentu?

1)

2)

3)

Všimni si, že žádnému obrázku nemusím nastavovat třídu a měnit display. Vlastně ve stylech obrázky vůbec neřeším, nanejvýše jim změním vertical-align a případně border.

xlifer:
A čo tak použiť v CSS selektor podobný tomuto:
(Syntax) .obalovaci-element > img {...vlastnosti...}

Konkrétne:


Výhody:
1.) Nemusíš riešiť žiadne okraje. Veď pri objekte zarovnanom na stred by okraje nič nezmenili (ak by neboli obludnej veľkosti).

2.) Vlastnosti sa aplikujú iba na obrázky, ktoré sú potomkom konkrétneho elementu (ak sa použije jedinečná trieda alebo idéčko).

3.) Ušetríš znaky. Čo je menej ako troj, štvorriadková deklarácia?

Tomáš123:
„3.) Ušetríš znaky. Čo je menej ako troj, štvorriadková deklarácia?“
Žádná deklarace.

Mimochodem, pokud na obrázek aplikuješ text-align: center, tak se s obrázkem nic nestane.

Trejpa:
„Mimochodem, pokud na obrázek aplikuješ text-align: center, tak se s obrázkem nic nestane.“
Obrázok je riadkový element, takže sa zarovná na stred. Alebo sa mýlim?

„Žádná deklarace.“
Čo to tu trepeš. V dnešnej dobe sa už CSS používa všade a všade je aj potrebné. Z akého dôvodu sa ideš zastávať škaredého, neprehľadného a nevalídneho spôsobu neukončovania paragrafov. Už viacerí tu napísali dobré riešenia tohto problému resp. otázky, ale ty na každom hľadáš chybu a stále presadzuješ to svoje ničím neodôvodnené a stupidné.

Tomáš123:
„ty na každom hľadáš chybu“
Já nehledám na každém chybu, hledám rozumné objektivní důvody, proč jenikkozak tvrdí, že obrázek nepatří do odstavce. Žádné tu dosud nevidím, ale to mi nevadí, třeba to tak jen subjektivně cítí.

presadzuješ to svoje ničím neodôvodnené a stupidné
Netvrdím, že jiné řešení je špatné. Výše jsem to své odůvodnil výhodami.

„Obrázok je riadkový element, takže sa zarovná na stred. Alebo sa mýlim?“
Mýlíš. Obrázek je inline-block element. Vlastnost text-align lze aplikovat jen na blokové elementy a vystředění se použije na jejich obsah. I kdybys obrázek změnil na blokový, tak stejně nemůže mít obsah. Jedinou rozumnou možnost vodorovného vystředění blokového obrázku stylem zacíleným přímo na něj uvedl jenikkozak, pomocí automatických marginů.

„Z akého dôvodu sa ideš zastávať škaredého, neprehľadného a nevalídneho spôsobu neukončovania paragrafov.“
1) Krása je subjektivní. Mně se líbí kód bez zbytečných značek.
2) Přehlednost je subjektivní. Méně zbytečných značek mi usnadňuje orientaci v obsahu.
3) Automaticky doplňované ukončovací i počáteční značky jsou ve specifikaci. Že jsi ji nečetl, mě nepřekvapuje, ale vyzkoušet by sis to ve validátoru mohl. Nerad bych, aby tě tu někdo, kdo by na každém hledal chyby, obvinil z úmyslného lhaní.
Tohle si přečti, rozšíříš si obzory: Jak funguje HTML.

Otázka na tělo: Děláš v HTML i tabulky? A zapisuješ do nich i značky povinného elementu TBODY, nebo se stejně jako já u odstavců spoléháš na to, že si je tam doplní prohlížeč?

„V dnešnej dobe sa už CSS používa všade a všade je aj potrebné.“
Místo přebírání cizích dogmat přemýšlím. Někde je výhodnější použít styly, jinde zase není.

Trejpa:
„A zapisuješ do nich i značky povinného elementu TBODY“
To sme na to rovnako.

„Že jsi ji nečetl, mě nepřekvapuje, ale vyzkoušet by sis to ve validátoru mohl.“
Vyskúšať som si to mohol :-), ale to že sa niečo robiť nemôže neznamená, že sa to robiť musí. Teda aj keď s tým nemá validátor priamy problém a prehliadač to zvládne, nemalo by sa to zapisovať takýmto spôsobom.

Tomáš123:
„Z akého dôvodu sa ideš zastávať škaredého, neprehľadného a nevalídneho spôsobu neukončovania paragrafov.“
Názor na to, zda je vynechání nepovinné koncové značky odstavce škaredé a nepřehledné, je subjektivní. Pokud píši kód v hloupějším editoru, většinu nepovinných koncových značek vynechávám. Pokud píši v editoru, který doplňuje koncové značky automaticky, tak koncové značky ponechávám.

Vynechání koncové značky odstavce je v naprosté většině případů dovoleno, validátor zezelená, výjimkou je, pokud je odstavec v odkaze.
Přesná formulace je v HTML5 specifikaci.

Trejpa:
„Místo přebírání cizích dogmat přemýšlím.“
Já jsem dospěl k názoru, že (pro mne) je nejlepší psát snadno udržovatelný kód.

Trejpa:
„A zapisuješ do nich i značky povinného elementu TBODY“
Tak to koukám, a budu muset kouknout do HTML 5 specifikace, ještě v HTML 4.01 byly značky pro TBODY nepovinné.
Dodatek, chvíli mi trvalo, než jsem to pochopil (asi únava), element je povinný, značky nikoliv, vše zůstává při starém.

Tomáš123:
„Teda aj keď s tým nemá validátor priamy problém a prehliadač to zvládne“
Prohlížeč zvládne doplňovat nepovinné značky ne proto, že může, ale protože musí. Pravidla doplňování nepovinných HTML značek jsou naprosto přesná a jako kodér se na ně můžeš spolehnout.

„nemalo by sa to zapisovať takýmto spôsobom.“
A důvod? Naučil ses jen malou část HTML a zbytek ti přijde divný?

„To sme na to rovnako.“
Vida, přece máme něco společného. Zkus udělat další krok, vynechat třeba nepovinnou značku <body>.

Bubák:
„výjimkou je, pokud je odstavec v odkaze“
To je výjimka ve specifikaci. Prakticky je to nutné ještě u posledního odstavce ve formuláři kvůli chybě ve (velmi) staré Opeře.

Neprve vysvětlím, proč tak lpím na zachovávání významu odstavců, když mi nevadí, že někdo používá (nebo spíše dříve využíval) elementy s krátkými značkami (<i>, <b> pro vytvoření prázdného prvku, aby pak třeba mohl nějakému objektu přiřadit více obrázkových pozadí.
Důvod je zřejmě ten, že sám odstavce využívám při zpracovávání textů. Odstavec je jedním z horizontálních členění textu. Přímo volá po tom, aby se při editacích textů zobrazoval WYSIWYG editor pouze okolo jednoho odstavce. Aby se odstavce ukládaly samostatně - pak je totiž můžeš na stránce rozházet podle konkrétního designu. Můžeš pak třeba mezi ně automaticky vkládat přiložené obrázky nebo třeba reklamu. V databázi se také lépe pracuje se zálohami jednotlivých odstavců než s desítkou různých verzí stejného článku, které se liší jen pár znaky.

Obrázky u textů dělím do dvou skupin:
- obrázky vložené do textu. Jedná se o iniciály, smajlíky či ikonky. Mají v textu konkrétní místo, které se nemůže změnit, protože by text ztratil původní smysl.
- velké obrázky, ilustrace, mapy, grafy atd. U nich je jedno, zda je vložíš na začátek věty, doprostřed nebo na konec. Nemají určitou pozici, jejíž změnou by se něco změnilo. Nejsou součástí textu, pouze jeho přílohou. Většinou ani nejsou spjaté s konkrétním odstavcem. Na širším monitoru je necháš plavat u strany, na užším je asi umístíš mezi odstavce – budeš s nimi pracovat nezávisle na toku písmen. Tyto prvky se mnohdy řadí do horizontálního členění textu, stejně jako kapitoly, nadpisy, pretext atd. Kdyby v HTML šly do odstavce vložit nadpisy bylo by mi to divné úplně stejně. Podle mého názoru by tyto prvky správně do odstavce vložit neměly jít.

Trejpa:
„Takhle obvykle používám obrázky. Jak bys je vyřešil ty ve stejném dokumentu?“
Velké obrázky bych v databázi vůbec nepřechovával společně s textem dokumentu, takže s podobnou strukturou bych vůbec nepracoval. Nebyl by pro mě problém je přizpůsobit jakékoliv struktuře HTML. Obalů bych si tam mohl přidat libovolně.

Trejpa:
„A důvod? Naučil ses jen malou část HTML a zbytek ti přijde divný?“
Nikdy som netrávil čas za HTML knižkou a niečo sa byflil. Hrám sa na kódera preto, lebo ma to baví...Nie je to moja povinnosť. Tak ma prosím neposudzuj ako nejakého šprta v okuliaroch, ktorý sa nenaučil látku z biológie naspamäť a preto dostal päťku.

A dôvod? Mám rád keď sa robia veci poriadne. Svoje kódy píšem čisto (aspoň sa snažím) a aj keď nájdem chybu nemusím sa dlho nútiť celé to prerobiť. Často ani nejdem spať, kým nie som s výsledkom úplne spokojný.

To celé iba pre vysvetlenie. :-)