NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: CSS problém s farbou nadpisov článkov

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
michal.smatlak:7.2.2016 12:02

Zdravím všetkých. Mám taký zaujímavý problém. Farbu nadpisov som zmenil z modrej na zelenú. Všade sa zmeny prejavili ale farba nadpisov článkov ostala stále modrá. Skúšal som už reštartovať stránku aj som vymazal cache ale nič sa nezmenilo. Tu je môj CSS kód:

h2 {
        text-align: center;
        color: #065208;
        font-family: Arial;
        text-shadow: 3px 3px 7px #065208;
        font-size: 1.7em;
}

A tu je môj PHP kód ktorého sa to týka:

echo('<tr><td><h2>
                       <a href="index.php?clanok=' . htmlspecialchars($clanok['url']) . '">
                          ' . htmlspecialchars($clanok['titulok']) . '</a>
                                                        </h2>
                      echo('</td></tr>');

Poraďte mi prosím Vás ako to vyriešiť. Za všetky rady vopred ĎAKUJEM.

 
Odpovědět
7.2.2016 12:02
Avatar
Tomáš123
Člen
Avatar
Odpovídá na michal.smatlak
Tomáš123:7.2.2016 12:37

farba nadpisov článkov ostala stále modrá

Niekde v CSS je silnejší selektor, ktorý prebíja tvoj všeobecný zápis. Doporučil by som prečítať si: http://www.jakpsatweb.cz/…adovani.html

Nahoru Odpovědět
7.2.2016 12:37
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Tomáš123
michal.smatlak:7.2.2016 14:01

Nenašiel som tam žiadny silnejší selektor. Tu je celý môj CSS kód:

body {
        background: url('obrazky/background_1.png') #00ff77;
        margin: 73px 0px 0px 0px;
        font: 14px Verdana;
        min-width: 960px;
}

h2 {
        text-align: center;
        color: #065208;
        font-family: Arial;
        text-shadow: 3px 3px 7px #065208;
        font-size: 1.7em;
}

h1 {
        font-size: 2em;
        font-weight: normal;
        color: #065208;
        text-align: center;
        text-shadow: 2px 2px 1px #065208;
}

#logo {
        background: url('obrazky/logo.png') no-repeat;
        width: 250px;
        height: 60px;
        float: left;
        margin: 7px 0px 0px 20px;
}

#logo h1 {
        margin: 14px 0px 0px 10px;
        color: white;
}

nav ul {
        margin: 0px;
        list-style-type: none;
}

nav ul li {
        float: left;
        padding: 0px 25px;
        margin: 0 5px;
        font-size: 17px;
        height: 73px;
        line-height: 4.3em;
}

nav ul li:hover {
        background: #2BFF2B;
        box-shadow: 0px 0px 5px black;
}

nav a {
        color: white;
        text-decoration: none;
        padding: 0px 25px;
}

#centrovac {
        margin: 0px auto;
        width: 960px;
}

header {
        height: 73px;
        position: fixed;
        top: 0px;
        background: url('obrazky/background_2.png') #065208;
        width: 100%;
}

article {
        background: url('obrazky/background_1.png') #00ff77;
        padding: 30px 0px;
}

article header {
        background: white;
        width: 206px;
        height: auto;
        float: left;
        position: static;
        box-shadow: 2px 2px 7px #1c2228;
        border: 2px solid #006797;
        padding: 20px;
}

article section {
        width: 666px;
        float: left;
        background: white;
        border: 2px solid #006797;
        box-shadow: 2px 2px 7px #1c2228;
        padding: 20px;
}

footer {
        background: white;
        height: 20px;
        color: #065208;
        width: 100%;
        padding-left: 30px;
        position: fixed;
        bottom: 0%;
}

.cistic {
        clear: both;
}

a {
    display: block;
}

A nemôže byť problém v tom že tie nadpisy článkov sa mi vypisujú do tabuľky?

 
Nahoru Odpovědět
7.2.2016 14:01
Avatar
Odpovídá na michal.smatlak
Neaktivní uživatel:7.2.2016 14:19

Snadna pomoc - otevri stranku - klepni pravym na svuj modry nadpis a dej prozkoumat element (chrome i firefox maj slusnej nastroj) v prave casti nove vyskoceneho okenka najdes definice stylu, v leve casti (ta zabira vetsinu plochy toho kenka) bude definice HTML, no a ty se jednoduse podivas, ktery css pravidlo, ze to prirazuje tvemu H2 elementu modrou barvu :)

