Selektory potomka – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Selektory potomka – CSS – Fórum – Programujte.comSelektory potomka – CSS – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Ondřej Matoušek
~ Anonymní uživatel
2 příspěvky
1. 9. 2011   #1
-
0
-

Zdravím, není mi jasná jedna věc ohledně selektorů v CSS. Proč nefunguje následující kód: (?)

p > h1 {color: red;}

Předpokládal bych, že přímý potomek (h1) elementu p by měl mít červenou barvu. V žádném prohlížeči to však nefunguje. Například ale:

ul > li {color: blue;}

funguje bez problému. Jak rozeznám, které elementy budou fungovat a které né? Díky!

Nahlásit jako SPAM
IP: 78.136.178.–
Šťouchal0
Stálý člen
1. 9. 2011   #2
-
0
-

Je nesmysl mít nadpis uvnitř odstavce. - Je to přímo nevalidní a tudíž předpokládám, že to prohlížeče nechtějí ani zobrazit.

Nahlásit jako SPAM
IP: 213.168.191.–
Řešení
Kobi
~ Moderátor
+1
Věrný člen
1. 9. 2011   #3
-
0
-
Vyřešeno Nejlepší odpověď

#1 Ondřej Matoušek

Jak píše šťouchal, logické by to bylo spíš naopak - <p> uvnitř <h1>. P je chápán jako jeden odstavec textu a nadpis by v něm neměl být obsažen.

Obecně bys neměl dávat blokové elementy do inline elementů (to však není tvůj případ).

Nahlásit jako SPAM
IP: 88.101.155.–
Nefaritus
~ Redaktor
+2
Posthunter
1. 9. 2011   #4
-
0
-

#3 Kobi
Aji p uvnitř h1 není moc echt, ale určitě lepší než naopak :D

Nahlásit jako SPAM
IP: 89.103.4.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #5
-
0
-

Doporučuji si přečíst desatero sémantických stránek a prací. Tvoje kombinace není logická, navíc je zcela zbytečná, představ si potom stylovat v tomto odstavci 2 různé nadpisy h2, ta kostra by byla dlouhá, nelogická a samozřejmě nefunkční. H1 - H6 jsou párové tagy, které ve validním a správně sémantickém webu se mají nacházet "volně" a postupně za sebou. 


Skvělá literatura o této problematice: 

http://www.semantika.name/index.html
http://polopate.jakpsatweb.cz/index.php?…
http://www.jakpsatweb.cz/…prehled.html

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #6
-
0
-

#4 Nefaritus
Souhlasím, rozhodně to není echt a ani (sémanticky, logicky) správně. H1 je párový a textový tag. K úpravě textů a potažmo textových tagů slouží tagy jako span, strong, small a v horším případě zkousnutelný font. Rozhodně nejlepším řešením by bylo stylovat nadpisy pomocí tříd a pokud je nutno rozlišovat h1 na různých stránkách tak identifikátory.

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Nefaritus
~ Redaktor
+2
Posthunter
1. 9. 2011   #7
-
0
-

#6 null_while
a nebo vnořením do divu

#idetifikator h1 { .. }
Nahlásit jako SPAM
IP: 89.103.4.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #8
-
0
-

#7 Nefaritus
Validně to správně je, nicméně sémanticky ne. Ovšem v dnešním světě, kdy skoro každý platí za funkčnost a optimalizaci pro prohlížeče svých zákazníků, návštěvníků, čtenářů je všem kód jedno a pokud neumí ohodnotit kód, neumí ohodnotit jeho cenu, pokud není kodér (kóder) správně ohodnocen je mu sémantičnost ukradená a tudíž na webu velmi často není nebo je naopak špatně.

Ne jeden webdesignér použije k opravení chyby se zobrazováním div - nejspíš je to styl :-). 

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Šťouchal0
Stálý člen
1. 9. 2011   #9
-
0
-

