Autor Zpráva
smiesek
Profil
Poprosila bych o shodnocení a případné vysvětlení, v čem dělám základní chyby, že se to chová tak, jak bych neočekávala.

Pokouším se vytvořit výpis události pomocí beztabulkového layoutu, tedy divu, proto výpis každé události nevkládám do table, ale snažím se to nastylovat pomocí divu.
Přikládám živou ukázku, ze které je vidět následující, za předpokladu, že je menší rozlišení stránky než 50%.:
a) odskočení ikony v div ikona
b) první div v divu detail udalosti, tedy nadpis přesahuje do div hlavicka
c) určitě tam jsou zbytečné v divu detail události tagy pro odstavce <p> ale pokud je odstraním, vše se mi nalepí na sebe

pozn. to černé vytažení tam mám pouze pro "ladění", abych viděla/bylo vidět, jak se to chová.

To jsou asi tři základní úskalí, které mě trápí a snažím se vyřešit, třeba jich najdete více, uvítám připomínky.

Nejde mi nyní tak o přepracování a vytvoření/vložení správného řešení z vaší strany, spíše o názory a rady, proč to nemůže být použito tak či onak, a proč se to tak chová a pokusila bych se to přepracovat.

Je třeba možné, že v konečném důsledku mi to sesunete ze stolu a doporučíte to opravdu udělat formou tabulky, ale jelikož se nejedná pouze o data textová, ale jsou tam použity i obrázky, jsou to pojala jako formu div - zase můžu mít blbé odůvodnění.
mimochodec
Profil
Vidím jen jednu konkrétní otázku - odskočení obrázku. To je způsobeno tím, že div .nazev_akce je tak široký, že ten obrázek už se nevejde. Jestli má obrázek být nahoře, stačí .nazev_akce zúžit.

Jinak ty ostatní chybky vyplývají z toho, jak se tam různě navzájem kompenzují ty marginy a paddingy. Doporučoval bych všechny vynulovat a začít znovu. Ne že by tam bylo něco špatně, ale připadá mi to jako nejjednodušší cesta.

Struktura html je v pohodě, jen k tomuto:

<div class="nazev_akce">Název</div>  // Když je to název, použil bych pro to nějaký nadpis. 
<div class="ikona"><img src="no-img.png"></div> // Není ten div zbytečný? Pokud nebude mít jiný účel než ten float, tak je - float se dá nastavit i obrázku.
..
<p><div class="nadpis">Místo</div>Lokalita</p> // div nepatří do p. A nadpisy mají tag <h1> - <h6>
smiesek
Profil
mimochodec:
stačí .nazev_akce zúžit
pokud to mám přes celou šířku monitoru, ten obrázek je nahoře, ale právě pokud si zmenším okno prohlížeče, tak to takhle divně odskočí

Jinak ty ostatní chybky vyplývají z toho, jak se tam různě navzájem kompenzují ty marginy a paddingy
předpokládám, že vhodnou úpravou, jak se budu o ni pokoušet bych měla odstranit i to zasahování do hlavičky při prvním použití divu nadpis v mém případě Místo

div nepatří do p
a p do divu patří? Právě jsem to tam nechala takhle otrocky, dalo by se to ještě více sprasit na <br /><br />, aby se mi to oddělilo jednotlivé divy, jinak by to bylo na sobě nalepené

nějaký nadpis“ „A nadpisy mají tag
určitě s tém vším souhlasím, ale spíše je to moje chyba pouze nevhodně zvoleného pojmenování class, neboť na stránce už využívám tagy <h1>-<h3> a jelikož tohle má být univerzální šablona na výpis údajů z DB, pokud se nepletu, tak na stránce má být právě pouze jednou použito tagy pro nadpisy.
mimochodec
Profil
smiesek:
ale právě pokud si zmenším okno prohlížeče, tak to takhle divně odskočí
Pod určitou šířku je těch 100 % mínus 65 % (.nazev_akce) mínus 10 % (.datum_cas) pro ten obrázek prostě málo.

předpokládám, že vhodnou úpravou, jak se budu o ni pokoušet bych měla odstranit i to zasahování do hlavičky
Určitě.