Nahoru Odpovědět
7.2.2016 14:19
Neaktivní uživatelský účet
Avatar
Odpovídá na michal.smatlak
Neaktivní uživatel:7.2.2016 14:30

Jenže ty máš v nadpisu odkaz. Musíš stylovat odkaz, protože ten nedědí barvu nadpisu - má defaultně svou modrou :) Tu třídu, kterou dáváš nadpisu, dej odkazu uvnitř.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
7.2.2016 14:30
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:7.2.2016 14:30

H2 zřejmě nic modrou barvu nepřiřazuje, bude to problém toho odkazu uvnitř.

Nahoru Odpovědět
7.2.2016 14:30
Neaktivní uživatelský účet
Avatar
Odpovídá na Tomáš123
Neaktivní uživatel:7.2.2016 14:34

Tohle není vůbec dobrý materiál k učení se CSS. Třeba oužívání HTML atributu style a CSS klíčového slova !important je prostě špatné.

Nahoru Odpovědět
7.2.2016 14:34
Neaktivní uživatelský účet
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš123:7.2.2016 14:52

Nesúhlasím. Lebo je tam všetko pohromade? Nech sa začiatočník sám naučí, že mu je pohodlnejšie nepísať CSS inline. Príkladov je tam viac (aj takých, ktoré inline zápis nepoužívajú). Ako inak by si demonštroval väčšiu prioritu !importantu a inline zápisu bez ich použitia? Podľa môjho názoru to bol tomuto problému plne relevantný odkaz.

Nahoru Odpovědět
7.2.2016 14:52
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Tomáš123
Neaktivní uživatel:7.2.2016 15:08

Není tam jediná zmínka o tom, že to je špatná praktika. Nováček to tím pádem bude brát jako dobrý způsob a spokojí se s tím, aniž by se dozvěděl, jak by to mělo být správně. Vyčíst všechny možnosti je sice fajn, ale úplně tam chybí závěr, jak by to mělo nebo nemělo být, což vede k tomu, že dříve nebo později bude muset narazit.

Nahoru Odpovědět
7.2.2016 15:08
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:7.2.2016 15:22

pravda, v tom php marastu jsem to nevidel :D, nicmene alespon do budoucna bude vedet jak ladit

Nahoru Odpovědět
7.2.2016 15:22
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:7.2.2016 15:29

A taky tu máš celkem dobrý příklad, proč se používá šablonování a odděluje se php a html, respektive logika a vzhled. 1:0 pro MVC a jakýkoliv podobný návrhový vzor :D

Nahoru Odpovědět
7.2.2016 15:29
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:7.2.2016 15:38

rozhodne bod pro cokoliv co sablonuje i kdyby to bylo php (ve skutecnosti proti nemu nic moc nemam, spis mi vadi, ze ho spousta lidi takhle zneuziva), treba to zakladatele vlakna jeste navede na lepsi cestu

Nahoru Odpovědět
7.2.2016 15:38
Neaktivní uživatelský účet
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš123:7.2.2016 18:17

Tohle není vůbec dobrý materiál k učení se CSS.

Za takým účelom ani nebol poskytnutý. Bolo naňho odkázané, ako na kompletný prehľad vlastností kaskádovania v CSS.

K inline zápisu som sa už vyjadril. Článok nepatrí k tým prvým, kde sa neznalý nadšenec dostane. Ak nepozná rozdiel medzi interným, externým a inline CSS zápisom, článku neporozumie za predpokladu, že postupuje ako väčšina. Pochybujem, že pri takých okolnostiach sa iniciatívne preroluje na posledný príklad (lebo v prvej zmienke existujú oba zápisy) a nesprávne sa naučí používať inline zápis, s ktorým sa dodnes trápi. Vedel som, komu tento odkaz dávam (vie, aké typy zápisu CSS existujú).

Varovanie na nevhodnosť použitia !importantu tam je (http://www.jakpsatweb.cz/…adovani.html#…):

Při používání !important je nutné být opatrný, protože když se na to zapomene, tak se pak děsně blbě ladí dlouhé stylopisy.

A to, pokiaľ viem, je jediná nevýhoda použitia tohoto prebíjača. Ak si niekto nedá povedať, nech sa trápi a príde na to vlastnou skúsenosťou.

Je dobré o !importante vedieť. Väčšinou je to jediný hack, ako prebiť inline zápisy súborov redakčných systémov bez ich hlbšej znalosti.

Nahoru Odpovědět
7.2.2016 18:17
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.