Osobně myslím, že nadpis umístěný v divu (#content) je naprosto v pořádku. Samozřejmě, pokud by to bylo řešeno:

<div id=".."><h1>....</h1></div>

Tak to je naprosto neprofesionální. Ale tento přístup se mi zdá ok:
 

<div id="content">
	<h1>...</h1>
	<p>....</p>
	<h2>...</h2>
	...
</div>
Nahlásit jako SPAM
IP: 213.168.191.–
Nefaritus
~ Redaktor
+2
Posthunter
1. 9. 2011   #10
-
0
-

#9 Šťouchal
Myslel jsem to tak, jak to popisuješ v druhém případě. Ten k=od byl jen pro ilustraci.

Nahlásit jako SPAM
IP: 89.103.4.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #11
-
0
-

#9 Šťouchal

Přesně tak. Souhlasím s druhým řešením. Na stránce by si měl člověk vystačit klidně i s jedním divem. Ovšem musíme rozlišovat projekty, kterým taková kostra něco dá a kde nikoliv, potom tohle není nutnost. Používat však první řešení v jakémkoliv případě je nesmysl.

Vzorná ukázka napsaná vzorem a ikonou českého webdesignu p. Lešetickým (Plaváček)
http://klient.plavacek.net/div/

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Šťouchal0
Stálý člen
1. 9. 2011   #12
-
0
-

Ok, tak to souhlasím.

Problém je ten, že se vzrůstajícími požadavky zákazníků a potenciálních uživatelů je řešení pomocí jednoho prakticky nereálné. Nejen, že grafika je čím dál tím komplikovanější, tak různé moduly (šoupátka, výsuvné boxy a podobné hračičky) se bez divů neobejdou.

Nahlásit jako SPAM
IP: 213.168.191.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #13
-
+1
-
Zajímavé

#12 Šťouchal
Souhlasím, ale ne úplně. Problém je v tom, že každý neumí všechno. To znamená, že webový projekt, aplikace, ve směs cokoliv projde kupou lidí. Od grafika, kodéra, programátora, korektora až po administrátora. Každý může zasáhnout do kódu, přidat něco, apod. přičemž může (často přímo musí) dodržovat pouze optimalizaci a validitu, proto se na zbytek již moc nehledí. 

Sémantika je věc dobrá, ale dodržování stránek s jedním divem je opravdu velmi těžké, někdy nemožné. 

Dalším problémem jsou lepiči kódu, kteří vemou ajax formulář támhle, jquery menu támhle, php newsletter támhle a postaví to na šabloně z nějakého portálu. Potom je výsledek jaký je. 

Ale abych nepůsobil jak nějaký diktátor a propagátor sémantiky, web o jednom divu jsem udělal zhruba jednou - když jsem se snažil to vůbec dokázat.

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Šťouchal0
Stálý člen
1. 9. 2011   #14
-
0
-

Souhlasím.

Právě, že jsem měl na mysli velké projekty - řekněme eshopy (nikoliv krabicové verze, ale komplexní řešení). Tam (dle mých zkušeností) je nemožné, chtít po jednom chtít udělat celé řešení. Kdyby někdo takový byl, tak by se určitě ve firmě velice dobře uživil :-)

Vzhledem k tomu, že se kvůli efektivitě práce často využívají různé doplňky od třetích stran (ať už jde o Facebook blbosti, či komponenty typu DataPickter z jQuery) je dodržení jednoho divu v prostředí kolem mě asi nemožné.

Nahlásit jako SPAM
IP: 213.168.191.–
Nefaritus
~ Redaktor
+2
Posthunter
1. 9. 2011   #15
-
0
-

#14 Šťouchal
Je to i vcelku zbytečné se o něco takového snažit.

Nahlásit jako SPAM
IP: 89.103.4.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #16
-
0
-

#14 Šťouchal
Říká se, že nic není nemožné a v tomto směru to určitě platí. Myslím si, že udržet to lze jen s kvalitním návrhem, kvalitní dělbou práce, omezením vstupu a spoustou peněz

Tak strašně jsem chtěl zvýraznit spoustou peněz, bohužel jde jen ztučnit text. :-( Budu si Curovi nejspíš stěžovat. :-D

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #17
-
0
-

#15 Nefaritus
Nejspíš ano. :-) 

Ale myslím si, že tak jako se hodnotí kvalita zdrojových kódu skriptovacích a programovacích jazyků, ať procedurálně nebo objektově psaných, může se hodnotit kvalita zdrojových kódu šablon, kaskád, apod. :-) 

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Šťouchal0
Stálý člen
1. 9. 2011   #18
-
0
-

Jj, spoustou peněz. :-D Navrhnout klientovi řešení, kde nebude vidět rozdíl ve výsledku, ale v požadovaných financích by nebylo dobré. - Spíš si umím představit reakci :-D

Přesto si však stále neumím představit udělat komponenty jako jsou dataPickter, různé scrolly, obrázkové promítače apd. udělat. Ale to může být způsobeno mou nedokonalostí. :-)

Nahlásit jako SPAM
IP: 213.168.191.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #19
-
+1
-
Zajímavé

#18 Šťouchal
O tom to je, pokud nechceš mít na každém kousku své stránky napsáno copyright, copy by, designed by, license from, apod... je nejjednodušší řešení si zaplatit někoho kdo si v tom holduje. Není to způsobeno tvojí nedokonalostí. Znám spoustu dokonalých lidí, kteří dokázali dokonalé věci bez znalosti nedokonalých jazyků. (Nevím čím to je, ale ani jeden nezná mě.)

Tím chci říct, že tak jako jsou lidi, kteří rádi programují v PHP nebo kreslí ve photoshopu, jsou jedinci, kteří PHP a photoshop nesnáší a radši dělají jednorázovky v JavaScriptu, apod.

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Kobi
~ Moderátor
+1
Věrný člen
1. 9. 2011   #20
-
0
-

Trochu se nám tady ta diskuse odklonila od původního dotazu

Nahlásit jako SPAM
IP: 88.101.155.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #21
-
0
-

#20 Kobi
Téma je označeno za vyřešené, navíc si myslím, že je dobře když členové komunikují i o věcech spojených s problémem. Fórum to potřebuje a zas takový offtopic to není. :-) 

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Kobi
~ Moderátor
+1
Věrný člen
1. 9. 2011   #22
-
0
-

#21 null_while
Nicméně nejlepší by bylo sepsat o sémantice nějaký článek, nechceš se toho ujmout?   

Nahlásit jako SPAM
IP: 88.101.155.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #23
-
0
-

#22 Kobi
Proč to nezkusit. Nicméně bych začal nejdříve v pondělí. Pokud je nějaký kodex, pravidla pro psaní, apod. jako máme například na zdrojaku nebo v rootu, tak mi ho pošli do PM. Miluji výzvy...   

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Šťouchal0
Stálý člen
1. 9. 2011   #24
-
0
-

Když už o tom se píše, tak ono by stačilo dobře zviditelnit odkazy jenž null_white poslal na začátku. Myslím, že vystihují problematiku dokonale (sám mám první odkaz nastudován) :-)

Nahlásit jako SPAM
IP: 213.168.191.–
Šťouchal0
Stálý člen
1. 9. 2011   #25
-
0
-

#23 null_while
Super, rád si to přečtu ;)

Nahlásit jako SPAM
IP: 213.168.191.–
null_while
~ Moderátor
+6
Věrný člen
1. 9. 2011   #26
-
0
-

#25 Šťouchal
Aby článek měl nějakou hodnotu, budu na něm určitě s někým spolupracovat, mám pár typů, kteří by mi ho mohli částečně přikořenit a udělat zajímavějším, rád bych je tam pak i uvedl. :-) Třeba napíšu i tobě. :-)

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Ondřej Matoušek
~ Anonymní uživatel
2 příspěvky
2. 9. 2011   #27
-
0
-

Ahoj, díky všem za odpovědi. Samozřejmě mi je jasné (i jsem to veskrze tušil), že problém bude v nepříliš logické kombinaci elementu h1 a odstavce p. Moje otázka však stále trvá - je nějaký způsob, jak bezpečně rozlišit elementy, které mohou být potomci jiných elementů? Nebo je to pouze otázkou sémantického citu?

Nahlásit jako SPAM
IP: 86.49.122.–
null_while
~ Moderátor
+6
Věrný člen
2. 9. 2011   #28
-
0
-

#27 Ondřej Matoušek
Je to především ve znalosti. Pokud budeš znát pravý význam html tagů a jejich správné využití nebudeš vůbec nad tím, jaké ano a jaké ne přemýšlet. Bude ti potom jasné, že podobné operace by byly nelogické a zvolíš to jinak. Tabulky na to určitě existují, ovšem doporučuji spíše pochopit význam značek. 

Nahlásit jako SPAM
IP: 84.16.103.–
WEBNIA.cz - tvorba webových stránek
Šťouchal0
Stálý člen
2. 9. 2011   #29
-
0
-

#27 Ondřej Matoušek
Tvoji otázku jsem pochopil že chceš nastylovat nadpis např v:

<div id="content">
	<h1>....</h1>
	<p>... <span>...</span>...</p>
<div>

potom by byl styl takovýto:

#content h1 {
	/* styl pro nadpis uvnitř divu#content */
}
#content p span {
	/* styl pro span, který je umístěn uvnitř odstavce a ten je uvnitř divu */
	/* "fuj, něco takového popsat je náročné na mé prsty :-D, ale vidět to pak je hned" */
}
Nahlásit jako SPAM
IP: 213.168.191.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 2 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý