Autor Zpráva
xlifer
Profil
Mám článek s obrázky, které chci umístit vždy pod odstavec centrované na střed. Můžu to napsat takto pomocí align=center nebo je nějaké lepší řešení? Jde mi o to, zda to není vyloženě špatně zase. Omlouvám se za stále dotazy, ale stále se holt učím :-)

<p>
Text odstavec 1
</p>

<p align="center">
<img src=obrazek...>
</p>

<p>
Text odstavec 2
</p>
Trejpa
Profil
xlifer:
Můžu to napsat takto pomocí align=center
Můžeš. Nebo si vytvoř třídu do stylů.
jenikkozak
Profil
Dal bych ten obrázek samostatně. Nevnímám jako „správné“, aby odstavec obsahoval pouze obrázek.
Trejpa
Profil
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>.
xlifer
Profil
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>.
Přesně tak, o to mi právě jde.
jenikkozak
Profil
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>. :-)
xlifer
Profil
jenikkozak:
Když ho nedáš do odstavce, můžeš vynechat i <p>. :-)
Ale pak musíš pořešit centrování a odsazení jinak, takže by se ušetřené <p> míjelo účinkem :-)
jenikkozak
Profil
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.
Bubák
Profil
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.
Trejpa
Profil
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:
<p>První odstavec
<p>Druhý odstavec
<img src=obrazek-na-stredu.png>
<p>Další odstavec
jenikkozak
Profil
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.
Trejpa
Profil
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.
jenikkozak
Profil
Mezi následujícími příklady vidím rozdíl:
<p>Text odstavce
  <img>
  <!--Obrázek, který se (podle mě nedokonalostí HTML) připojil k předchozímu odstavci. Je mi to fuk, protože ho stejně budu brát jako blok.-->

2. příklad:
<p>Text odstavce
<p class="odstavec_pro_formatovani_obrazku">
  <img>
  <!--Značka p, která tu podle mě nemá co dělat, má totiž jiný význam-->
Trejpa
Profil
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)
<p>Text odstavce
<p align=center><img src=velky-obrazek.png>
<p>Další odstavec

2)
<p>Text <img src=smajlik-v-textu.png> odstavce
<p>Další odstavec

3)
<p>Text <img src=doprovodny-obrazek.png align=right hspace=10> odstavce
<p>Další odstavec

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.
Tomáš123
Profil
xlifer:
A čo tak použiť v CSS selektor podobný tomuto:
(Syntax) .obalovaci-element > img {...vlastnosti...}

Konkrétne:
div.moj-obalovany-element > img {
  text-align: center;
}


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?
Trejpa
Profil
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.
Tomáš123
Profil
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é.
Trejpa
Profil
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í.
Tomáš123
Profil
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.
Bubák
Profil
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.
Trejpa
Profil
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.
jenikkozak
Profil
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ě.
Tomáš123
Profil
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. :-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: