Autor Zpráva
psisko
Profil *
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
Jeden sloupec fixní, druhý proměnlivý
Sloupce stejně vysoké
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 *
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
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 }
Prvok <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; }
Obidva selektory ukazujú na 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 *
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
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 {}
Prvok s triedou 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).
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
psisko:
Prosím o odkaz na živú ukážku.
psisko
Profil *
tady ho máš Živá ukázka
Tomáš123
Profil
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 *
zajímavé... v té ukázce to funguje a u mě ne :-(


tady je ukázka... Živá ukázka
Tomáš123
Profil
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
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0