| Autor | Zpráva | ||
|---|---|---|---|
| psisko Profil * |
#1 · Zasláno: 29. 5. 2016, 14:10:33
Ahoj, potřeboval bych udělat layout jako je na tomhle obrázku, ale nevím jak udělat to modré a žluté
postimg.org/image/ek05rr2xn když nastavím šířku na 100% tak mi to jde pod to červné... |
||
| Xanomes_ Profil * |
psisko:
Asi jsi nenastavil float :) Xanomes: Špatně jsem nastavil CSS, tady je opravený kód: Živá ukázka |
||
| psisko Profil * |
jj, ale problém je v tom že když neco napišu tak je to jakoby pod tim menu
Živá ukázka snad na to přijdu... pffffffffff.. tohle sem sesmolíkoval Živá ukázka bude to fungovat tak jak chci? snad jo ne? oprava... ještě sem na neco zapomel... tady je finale Živá ukázka aha... tak znovu,... ale jak ted mám udělat aby se podmenu a streva roztáhla na celou šířku? Živá ukázka Živá ukázka |
||
| Keeehi Profil |
#4 · Zasláno: 29. 5. 2016, 17:00:43
|
||
| psisko Profil * |
podobal bych zarovnal na pravo a menu v levo, ale stejnak se to neroztáhlo
díky, pročtu a vyzkouším |
||
| psisko Profil * |
pffffffffffffffffffffffffff....
když přídám záhlavý a zápatí tak to komplet zmizí... Živá ukázka smazal jsem ze zahlavi flaot left a už se to tam objevilo... ale proč? čim to bylo způsobený? Jeden sloupec fixní, druhý proměnlivý tady na té stránce je <div class="sloupec pravy"> přičemž sloupec má float: left; a pravy má float: right; vůbec se v tom nevyznám.... jak má teda prohlížeč poznat jestli to má bejt v levo nebo v pravo? |
||
| psisko Profil * |
#7 · Zasláno: 30. 5. 2016, 09:14:21
tak už vím většinu co sem chtěl vědět, ale pořád nechápu proč má ten pravý sloupec jak hodnotu left tak right
|
||
| Tomáš123 Profil |
#8 · Zasláno: 30. 5. 2016, 09:54:14
psisko:
Trochu si to tu mýliš s chatom. Prečo nevyskúšaš pár vecí, neporozmýšľaš a nenapíšeš sem jeden zmysluplný príspevok s jednoznačným porblémom? Namiesto toho si tu odfukuješ a v pribehu 10 minút vygeneruješ kilá nepotrebného a neaktuálneho textu. „pořád nechápu proč má ten pravý sloupec jak hodnotu left tak right“ Pravidiel, podľa ktorých sa v CSS na prvok jednoznačne uplatní vlastnosť je viac. Jedným z nich je priorita neskôr uvedeného zápisu, ktorá v tomto prípade nie je jasná. Príklad: div { background: red }
div { background: blue }<div> bude nakoniec modrý, lebo sa, v prípade selektorov rovnakej sily ukazujúcich na ten istý prvok, uplatní posledné pravidlo v štýlopise.
.obal--margin .sloupec { float: left; }
.obal--margin .pravy { float: right; }pravy stĺpec. Trieda sloupec je všeobecnejšia a zameriava aj iné prvky na stránke, ale to nech ťa nemätie. Oba selektory majú tiež rovankú silu (dve triedy). Uplatní sa teda pravidlo neskoršieho zápisu a stĺpec s triedou pravy prebije skôr uvedené pravidlo pre sloupec.
Ak máš ešte nejaké otázky, formuluj ich prosím rozumnejšie. Vlákna na diskusii by mali slúžiť aj iným, hľadajúcim riešenie rovnakého problému. |
||
| psisko Profil * |
#9 · Zasláno: 30. 5. 2016, 23:16:01
už nemám žádné, ale jako příklad je to teda pěkně blbý, když tam dá zcela zbytečný kód
|
||
| Tomáš123 Profil |
#10 · Zasláno: 31. 5. 2016, 18:30:47
psisko:
Chyba tam nie je. Je to alternatívny zápis. V príklade na stránke je kód: .obal--margin {overflow: hidden}
.obal--margin .sloupec {float: left; color: #fff}
.obal--margin .pravy {float: right; background: #DA3F94; width: 100%; margin-left: -100px}
.obal--margin .levy {background: #1081DD; width: 100px; opacity: .8} Odstránime všetky deklarácie okrem obtekania: .obal--margin .sloupec {float: left;}
.obal--margin .pravy {float: right;}
.obal--margin .levy {}levy má zároveň aj triedu sloupec. Aplikovala sa teda deklarácia float: left a prvok je obtekaný.
Kód v článku by sa teda dal zapísať aj takto: .obal--margin {overflow: hidden}
.obal--margin .sloupec {/*float: left;*/ color: #fff}
.obal--margin .pravy {float: right; background: #DA3F94; width: 100%; margin-left: -100px}
.obal--margin .levy {float: left; background: #1081DD; width: 100px; opacity: .8} V pôvodnom riešení ale každý prvok s triedou sloupec pláva vľavo (použitím spločnej triedy bolo nastavenie obtekania zovšeobecnené). V novom, intuitívnejšom, príklade je nutné explicitne nastaviť obtekanie každému prvku (ak pribudne nový stĺpec, nebude obtekaný bez zásahu do kódu).
Vhodnosť riešenia samozrejme závisí od požiadaviek. Kód v článku ale v žiadnom prípade nie je blbý či zbytočný (ako si si mohol všimnúť, deklarácia bola iba presunutá na iné miesto). |
||
|
Časová prodleva: 11 dní
|
|||
| psisko Profil * |
ok, takže mám další problém.... nemůžu označovat texty, nefunguje a:hover, čím to?
a ted sem použil metodu s calc místo toho (margin-left:-250px; padding-left:250px;) a normálně to jde.... ale jak to mám vyřešit kdybych to chtšl mít podle toho marin-padding? |
||
| Tomáš123 Profil |
#12 · Zasláno: 12. 6. 2016, 14:37:03
psisko:
Prosím o odkaz na živú ukážku. |
||
| psisko Profil * |
#13 · Zasláno: 12. 6. 2016, 14:59:03
tady ho máš Živá ukázka
|
||
| Tomáš123 Profil |
#14 · Zasláno: 12. 6. 2016, 15:23:48
psisko:
V prípade, že do seba dva prvky vzájomne zasahujú, o tom, ktorý z nich sa zobrazí vyššie (čo bude čím prekryté) sa rozhoduje na základe poradí prvkov v zdrojovom kóde. Toto implicitné rozhodnutie ide zamozrejme upraviť vlastnosťou z-index, ktorá ale funguje iba pri prvkoch s nastavenou nestatickou pozíciou.
Prvým riešením teda je, prvku nav nastaviť position: relative; (ktorá s prvkom prakticky nič nerobí) a z-index: 1 (čo prvok presunie nahor).
Druhým, myslím lepším riešením, je zmeniť poradie prvkov (v článku je táto varianta), aby sa už implicitne rozhodlo o požadovanej priorite navigácie. Ukážka (je potrebné blok navigácie presunúť za blok obsahu a obsahu nastaviť obtekanie vpravo – v ukážke na riadku 128). |
||
| psisko Profil * |
|||
| Tomáš123 Profil |
#16 · Zasláno: 12. 6. 2016, 17:16:16
psisko:
Ja som v tej ukážke, kde to funguje, vymenil poradie prvkov v HTML... <nav> musí ísť pod div.obal. Prečítaj si ešte raz poslednú vetu môjho predchádzajúceho príspevku. Aj to v zátvorke.
|
||
| psisko Profil * |
hm.... a důvod proč musí být nav v html až za obal? to nechápu....
ale jo funguje to akorát nechápu proč ta navigace nemůže bejt v html jako první a jakto že když do .hlavni napíšu <a href="#">odkaz</a> tak to normálně funguje? dyt je to přece jako první |
||
| Tomáš123 Profil |
#18 · Zasláno: 12. 6. 2016, 17:52:47
psisko:
„a důvod proč musí být nav v html až za obal?“ Neskôr uvedený prvok v HTML prekryje predchádzajúce elementy. Ukážka. Preto, ak je neskôr zapísaný prvok obsahu, prekryje pred ním existujúcu navigáciu. Výmena poradia mení role. „a jakto že když do .hlavni napíšu <a href="#">odkaz</a> tak to normálně funguje?“ V oblasti obsahu je iba jeden prvok (s ničím sa neprekrýva). Navigácia tam nezasahuje. |
||
|
Časová prodleva: 8 let
|
|||
0