a p do divu patří?
Obecně ano. V tomto případě bych to ale udělal takto:

<div class="detail_udalosti">
<h3>Místo</h3>
<p>Brno, Královo pole</p>

<h3>Účastníci</h3>
<p>Jméno, Druhé, Třetí</p>

<p>text o akci</p>
</div>

Nebo mě ještě napadá použít dd / dt ... Definice: zapomenuté tagy - ale možná mi to někdo rozmluví.

pokud se nepletu, tak na stránce má být právě pouze jednou použito tagy pro nadpisy.
Mezi řidiči kodéry koluje řada mýtů a polopravd. Ta o jen jednom nadpisu na stránce patří k nejoblíbenejším.
anonymníí
Profil *
smiesek:
Základní chybou je absence znalosti sémantiky, jsou i jiné a hezčí značky než divy.

1. akcí bude na stránce asi více, předpokládám tedy jejich seznam. Seznam.
2. tvůj bod a) "odskočení ikony" je způsobeno tím, že v místě, kde si ji přeješ, je už "Název" (ač text je krátký, element je všude, zkus .nazev_akce {background: red;})
3. float v kombinaci se šířkou 100% nedává většinou smysl, začátečníkovi prakticky nikdy
4. tvůj bod c): odstavce jsou správně, pokud něco přebývá, tak ten div.
5. deklarovt šířku 10% boxíku s datem je nesmysl, na rozlišení 1280x___ se mi na tvé ukázce do vyhrazeného prostoru nevleze Listopad.
6. <p><div class="nadpis">Místo</div>Lokalita</p> nefunguje tak, jak myslíš, výsledné HTML je jiné, než zamýšlíš.

Celý kód bych viděl asi takto (za předpokladu výpisu akcí, jinak by #events mohl být div)

<ul id="events">
    <li>
        <span class="date">
            8 červen
            <span>9:00</span>
        </span>

        <h2>Nazev akce</h2>
        <img src="">

        <h3>Misto</h3>
        <p>Lokalita</p>

        <h3>Ucastnici</h3>
        <p>Jmena, Jmena, ... (pokud seznam pod sebe, tak v UL/LI)</p>

        <h3>Popis udalosti</h3>
        <p>popis udalosti</p>
    </li>

    <li>
        ...
    </li>
</ul>
smiesek
Profil
dobře děkuju za připomínky a zkusím nějak přepracovat a pak dát ke zhodnocení, ale k oboum všeobecně...

Detail události
Pokud tedy použiju tagy <h> a <p>, tak mi právě mezi tím vznikne velká mezera, stejně tak jako nyní si nejsem jistá tím, jak mohu dále stylovat a nebo jak správně zapsat do CSS požadovaný vzhled výpisu, předpokládám, že při použití:
.<p> nebo .<h> nebude správné, protože takhle se mi obarví všechny použité tagy na stránce, nebo postačí např to dělat následujícím způsobem .detail_udalosti .p event .detail_udalosti .h ... bude to v tomto případě správné? Právě pomocí těch div class jsem si takhle pomáhala a nepletla, co a jak mohu kombinovat, abych to nastylovala do požadované podoby.

Hlavička události
Obarvila jsem si to na červeno, ale při svém rozlišení to mám OK, ale jakmile si to zmenším, tak ta ikona odskočí a to je to co řeším a nedokážu vidět, v čem je problém. Stejně tak jako jsem si to testovala s tím dlouhým názvem měsíce a při svém rozlišení to mám OK, proto jsem zvolila výšku. Ani v tomto případě tedy netuším, jakým směrem se vydat, aby i při menším rozlišení zůstalo požadované zobrazení. Odkama mám začít s úpravou v tomto případě? Určitě změna pouze šířky v % není správné řešení.
anonymníí
Profil *
smiesek:
Pozor na ty tečky, patří jen před třídy, nikoliv tagy.

CSS umí zaměřovat kontextově, čili:
h3 {...} /* vsechny h3 na webu */
.akce h3 {...} /* h3 v cemkoliv s class=akce */

Co se toho odskoku týče, pořád tam není dostatek místa. Nech prostor pro nadpis fluidní (bez nastaveného rozměru), podívej se na toto... https://jsfiddle.net/0g0tzvuz/

Datum i obrázek mají pevný rozměr, nadpis si bere zbytek a přizpůsobuje se v délce. O nic se starat nemusíš.
mimochodec
Profil
anonymníí:
h3 {...} /* vsechny h3 na webu */

Na stránce.
anonymníí
Profil *
mimochodec:
Nemmmyslím, že je třeb slovíčkařit. Myslel jsem na webu, většina webů má ten externí stylopis linkován všude.

Nicméně nesouvisí s tématem, prosím smazat.

Moderátor juriad: Myslím, že je to již zamluveno, a navíc smiesek je za slovíčkaření ráda.
mimochodec
Profil
To nebylo slovíčkaření. Vzhledem k tomu, že smiesek se nejeví jako zrovna odborník na používání css (viz text o .<p>), riziko nepochopení textu "vsechny h3 na webu" bych nepodceňoval. Ať to tady někdo klidně maže, ale ať zároveň s tím opraví ten tvůj komentář.
smiesek
Profil
raději vše psát jako pro osli a nebrat si mezi sebou slovíčkaření jako peskování ;)
Když mi hold někdo řekne skoč, tak skočím, což o to, že zrovna jede vlak :)

