| Autor | Zpráva | ||
|---|---|---|---|
| Marekk Profil |
#1 · Zasláno: 18. 3. 2020, 12:09:53
Dobrý den,
snažím se pomocí CSS zařídit, aby se aktivní stránka v menu odlišila jinou barvou písma. Vše jiné co jsem zkoušel funguje (podtržení, barva pozadí, border...) jen barva písma se nechce změnit. Nevíte co nevím o color: ? Zatím neovládám PHP, rád bych to řešil jen CSS. |
||
| RastyAmateur Profil |
#2 · Zasláno: 18. 3. 2020, 12:24:16
Marekk:
Uveď, prosím, živou ukázku. Pravděpodobně tam někde máš CSS pravidlo s vyšší prioritou udávající tu barvu? |
||
| Tomášeek Profil |
#3 · Zasláno: 18. 3. 2020, 12:28:01
Marekk:
Na co potřebuješ na změnu barvy textu ovládat PHP? Jinak buď máš slabý selektor, nebo chybně zapssanou barvu. Více možností není, a vyvěštit správnou, neumíme. |
||
| Marekk Profil |
#4 · Zasláno: 18. 3. 2020, 13:14:03
Dík za reakci.
Pravděpodobně tam někde máš CSS pravidlo s vyšší prioritou udávající tu barvu - souhlasím. Když ale .header li a color: rgb(0,0,0) zakomentuji, odkazy se chovají dle schema nenavštívený, navštívený (modrá, fialová)... h1 {
margin: 0px;
font-size: 16px;
}
.header {
z-index: 3;
height: 85px;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: rgb(0,147,234) ;
}
.aktivni {
/* background-color: rgb(130, 205, 255) ;
border-style: solid;
border-width: 1px;
border-color: rgb(0, 147, 234); */
color: white;
}
.neaktivni{
color: black;
}
.header li a {
/*barva pisma menu*/
display: block;
padding: 10px 10px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
font-size: 20px;
color: rgb(0,0,0);
}
.header li a:hover {
/*barva pri najeti*/
//background-color: rgb(20,67,255);
color: white;
}
/*nav ul li:hover, .aktivni {
/* border-style: solid;
border-width: 1px;
border-color: rgb(255, 255, 255);
color: white;
} */
/*nav ul li a:hover{
color: white;
} */
.header .logo {
position: absolute;
top: 0px;
left: 20px;
z-index: 2;
background: url('obr/logo/logo4.jpg') no-repeat;
width: 155px;
height: 100px;
margin-top: 15px;
}
.header .cinnost1 {
position: relative;
top: 15px;
margin-right: 10px;
z-index: 1;
text-align: right;
}
.header .cinnost2 {
position: relative;
top: 15px;
margin-right: 10px;
z-index: 1;
text-align: right;
}
.header .cinnost3 {
position: relative;
top: 15px;
margin-right: 10px;
z-index: 1;
text-align: right;
}
.cara {
border-top: thick solid rgb(0,147,234);
position: relative;
top: 25px;
//right: 5px;
//color: rgb(0,147,234);
}
.header .menu {
position: absolute;
top: 92px;
right: 60px;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
z-index: 3;
/*rychlost rozbaleni*/
}
.header .menu-icon {
/*zobrazeni icony*/
cursor: pointer;
display: inline-block;
//float: right;
padding: 16px 20px;
position: absolute;
top: 92px;
right: 8px;
user-select: none;
background-color: rgb(0,147,234);
} |
||
| lionel messi Profil |
#5 · Zasláno: 18. 3. 2020, 14:43:45
Marekk:
.header li a je silnejší selektor než .aktivni. Potrebuješ silnejší selektor, čiže napr. .header li a.aktivni alebo .header li .aktivni.
Možno by tiež stálo za úvahu upratať si poradie deklarácii v CSS v duchu hesla „zhora nadol → od všeobecného (všetky odkazy) ku kokrétnemu (aktívna položka)“. |
||
| Marekk Profil |
#6 · Zasláno: 18. 3. 2020, 15:10:35
lionel messi:
Omlouvám se, je to napřeskáčku, protože se učím a cíl je zatím úspěšně překonat dílčí překážku a mít z toho radost a motivaci pro další zdokonalování, ne ukázkový kód. Chápu ale, že se v tom další osoba orientuje obtížně. pokusím se to učesat a potom zveřejnit. A možná přitom přijdu na příčinu problémů. |
||
| Tomáš123 Profil |
#7 · Zasláno: 18. 3. 2020, 16:23:57
Marekk:
„A možná přitom přijdu na příčinu problémů.“ To tak často býva. Pár všeobecných postrehov k tvojmu kódu: 1. Veľkosti písma udávaj v jednotkách em.* Písmo s veľkosťou v pixeloch nejde zväčšovať v IE.
2. Vlastnosť z-index sa prejaví iba na prvku, ktorý je poziciovaný – jeho hodnota vlastnosti position je iná ako static.
3. Predpokladám, že aktívnou nazývaš iba jednu z položiek – typické využitie, keď označuješ, na ktorej podstránke sa užívateľ nachádza. Triedu .neaktivni vôbec nepotrebuješ. Neaktívne sú všetky ostatné položky a zacieliš ich selektorom .header li a.
4. Dynamickému obsahu väčšinou nechceme nastavovať pevnú (ale radšej ani dynamickú) výšku. Je dobré ak sa element vie prispôsobiť svojmu obsahu. Užívateľ si môže napríklad zmeniť veľkosť písma a layout sa ti pri pevnej výške rozpadne. V niektorých prípadoch je pevná výška obhájiteľná – nevidíme celú ukážku, tak nechcem hneď strieľať, že je to takto zle – iba na zamyslenie. 5. Pomerne často nastavuješ blokom pozíciu. Zle nastavené sa to zvyčajne rozpadá. V tvojom prípade asi existuje úplne iná, lepšia, cesta. Skús dodať kompletnú živú ukážku vrátane HTML. Umiestniť ju môžeš napríklad do tunajšieho nástroja Živá ukázka. Mimochodom si o pozíciaách môžeš niečo prečítať. 6. Logo by bolo dobré mať zapísané priamo v HTML. Je to obsahový prvok. Do CSS patrí grafika. V krajnom prípade by mala byť stránka bez CSS stále plne čitateľná. 7. Pomenovania tried cinnost1, 2, 3 nie je úplne správne (potreba číslovania väčšinou signalizuje, že je treba názvy lepšie premyslieť). V tomto prípade sa tam dokonca všetky deklarácie opakujú. Vytvor si napríklad spoločnú triedu .cinnost pre všetky tri elementy.
V kóde je ešte mnoho ďalší nezrovnalostí, ale všetko príde časom. * Celá veda s počítaním jednotiek nie je tak úplne pre začiatočníka, tak to proste ber tak, že 1em = 16px (vraj to neplatí všade, ale ešte som sa nestretol s takým prípadom). Ďalej platí, že sa hodnota jednotky počíta podľa aktuálnej veľkosti písma:
<div style="font-size: 1.5em"> <!-- 24px 1.5 krát 16px -->
<span style="font-size: 2em"> <!-- 48px, 2 krát 24px, čo je pre element span aktuálna veľkosť písma -->
Text...
</span>
</div>rem s horšou podporou). Za mňa sú jednotky em tá správna cesta, ale stretávam sa s pixelmi na množstve veľkých webov.
|
||
| Tomášeek Profil |
#8 · Zasláno: 18. 3. 2020, 17:15:09
Tomáš123:
Velikost písma se dá nastavit v prohlížeči. Výchozí bývá 16, ale někdo muže mít nastaveno více (nebo méně). Pak se vše počítá od toho. Nicméně pokud někdo má nastavené písmo větší, má k tomu důvod. Naopak není důvod, aby se mu na webu zobrazovaly muňky. Většina lidi ale zoomuje, samotné písmo se moc nezvetsuje. Dokonce i to s nemožnosti zvětšit písmo v px je už par let pasé. To bylo naposledy v ie6, ne? :-) |
||
| Marekk Profil |
#9 · Zasláno: 18. 3. 2020, 17:32:39
Děkuji za všechny reakce. Budu se snažit vše zlepšit, potrvá to ale nějaký čas. Např. to, že selektory mají váhu jsem se dozvěděl až zde, i když jsem to (i dík nefunkčnosti barvy písma) tak trochu tušil. Takže je toho balík, co bych měl nastudovat. Ještě jednou dík všem, ozvu se s upraveným kódem.
|
||
| Tomáš123 Profil |
#10 · Zasláno: 18. 3. 2020, 18:49:28
Tomášeek:
„Nicméně pokud někdo má nastavené písmo větší, má k tomu důvod.“ A jednotka em narozdiel od absolútnych jednotiek toto očakávané správanie prehliadačov umožňuje.
„To bylo naposledy v ie6, ne?“ Nevie to žiadne IE vrátane najnovšej jedenástky. |
||
| Tomášeek Profil |
#11 · Zasláno: 18. 3. 2020, 20:14:45
Tomáš123:
„A jednotka em narozdiel od absolútnych jednotiek toto očakávané správanie prehliadačov umožňuje.“
Ano, netvrdím opak. Byl to jen dodatek k tomu 16px písmu, které je výchozí. S tím IE se nechci hádat, IE nemám po ruce, abych vyzkoušel. Ale možné to je (ono od doby, kdy prohlížeče zoomují, což je IE7+ není potřeba zvětšovat samotné písmo taková jako dříve, navíc defaultně prohlížeče zoomují (Ctrl + "+"), nezvětšují). IE6 neměla nástroje, jak text v px zvětšit či přiblížit, což se dnes neděje. |
||
| Marekk Profil |
#12 · Zasláno: 20. 3. 2020, 07:44:59
Dobrý den,
na HNYK.CZ - živá ukázka jsem vložil CSS a HTML. Ten problém jsem sice odstranil, ale ještě budu mít dotaz k těm třídám a identifikátorům, něco mě tam není jasné. Nyní mě ale trápí nejvíc, že se první řádky prvního článku zalamují příliš brzo. Můžete mě někdo vysvětlit proč? |
||
| Tomášeek Profil |
Marekk:
V tom odstavci se dělá místo pro menu. Začni tím, že vyhodíš veškeré position: relative/absolute (a k tomu související top a left, které už ale budou ignorovány). Pro začátek bych dal menu v kódu nad obsah, abys nemusel vůbec pozicovat. Budeš tak mít chování stránky coby začátečník lépe pod kontrolou.
Ještě malá ukázka: Pokud si odebereš position od article a .menu, vznikne ti toto. To je přesně ten prostor, který tam zůstane i pokud pak začneš čachrovat s top pozicí. Toho pozicování tam bude ještě více, projdi si celý dokument a začni to stavět bez pozicování.
|
||
| Marekk Profil |
Dobře, dík udělám to. |
||
| Marekk Profil |
#15 · Zasláno: 20. 3. 2020, 20:21:58
Tomášeek:
A když nyní mám pozice tak, jak je v HTML psáno po sobě, mohu je postupně posouvat dle potřeby? Jaký typ posunu použít? A jak udělat, aby v mobilním zobrazení byly činnosti pod sebou a v desktop zobrazení vedle sebe? Obtékáním? HNYK.CZ - živá ukázka |
||
| Tomáš123 Profil |
#16 · Zasláno: 20. 3. 2020, 20:48:49
Marekk:
„Jaký typ posunu použít?“ Na posun používaj margin. Na zmenu rozloženia, napríklad ak chceš prvky vedľa seba, použi float.
„A jak udělat, aby v mobilním zobrazení byly činnosti pod sebou a v desktop zobrazení vedle sebe?“ V desktop verzii budú prvky obtekané, v mobilnej verzii im nastavíš float: none. Zrejme budeš manipulovať aj so šírkou, tak vynuluješ aj tú – width: auto.
Poziciovanie, ktoré si používal doteraz, je vlastne trochu iný prístup ku problému. Niektoré problémy, ktoré ide elegantne riešiť pomocou obtekania, sa poziciovaním riešia zle alebo sa riešiť nedajú. Naopak, existujú situácie, ktoré ide elegantne riešiť poziciovaním a obtekanie je na ne krátke. |
||
| Bubák Profil |
#17 · Zasláno: 20. 3. 2020, 23:20:00
Tomáš123:
„Na posun používaj margin.“
Co je dobré pochopit, je slučování marginů, popsáno na mnoha místech, třebas tady: Margin » Slučování vertikálních okrajů (margin collapsing) Pro jistotu dodám, že margin může být i záporný, občas se to hodí. |
||
| Marekk Profil |
A je možné takto zanořovat div? Potřebuji přidat margin těm třem činnostem jako celku a nefunguje to. Pokud to nejde takto, jak tedy? Živá ukázka
... vyřešeno, měl jsem v css mezeru, kde neměla být. |
||
| lionel messi Profil |
#19 · Zasláno: 21. 3. 2020, 10:55:30
Marekk:
Začnem trochu inak. V [#15] som si všimol, že si použil znaky // v CSS ako komentár. Hoci v mnohých programovacích jazykoch táto sekvencia skutočne funguje ako komentár, CSS (ktoré mimochodom programovacím jazykom nie je) pozná iba jeden spôsob komentárov a to /* pre začiatok komentára a */ pre koniec. Že // na začiatku riadka de facto funguje (prehliadač vidí neznámu vlastnosť //top) neznamená, že je to nutne dobrý nápad.
Ty si „činnostiam“ úspešne nastavil margin-right. Samozrejme, môžeš ich obaliť do jedného divu a následne nastavovať margin jemu, nevidím dôvod, prečo by to nemalo fungovať. Ak som nezodpovedal tvoju otázku, tak sme sa zrejme nepochopili a pomôže aktuálna živá ukážka. |
||
| Marekk Profil |
Prosím o radu, proč mám po rozbalení menu levý modrý okraj a proč se menu nerozbalí hned pod čarou ale níž. Už fakt nevím. HNYK.CZ - živá ukázka
lionel messi: Tak to jsem nevěděl. Zařídím se dle toho, dík. |
||
| Tomáš123 Profil |
#21 · Zasláno: 21. 3. 2020, 16:35:03
Marekk:
Všeobecná rada: zoznám sa s nástrojmi pre vývojárov. Pôvodne si sa pýtal na zmenu štýlu odkazu. Prešli sme cez rady k čistote kódu, poziciovanie, obtekanie, ale hľadať za teba nevynulovaný okraje už je príznakom vysoko rozťahaného četovacieho vlákna. Takým sa tu snažíme kvôli prehľadnosti a hodnote aj pre ostatných všeobecne vyhýbať. Bol tvoj pôvodný problém vyriešený? Navrhujem, aby si sa v tejto chvíli naučil vyhľadávať a pracovať samostatne. Odkázali sme ťa na viacero rozsiahlych zdrojov so základmi i pokročilejšími technikami. Ak ťa táto oblasť naozaj zaujíma, začni štúdium napríklad tam. Ak si nebudeš vedieť rady, samozrejme je tvoja otázka vítaná a radi ju zodpovieme. Umiestni ju v takom prípade do nového vlákna. V tomto vlákne už, prosím, rieš iba otázky týkajúce sa nefunkčnej zmeny štýlu odkazu. |
||
| lionel messi Profil |
Marekk:
„proč mám po rozbalení menu levý modrý okraj“ ul {
list-style: none;
overflow: hidden;
background-color: rgb(0,147,234);
/*barva pozadi menu*/
}„proč se menu nerozbalí hned pod čarou ale níž“ Každý HTML element má čosi ako svoj predvolený vzhľad, ktoré môžeš ovplyvniť práve pomocou CSS. Ty si na rozbaľovacie menu použil element ul (čo nie je chyba). Ten má predvolene nastavený istý margin, ktorý sa prejaví ako medzera. Ak ho nechceš, nastav ho elementu na nulu. Ako spomína Tomáš123, vývojárske nástroje by ti pri odhalení oboch chýb pomohli. |
||
| Marekk Profil |
#23 · Zasláno: 21. 3. 2020, 16:49:03
lionel messi:
Ano, původní problém vyřešen. I za tyto poslední rady a odkazy díky. |
||
|
Časová prodleva: 4 roky
|
|||
0