::after Prvek mimo div – HTML / XHTML – Fórum – Programujte.com

Připojen obrázek.

Snažím se nakódovat takovou to sipku mimo div. Bohuzel se mi to nedari. Nechci aby by tam byl viditelny div a pozicovat chtel bych to presne tak jako je na serveru sledujufilmy.cz po zadani textu do searchboxu vyjede div a smerovka zasahuje do search boxu. Jak toto vytvorim?

Děkuji

::before a ::after jsou určené k jiným věcem (ikonky k odkazům, teoreticky jednotky nebo měna za číslem), rozhodně nejsou určeny k vytváření takových věcí, jak to bohužel někde vídávám. Aby byl design postavený tak, že snad každý element má ::before a ::after.. :D To je dle mého prasárna.

Tvůj případ je velmi jednoduchý, stačí použít obalový div a šipku vycentrovat. => https://jsfiddle.net/c68psbph/

Nechceš div a pozicovat? A ten ::after tam napozicovaný není?

#1 Row
Otevři si zdrojový kód jejich stránky, však je to tam napsané, jak to udělali.

#3 ondrej39
z toho kódu jsem moc moudrý nebyl.

After, before se chovalo ve starych prohlizecich dost nevyzpytatelne. Doporucuji pouzit normalne div a nastavit mu obrazek pozadi.
Nekdy se pridal dalsi prvek vne. Nekdy se nepridalo nic (IE). Nekdy se pridal prvek dovnitr.
Nekdy je to inline a treba ho zmenit na inline-block nebo block, nastavit rozmery.
Nekdy je nutne pridat content:"", i prazdny, jinak se prvek nezobrazi.

Ja bych do toho nesel a pridal si radeji javascriptem dalsi divko nebo presunul divko. Nebo prekreslil nejaky obrazek, background-image za jiny.

Tomáš123
Souhlasim, ze bych to pouzil presne pro tyhle kosmeticke upravy. Tak, jako to pouzivam pro predelani odrazek na sipecky pro pathbar.
http://www.slu.cz/…z/o-fakulte/
Nacházíte se zde: Fakulta > O fakultě

Tusim jsem problem treba stylovat odrazky v IE. Ale mezitim se mohla situace zmenit. Konkretne ti ale nereknu, oc presne uz slo. Tusim nejake pozicovani nebo mozna obrazek na pozadi a IE si to zobrazilo jinde nebo vubec. Zkratka doporucuji testnout vsechny prohlizece a v pripade neresitelnych problemu pouzit radeji divko i za tu cenu, ze bude v html navic.
Ostatne, tudle jsem provadel pokusy, kdy jsem cely layout s menu, zahlavim a pod doplnoval pomoci js. Cili, cela stranka v podstate byla jen clanek a tag script. Nic vic. Nevyhoda bylo takove preblikavani a posunovani nez si js nacetl css, obrazky a dalsi veci. Takze, v dalsi fazi mam v planu nacpat vsechno do js i obrazky pres base64.

Elementy DIV a SPAN jsou právě určeny ke grafickým věcem. Nemají žádný sémantický význam, takže tvrzení, že taková věc do HTML nepatří, je přinejmenším nerozvážné. O to méně významu má div a span v HTML5, který je speciálně zaměřený na sémantiku pro hlupáky, kteří to nedokázaly v HTML4.

To že se to používá na takové věci ještě neznamená, že je to správně. Klasika,. když někdo skočí z mostu, skočíš také?

Jakou výhodu zde má využití ::after oproti divu? Dle mého žádnou, spíše to zvějšuje styl, protože je třeba zde ::after pozicovat. Div jen vycentruješ. Ale když ti dnešní kodeři potřebují vypadat cool, tak tam nahážou co nejvíce HTML5 a CSS3 udělátek, aby vypadali "profesionálně". HTML5 a CSS3 je super, o tom bez diskuse, ale pro mě (pro člověka, který dělal cross-browser designy ještě v době IE6), je takovéto použití mrhání talentem CSS3. Na druhou stranu chápu, že dnešní kodeři si s takovou prkotinou neporadí, protože prostě takové věci nemusí řešit ve velkém. Např. border-radius je velká spása. Kolik dnešních koderů by vytvořilo texturovaný blok pro dynamický text se zakulacenými okraji bez CSS3?

Jak jsem již psal předtím, ::after a ::before jsou určeny (nebo alespoň kvůli tomu byly vytvořeny) pro přidání blbinek do textu. Představ si klasický generovaný text na stránce. Obsahuje strongy, emy, odkazy. K tomu jsou tyto preudo elementy určeny. Jak by si chtěl ve WYSIWYGu přidávat obrázky před odkazy (myslím malinkou inkonku, která zvýrazňuje odkaz nebo označuje externí odkaz)? Díky ::after a ::before to tam pohodlně přidáš ze stylu a nerozhodí ti to řádek. Když vytváříš nějakou grafiku, kterou je stejně třeba pozicovat, proč tam cpát pseudo element?

Můžete mě za můj postoj hejtovat, ale z mého pohledu se právě v dnešní době ::after a ::before cpe i tam, kde by být neměl, tam kde jen dělá bordel.

BTW Tome, pěkné využití borderu k vytvoření trojúhelníku. ;) Místo těch bílých si tam mohl hodit rgba() s a 0, ale jinak gj, mě to nenapadlo.

"Představ si klasický generovaný text na stránce. Obsahuje strongy, emy, odkazy. "
Nevim, jak jini, ale ja si to radeji nepredstavuji :) STRONG a EM bylo uz pred 20 lety doporucovano nepouzivat i na jakpsatweb :) Nevim, jaky zarputilec do toho muze uzivatele jeste tlacit.
Co se tyce kulatych okraju, tak doporucuji dat do pozadi obrazek a nedrbat se s roztahovatelnymi okraji.

To jako vážně? Vždyť jsou to důležité sémantické elementy, které zdůrazňují obsah na rozdíl od jejich variant b a i, které jen mění vzhled. Tohle je věc SEO. Kdyby byly zastaralé, tak proč v HTML5 zůstaly?

Jsem mimo já nebo ty?

Jelikož je neoznačí ani HTML5 validátor (který je dost kritický) za deprecated, myslím si, že se pleteš spíše ty. Ale pokud se pletu, rád se nechám poučit.

OT:

Jinak ty texturované bloky se řešili rozkouskováním. Hlavní div a v něm 3 další. top, mid, bot. Každý měl vlastní obrázek s tím, že prostřední musel být opakovatelný v ose y (to byl vetšinou problém, protože grafici to nechápali). Pokud to mělo být ještě univerzálnější a roztahovatelné do šířky, tak se hlavní div dělil na 3 a každý z nich také ještě na 3. Ta doba je naštěstí pryč. :D Tedy alespoň co se kulatých ohraničení týče. Pro silně designové a texturované weby zaměřené na nějakou tématiku (třeba hry; WoW aj.) to stále platí, protože zde CSS3 nepomůže.

#7 peter

„Nacházíte se zde: Fakulta > O fakultě“

Práve v takýchto prípadoch by som pseudoelement radšej nevyužil. V nepodporujúcom prehliadači môže ostať text nepochopený.

Keď budem sadu starších prehliadačov inštalovať, vyskúšam ako sa pseudoelementy v IE správajú. Ďakujem za tip.

#8 NeregistrovanyHookyns
Ďakujem za zaujímavý komentár.

„Jakou výhodu zde má využití ::after oproti divu? Dle mého žádnou, spíše to zvějšuje styl, protože je třeba zde ::after pozicovat.“

V prípade, že je takýchto zobáčikov na stránke viac, zmenšuje to HTML súbor. Dôvod prečo som riešenie odporúčil je, že som toho názoru, že HTML by malo byť zostavené čo možno najviac z obsahu určeného pre užívateľa. Takáto dekorácia zas nie je tak podstatná, takže nefunkčnosť v IE7 ,a starších, nikomu výrazne neznepríjemní prehliadanie.

Ak samozrejme z nejakých dôvodov na podpore záleží, nebol by som proti použitiu prvku v HTML.

„Ale když ti dnešní kodeři potřebují vypadat cool, tak tam nahážou co nejvíce HTML5 a CSS3“

O to sa skutočne nesnažím. Pseudoelement :before a :after (s jedinou dvojbodkou) bol zahrnutý už v CSS 2.1. Novšia verzia pseudoelementu s dvoma dvojbodkami má horšiu podporu a je súčasťou až CSS3. Schopnostne sa obe varianty nelíšia.

„Jak by si chtěl ve WYSIWYGu přidávat obrázky před odkazy“
Vnútorným odsadením a neopakujúcim sa obrázkom na pozadí vhodne umiestnenom pomocou background-position.

„pěkné využití borderu k vytvoření trojúhelníku“

Riešenie som nevymyslel. Dozvedel som sa o ňom od Str4wberryho. Vo svojom predchádzajúcom príspevku som odkázal na jeho súvisiaci článok.

#12 Tomáš123
"Ale když ti dnešní kodeři potřebují vypadat cool, tak tam nahážou co nejvíce HTML5 a CSS3" nebylo myšleno na tebe, omlouvám se za nejasnost. Mluvil jsem obecně o mladé generaci koderů, protože v poslední době se ke mně dostávají šablony, kde je vždy tak 50x ::after nebo ::before a je to použité na ty největší hlouposti.

"V prípade, že je takýchto zobáčikov na stránke viac, zmenšuje to HTML súbor." Okay, s tím nejde nesouhlasit. :D Pokud by to množství bylo tak šílené, že už by to znamenalo podstatný nárůst kódu a prodloužení doby stahování i na mobilním internetu, tak ano. To můžeme také začít řešit množství http dotazů, které také zpomaluje načítání (jeden http dotaz znamená 4 zprávy mezi serverem a klientem), protože se provádějí maximálně 3 dotazy současně. V dnešní době "cloudů" zase všichni odkazují na knihovny třetích stran na cizích serverech. Potom ke každé knihovně přilinkuje 20 pluginů a hned máme head ve kterém se stahuje 100 různých souborů a každý z jiného serveru. :D Berte to s rezervou.

Nesmíme zapomenout, že nejideálnější a nejrychlejší web je ten, který má jen jednu HTML stránku, všechny styly a scripty jsou v head a obrázky jsou inline v base64. :D

BTW, vyjádří se zde ještě někdo k elementům strong, em aj? Zajímá mě to.

#13 NeregistrovanyHookyns
Elementy <strong> a <em> sú sémanticky výraznejšou (snáď som použil správne slová) alternatívou prvkov <b> a <i>. #9 peter si zrejme tieto dvojice pomýlil.

V tom, či ich používanie skutočne vplýva na SEO sa názory rôznia (možno áno, možno skôr nie). Preferujem podľa presvedčivosti prejavu a dôveryhodnosti autora.
 

V cem spletl? Proste tvrdim, ze je nepouzivat a nikdy jsem je nepouzil. Seo manici tvrdi zas neco jineho. Nemuzeme mit rozdilne nazory? Seo totiz popira definici tech elementu podle html. Proste se s tim neztotoznuji a mam jiny nazor.

#15 peter
Nenarážal som na tvoj názor, ale na odkázanie sa na Jakpsátweb.cz. Nemyslím, že už pred dvadsiatimi rokmi Yuhů čosi také odporúčal. Ani teraz som tam nič podobné nenašiel (môžeš ma odkázať, možno som hľadal zle).

Popísaný rodiel medzi značkami <strong> a <b> a <em> a <i>: http://semantika.name/zvyrazneni-textu.html

Zkusim pohledat...

http://www.jakpsatweb.cz/html/text.html - logicky bych to cekal zde, nicmene strong je tam oznacen jako zvyrazneni, takze zvyrazneni formatovani textu by nemelo mit vliv na seo. Coz si seo-manici vylozili jinak :)

http://www.jakpsatweb.cz/html/html-tahak.html#tucnost

http://www.jakpsatweb.cz/html/nejdulezitejsi.html - tady treba o strongu neni vubec rec

http://www.jakpsatweb.cz/formatovaci-chyby.html#zvyraznovani

Nejspis to uz odstranili. Bylo to zasite, takova poznamka. Ale asi upravou pro html5 odstranili i nepatricne poznamky :) Taky je tam fura nesmyslu navic (html5). No, co to maji ti manici, co to maji, tak jde cele jpw k certu :) Na foru si vubec nesmis povidat. Na strankach fura nesmyslu, ktere nevyuzije ani zacatecnik, ani pokrocily. Delaji z html zbytecne vedu :)

Z meho pohledu, kdyby se to melo vyuzit pro seo, tak by se musel dat definovat tag/class v hlavicce. Podobne, jak se tam pisi klicova slova. Nekdy treba nechces slovo na strance zvyraznit, ale potrebujes, aby bylo ve vyhledavaci. A nejlepe to dela google, cte cely viditelny text stranky. Zadne strong ho nezajimaji :)

#18 peter
Každý SE (Search Engine) čte celou stránku, ale různým částem přidává různou váhu. Sémantika je "věda". HTML5 bylo vytvořeno právě kvůli tomu, aby pomohlo tvořit sémanticky korektní HTML a nebyla to taková věda jako v HTML4. A všechny SE podporují HTML5 dokumenty (nebo se o to alespoň snaží). 

"Z meho pohledu, kdyby se to melo vyuzit pro seo, tak by se musel dat definovat tag/class v hlavicce. Podobne, jak se tam pisi klicova slova." H1, h2 aj. se v hlavičce nedefinují, ale větší váhu nezpochybnitelně mají.

Já se tedy sémantikou zabývám (nebo spíše jsem se jí dříve zabýval; teď už se orientuji v jiných oborech) a vždy jsem dostal každý web (na požadovaný výraz; pokud byl rozumný a ne příliš obecný) na první stranu google. Při takové optimalizaci hraje sémantika také svou roli, stejně jako black SEO techniky, které google penalizuje, pokud na ně přijde. K sémantice a správnému vytvoření outline je hlavně důležité si dávat pozor na nadpisy. V HTML4 byl např. povolený jen jeden tag h1 na celé stránce. Další se buď ignorovaly nebo měly menší význam, možná dokonce penalizaci, nevím.. V HTML5 jsou sekční tagy, které vytvářejí sekce, kde každá tato sekce může mít vlastní h1. Díky tomu se dá vytvořit krásný outline, který SE berou určitě v potaz. Dobrá utilitka na kontrolu outline https://gsnedders.html5.org/outliner/.

"Nekdy treba nechces slovo na strance zvyraznit, ale potrebujes, aby bylo ve vyhledavaci." To že má strong defaultně tučnost přece není žádný argument, k čemu je CSS? Já mám tedy standardně tučnost u strong odstraněnou. Spíše mu nastavuji mírně jinou barvu nebo ho nechávám naprosto bez formátování. 

"http://www.jakpsatweb.cz/html/text.html - logicky bych to cekal zde, nicmene strong je tam oznacen jako zvyrazneni, takze zvyrazneni formatovani textu by nemelo mit vliv na seo." Jestli sis nevšiml, tak je to v částí logického zvýraznění. Fyzické zvýraznění (tučnost) je jen jeho defaultní vzhled. 

BTW, jakpsatweb jsem snad nikdy nepoužil a nevím, proč mu dáváš takovou váhu. Skoro to zní, jako by nebyla pravda nic, co není na jakpsatweb. Uniká mi něco? Je to snad web od autora vyhledávacího algoritmu google nebo co?

BTW2: Trošku se nám zde rozjíždí flame war. Nepřesuneme to raději jinam? :D S původním tématem tohle již nemá nic společného. :D

Jen malý dodatek. Našel jsem zahraniční diskusi, ve které stojí, že kniha SEO Bible (ISBN: 978-0-470-17500-2) strong a em popisuje a dokazuje, že strong a em má opravdu o málo větší význam než normální text.

Jinak kdo nezná, tak doporučuji web http://html5doctor.com. Ten krásně popisuje sémantiku HTML5.

#17 peter

Taky je tam fura nesmyslu navic (html5)

Zas až také zlé to nie je. Dosť vylepšení z HTML5 ide použiť aj bez straty spätnej kompatibility. Tak napríklad nové typy <input>ov, ich nové atribúty ako pattern, či required, nové riadkové elementy so sémantickým významom, kratšie deklarácie <!DOCTYPE> či kódovania...

Pomaly sa plánuje revízia JPW. Bohužiaľ ale, nikto na to nemá dosť času. Postupne sú stránky aktualizované, aby web nadobro nezapadol do dejín.

Na foru si vubec nesmis povidat.

Konštruktívne a odborné diskusie sú vítané. Mlátiť slamu ide na facebooku...

#19 NeregistrovanyHookyns

V HTML4 byl např. povolený jen jeden tag h1 na celé stránce

HTML nikdy povolený počet nadpisov neurčovalo. Pokiaľ tomu obsah zodpovedal, bolo správne použiť ich viac.
Verzia, že s novými HTML5 prvkami už konečne ide bez penalizácie použiť viac nadpisov mi neznie práve vierohodne. Prosím teda o nejaký zdroj.

Je to snad web od autora vyhledávacího algoritmu google nebo co?

Autor webu s prestávkami pracoval v českom vyhľadávači seznam.cz (možno stále pracuje, neviem). Určitý čas pracoval aj pre Google (zdroj).

#21 Tomáš123
Přímo specifikace HTML4 to nezakazovala, vyznělo to tedy asi špatně, omlouvám se. Každopádně to byl své doby standard. Našel jsem např. http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824 Je zde i to o HTML5 h1 v sekčních elementech.

Ale lepší zdroj pro to HTML5 tvrzení je snad přímo w3c viz https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

Je zde přímo napsané: "These elements represent headings for their sections." A v example je přímo několik h1 tagů.

NeregistrovanyHookyns:

Nezabyvam se tim, vzdy jsem mel stranku na prvnich strankach google i bez strongu :)

Presne, jak rika Tomáš123, nikdy nebylo receno, ze H1 musi byt jen jeden. Pouze to bylo doporucovano, zase SEO. Tez tam byl nazor pouzivat H1 na hlavicku, logo. Coz je z hlediska nazvu tagu je chybne. Dokonce se doporucuje nepouzivat vic nez 3 nadpisy a ze se ma zacinat H1.

Z meho pohledu je treba si vybrat, ktere z tech doporuceni se ti hodi a zdaji spravne nebo prave pouzitelne. Cili, prizpusobit co nejvice, ale neni treba vse nutne dodrzet.
Kdyz to pouziji na nadpisy, tak pouzivam h1, h2, h3. h1 pouzivam na content, protoze nadpis se tyka textove casti, nikoliv zbytku prezentace. Tudiz, logo mam normalne v divku.
A pouzivam tabulky i iframy pro layout a nestydim se za to. Naopak, jsou to velmi stabilni prvky a neni je treba dal stylovat. Coz se o ruznych float / position layoutech rici neda.
Treba vcera jsem resil takovou prkotinu, proc se mi spatne floatuji fotky a je tam treba 3 fotky prazdno a pak fotka na konci. Chyba byla v tom, ze kazda fotka mela jinou vysku. Tohle se ti u tabulky nemuze stat :) Ta si radek roztahne.
 

#23 peter

Nezabyvam se tim, vzdy jsem mel stranku na prvnich strankach google i bez strongu.

Neříkám, že jen strong je ten klíč, ale sémantika obecně. Zároveň však nechci říct, že sémantika je TOP pro SEO. Jsou lepší způsoby jak udělat SEO, ale sémantika je ta nejlepší v poměru cena/výkon. Zároveň záleží na co si optimalizoval. Pochybuji, že bez marketingu, jen čistě s kódem, by ses dostal na první stranu např. s výrazem "Autobazar Praha", pokud by si neměl správně udělaný obsah. Já jsem s tím jednu dobu experimentoval a dle kódu to skákalo +- 2-3 strany.

Použít h1 na obsah je správné. H1 by měla obsahovat nadpis textu, který na stránce je. Kdyby to bylo v logu, a obsahovalo to název webu, tak to trochu nakopne web (někdy je to žádané), ale zase je špatně zaindexovaný obsah. Čím dynamičtější SEO prvky na webu jsou, tím lépe pro obsah. Tzn. h1 různé pro každou stránku, title různý (ale měl by vždy obsahovat i název/zaměření webu), keyword a description by se taky mohly lišit, ale v praxi jsem to nikdy neudělal, max jsem přidal do keyword slova z h1.

V HTML5 je to však už jinak. Jak jsem psal a odkazoval dříve, stránka může obsahovat více h1 a dokonce je to žádoucí. Elementy body, article, section, nav, aside, header, footer všechny vytvářejí samostatný celek, ve kterém se může znovu začít s h1. To pak vytváří dobrý outline.

Na použití tabulek a iframů vysazený nejsem, takže nic neříkám. :D Já jsem tedy s "float / position" layouty neměl problém ani u IE7. Co jsem napsal, bylo ve všech prohlížečích stejné bez nutnosti použít pro IE samostatný styl. Znám dost CSS "fíglů", které vytvářelo kompatibilitu IE. Jen by mě zajímalo, jak řešíš respo s tabulkovým layoutem.

To s obrázky řeším buď obalovým divem, který obrázky mění na stejnou výšku a šířku případně ořízne nebo používám display table-row / table-cell, když je žádoucí takové to rozházené rozpoložení, kdy jsou všechny obrázky různě velké, jak píšeš.

A tohle je přesně ta diskuse, která by se na jpw vést nemohla, jak si řekl. :D Protože jsme těžce OT.