Jinak se tedy snažím postupně upravovat a mazat zbytečnosti, abych to co nejvíce zjednodušila - > tak zatím v jaké jsem fázi: http://kod.djpw.cz/zdpb

a připomínky a doporučení, či rady jsou vítány
mimochodec
Profil
smiesek:
Nevím, jaký bude skutečný obsah, ale připadalo by mi příjemnější, kdyby obrázek nebyl vpravo od toho červeného divu, ale byl v něm - ten div by se roztáhl až doprava a text by ten obrázek obtékal, tzn. pod obrázkem by byl až ke kraji.
anonymníí
Profil *
mimochodec:
Může ho obtékat i při současném HTML, netřeba s obrázkem hýbat.

Vzhledem k tomu, že to červené nebude div, ale nadpis, obrázek vně je IMHO lepším řešením, než uvnitř nadpisu. Technicky i sémanticky jde obrázek do nadpisu umístit, pocitově mi tam v tomto případě nesedí (na 99%, zbylé procento nechám reálnému obsahu, ale asi názor nezměním).
smiesek
Profil
mimochodec:
text by ten obrázek obtékal
ono ten obrázek ve skutečnosti má jen sloužit spíše jako ikona té události, tedy jak máš návrh na obtékání, by se spíše hodilo pro formu třeba článku, proto jsem to chtěla i pojat tak, a měla představu o tom, že jsem si to rozvrhla, že:
A) hlavička = první řádek - bude 3sloupcová, kdy první sloupec bude obsahovat údaje o události, tedy datum a čas, druhý sloupec bude obsahovat název události a třetí sloupec bude mít obrázek-ikonu akce
B) detail = druhý řádek - bude jednosloupcový (pomyslné spojení sloupců) a bude obsahovat zbývající údaje k události

Proto i takové oslí selektování a použití divů, kdy pomocí tagu tabulek bych to naklikala jako <table><tr><td>, ale právě pak při použití divů mám někdy problémy, že si to létá kam chce :)

anonymníí:
pocitově mi tam v tomto případě nesedí
chápu správně že jsi na názoru mimochodce ve způsobu použití obrázku/ikony?
anonymníí
Profil *
smiesek:
Pokud je to ikona, patří na pozadí nadpisu (background), nikoliv jako samostatný obrázek.
Pokud je to obrázek (thumbnail u perexu článku), má to být obrázek a ideálně mimo nadpis (tak jsem to prve pochopil, proto jsem ti předhodil toto HTML, z kterého máš vycházet.

Obrázek (img) je možno umístit i do nadpisu, technicky je to proveditelné (<h3>...<img></h3>), ale v tomto případě, kdy máme dlouhý nadpis a obrázek, který obsahuje pravděpodobně totéž, do nadpisu už (pocitově) nepatří. Vedle válčíš s PHP, tam je taky mnoho věcí o pocitech, nuancích (funguje mnoho způsobů, ale jen některé jsou "pocitově" správnější než jiné). A toto je něco podobného. Nuance, kterou já cítím, ale ty zatím ne.
smiesek
Profil
anonymníí:
má to být obrázek a ideálně mimo nadpis
a takhle to mám tedy brát tak, že není mimo nadpis? Myslela jsem, že pokud jej nezahrnu do div class nazev_akce, tak to bude jako samostatný obrázek.
Mám to chápat tak, že by jsi jej tedy vložil do pozadí, ale umístění by zůstalo stejné?

válčíš s PHP
ano, protože jsem si chtěla vytvořit stránky postavené na php a jiný způsob, než cíl k čemu se dostat a pak tedy šlapat tu cestu, mě nenapadl
anonymníí
Profil *
smiesek:
a takhle to mám tedy brát tak, že není mimo nadpis?
Teď tam hlavně žádný nadpis není. Jen nějaký div.

Čili:
1. je to ikonka, HTML bude jen <h3>Nadpis</h3>, v CSS bude h3 {background ...}
2. je to obrázek, HTML bude tak, jak jsem psal ráno: <h3>nadpis</h3><img src="...">

Jelikož neznám kontext, neporadím, co z toho použít. Obecné rady jsou dávat jen v nějakých případech, v tomto nikoliv.
smiesek
Profil
anonymníí:
žádný nadpis není
takže <div class="nazev_akce"> což já považuju za nadpis, NIKDY nemohu za něj považovat a musí to být vždy pomocí tagů <h>?

No, ono je to vlastně celé o slovíčkaření, já nějak nerozlišuju, jestli jde o ikonku nebo obrázek, hlavně aby se tam zobrazovala nějaká ta "fotka".

Pak tedy když se k tomu vrátím, tak pokud bych to měla rozlišovat, tak co jsem pochopila:
a) ikonka - neobtéká nadpis
b) obrázek - obtéká nadpis

Jinak pak tedy nechápu co se mi snažíš vysvětlit a co je špatně a proč což si myslím že druhá varianta (moje rozlišování a chápání) je zcela blbě.
Tomáš123
Profil
smiesek:
Z tvojho prejavu mám zvláštny pocit. Akoby si sa za každú cenu snažila niečo pochopiť aj keď v tejto kategórii ani veľmi nie je čo. Tu nie je čomu rozumieť na tom, že na nadpisy sa používa tag <hn>. Nemusíš si napríklad vyvodzovať pravidlá z príkladu, ktorý sem dal [#5] anonymníí vyššie. Ja by som to napríklad urobil trochu inak. Ak ti povieme, že si niečo použila zle, stačí ak si to zapamätáš a nabudúce to použiješ lepšie.

NIKDY nemohu za něj považovat a musí to být vždy pomocí tagů <h>?
Áno, na nadpisy sa používa vždy <hn>. Nezáleží na tom, koľko nadpisov na stránke je. Existuje akési (nepísané) pravidlo, že <h1> by mal byť na stránke iba jeden. Ale ak tomu obsah zodpovedá, nie je chybou použiť ich viac.

Nemusíš zozačiatku ovládať všetko na jednotku. Nemusíš písať kódy podľa najstriktnejších noriem. Všetko príde časom. Teš sa na ten moment, keď budeš vyspelejšia a budeš sa smiať na tom, čo si vyvádzala napríklad pred rokom :-).

Inak, čo sa týka zmätku ohľadom ikôn a obrázkov, anonymníí sa snaží povedať to, že v HTML má byť iba obsahová stránka webu. Akákoľvek definícia vzhľadu patrí do CSS. Podobne tak aj ikona slúži na obohatenie vzhľadu, preto je vhodne deklarovať ju pomocou CSS.
anonymii
Profil *
Tomáš123:
Nadpisů muže byt kolik chce, a to i těch prvni úrovně.

Zádné pravidlo, byt nepsané, neexistuje. Nevymyslej si prosím. A nepleť začátečníky.
smiesek
Profil
Tomáš123:
Ak ti povieme, že si niečo použila zle, stačí ak si to zapamätáš
dobrá, beru na vědomí a budu se snažit do budoucna nevymýšlet další hňupiny, typu - červená barva je červená, je to fakt a nehledat v tom pochopení, proč nemůže být modrá.

ikona slúži na obohatenie vzhľadu
pokud tedy budu mít grafickou podobu ikony, třeba button "Přihlásit se", i ten bych měla v tomto případě deklarovat pomocí CSS = > background

což docházím k tomu a vidím logiku a odpověď, co se mi snažil vysvětlit:

anonymníí:
Čili:
1. je to ikonka, HTML bude jen <h3>Nadpis</h3>, v CSS bude h3 {background ...}
2. je to obrázek, HTML bude tak, jak jsem psal ráno: <h3>nadpis</h3><img src="...">

S těma nadpisy, já jsem měl vsugerované, že na stránce:
1. MUSÍ být použité tagy pro značky
2. MOHOU být pouze právě jeden h1, libovolně h2 až ... hn = > hm což zase je odpověď na to, že to tam vlastně nemám a otázka může být PROČ to nepoužívám? Tak už mlčím a jdu měnit.

Děkuju
anonymníí
Profil *
smiesek:
MUSÍ být použité tagy pro značky
Ehm... tagy pro značky? Asi jsi chtěla napsat něco jiného, on totiž (HTML) tag = (HTML) značka.

MOHOU být pouze právě jeden h1, libovolně h2
Počet H1 není v dokumentu (na stránce) omezen. Pokud nepotřebuješ žádný a hodí se ti až h2, použij ten (těch případů mnoho není a ty se s ním asi nesetkáš). Pokud potřebuješ více h1, použij je. Opět otázka, jestli to budeš reálně potřebovat. Ale pravidlo o počtu jednotlivých nadpisů je jen v hlavách některých lidí a neexistuje. Kdyby existovalo, bylo by hloupé.
smiesek
Profil
anonymníí:
napsat něco jiného
ano, oprava = pro nadpisy :)

nepotřebuješ žádný a hodí se ti
já jsem se chtěla pak vyhnout tomu, aby až mě něco praští do hlavy a já budu kod stránek dávat někde přes SEO validátor, aby mě to zase nepeskovalo, že nemám použitý tag např. h1, ale zase vím, že mi napíšeš, že validátory alá SEO apod. - někdy méně, znamená více.

Jinak tedy děkuju za spolupráci a určitě ještě tu zavítám s dalším postupným stylováním stránek a o mě uslyšíte ;)
mimochodec
Profil
smiesek:
Zrovna validátor není něco, co by bylo potřeba nějak zohledňovat. Jde spíš o to, že když se člověk dopracuje k poznání, co (a proč) je sémanticky pěkný kód, baví ho pěkný kód dělat. Někomu jinému to je jedno, lepí to jak to jde a ani se nesnaží chápat, že by bylo fajn, aby nadpis byl <h1>nadpis</h1> a ne <div style="font size: 24px">nadpis</div>. Oba ty přístupy můžou dát stejný výsledek, jen jedno z toho je pěkná práce, to druhé diletantství.
smiesek
Profil
mimochodec:
ani se nesnaží chápat, že by bylo fajn
děkuju za názor a budu se snažit být ve všech případech člověkem, kterému to jedno není a snažit se dopracovat alespoň k menší seberealizaci a použitelnosti.
Trejpa
Profil
smiesek:
já budu kod stránek dávat někde přes SEO validátor
Aby ti vykradl texty, zaměřil se na tebou zadaná konkrétní klíčová slova a umístil se tak ve vyhledávání před tebou? Do takových služeb ještě někdo vkládá své stránky dobrovolně?

Vtipné pak je, když se web jednoho SEO automatu nechá analyzovat jiným. Proč nejsou i v jiných automatech 100% úspěšní? Proč má jejich automat obvykle zakázáno hodnotit sám sebe? Třeba to nejsou takoví machři, jak tvrdí.
smiesek
Profil
snad tedy se nebudete zlobit, když se zeptám jakým způsobem se to řeší, tedy spíše jak bych to já řešila a zdali je to takhle přípustné a dělá se to tak a nebo je na to jiný způsob. Raději se zeptám, než začnu něco zase vyvádět.

Jde tedy o umístění nadpisů (tagy h).

Všeobecně pokud se použije tag hn má to svou velikost, dle čísla 1-5.

Pokud bych ráda na každou stránku dala umístila nadpisy, určitě je budu chtít i vhodným způsobem stylovat, ano stylují se pomocí
h1 {}

Ale jde mi nyní o to, že ne každou vlastnost, kterou do tagu h1 v css vložím mi bude pasovat do dané podstránky.
Jakým tedy způsobem se v tomto případě pracuje se stylováním jednotlivých tagů pro nadpis?

Já bych to tedy udělala opět pomocí svých oblíbených divů, tedy třeba - příklady 2 varianty A) a B)
A)
<div class="obsah"><h1></h1></div>

.obsah h1 {}

B)
<class="obsah"><div class="udalost"><h1></h1></udalost></obsah>

.obsah .udalost h1 {}

Je tento postup a zápis správný a nebo se to dělá/vy to děláte jiným způsobem?

Nebo mám jít zrovna do tagu - viz.
<class="obsah"><div class="udalost"><h1 class="nadpis"></h1></udalost></obsah>

.nadpis {}
Tomáš123
Profil
smiesek:
Všeobecně pokud se použije tag hn má to svou velikost, dle čísla 1-5.
1-6.

Já bych to tedy udělala opět pomocí svých oblíbených divů, tedy třeba
Ja by som skôr využil ostatných úrovní nadpisov. Ale samozrejme, je správne využívať tried na definovanie rôzneho vzhľadu. Iba väčšinou nebudeš mať nadpis uzavretý tak ako ukazuješ.
Skôr to bude niečo takéto:
<div class="obsah">
  <h1>Nejaký nadpis</h1>
  <p>Nejaký text prípadne iný obsah</p>
  <div class="udalost">
    <h2>Ak je nadpis podnadpisom, použijeme ďalšiu úroveň</h2>
    <p>Obsah súvisiaci s podnadpisom</p>
  </div>
</div>
Neviem si celkom dobre predstaviť, kedy by bolo potrebné toľko tried okolo jedného nadpisu. Predsa, keď robíš web, zachovávaš nejakú rovnorodosť obsahu. Nepotrebuješ pre nadpis každej úrovne v každom <dive> rôzne vlastnosti.

Skôr pôjde o definovanie bežného vzhľadu:
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

nasledované prípadnými výnimkami:
h1.obsah.nazov {}*

*Taký selektor zameria prvok <h1> s triedami obsah aj nazov súčasne. V HTML to vyzerá takto: <h1 class="obsah nazov"></h1>. Je jedno v akom poradí sú triedy definované, význam sa nemení. Viacero tried zapíšeš použitím medzery medzi názvami. Pozor ale na to, že napríklad toto: <h1 class="obsah" class="nazov"> je neplatné a trieda nazov akoby ani neexistovala.
mimochodec
Profil
smiesek:
Je dobré ctít nějakou hierarchii. Stránka většinou mívá jeden hlavní nadpis, pro ten se použije h1, nadpisy odstavců pak h2, h3. A teď pozor - to vše bývá v jednom divu, další pak jsou po straně. Takže tvoje varianta A je správná, B1 taky - pokud je vhodné jednotlivé události oddělovat. B2 je špatně.

V postranním sloupci můžeš mít opět h1, 2, 3 a stylovat pomocí .postranni h1 {}. Já beru tu h1 jako něco trochu exkluzivního, co by mělo stejně jako title stránky vystihovat, o čem stránka je, takže v .postranni začínám někdy na h2, někdy na h3, ale jde jen o pocit.
smiesek
Profil
super, děkuju za vyjádření oboum, beru na vědomí :)

jinak koukám na tu svou B2 a to jsem úplně zpackala, ani pořádně jsem neukončila jednotlivé tagy :/

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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