Floyde
Původní plakát- 7. dubna 2005
- Monterrey Mexiko
- 27. března 2006
Mám dva divy. Jeden má pevnou výšku a chci, aby ten druhý vyplnil zbývající vertikální prostor na okně. Pokud nastavím výšku druhého prvku div na 100 %, bude mít stejnou výšku jako okno, ale chci, aby to byla výška okna mínus výška prvního prvku div.
Toto je kód, který používám:
Kód: |_+_|
Přiložil jsem i nějaké obrázky, které ukazují, co chci dělat a co jsem zatím dokázal. Díky předem
Přílohy
N
NoNameBrand
- 17. listopadu 2005
- Halifax, Kanada
- 27. března 2006
Jinak mě nenapadá způsob, jak dostat to, co chceš.
stevep
- 13. října 2004
- Spojené království
- 27. března 2006
Snaž se:
Dokument bez názvu
na
b
C
d
A
ps Podváděl jsem tím, že jsem to udělal v DW, přidal nějaký obsah do druhé vrstvy a pak si pohrál s kódem - DW má rád věci, když mají kolem okrajů nějaké vycpávky a i když v dialozích můžete určit, že chcete, aby vrstva začněte na 0px od horního rohu, musíte to říct dvakrát pomocí zobrazení kódu. Stejně jsem musel.
Floyde
Původní plakát- 7. dubna 2005
- Monterrey Mexiko
- 27. března 2006
NoNameBrand řekl: Proč nevnořit 1. do 2.?
Jinak mě nenapadá způsob, jak dostat to, co chceš.
Díky, vizuálně to funguje, ale druhý div bude kontejner pro toto rozložení, takže stále potřebuji, aby měl správné rozměry, aby je mohl zdědit jeho obsah.
Takže to možná prostě není možné? Možná budu muset použít trochu javascriptu, aby to fungovalo?
stevep řekl: Zkuste:Díky, ale nepodařilo se mi to zprovoznit, jaký prohlížeč jsi použil?
Floyde
Původní plakát- 7. dubna 2005
- Monterrey Mexiko
- 27. března 2006
Dobře, tady je obrázek mého konečného cíle. Doteď jsem to dělal postupně, takže možná je problém v mém prvotním přístupu. Jak byste k tomu přistoupili (jen potřebuji nápady)? Použili byste čisté css, nebo byste dali přednost tabulkám či rámům?
Přílohy
stevep
- 13. října 2004
- Spojené království
- 27. března 2006
Trocha, se kterou si musíte pohrát, je tato:
#Layer1 {
poloha:absolutní;
vlevo:0px;
top:0px;
šířka:100%;
výška:180px;
z-index: 1;
barva pozadí: #99CCFF;
}
Zhrubněte stránku na kus papíru, abyste získali správné pozice, a tím získáte polohu horního levého rohu každé vrstvy. Výška vrstvy 1 určí počáteční polohu vrstvy 2 - v tomto případě vrstva 2 musí mít anahoře:180px;řádek kódu.
Pokud chcete mít 3 vrstvy, jak ukazujete ve svém posledním příspěvku, pak vrstva nejvíce vlevo bude:
#Layer1 {
poloha:absolutní;
vlevo:0px;
top:0px;
šířka:200px;
výška: 100 %;
z-index: 1;
barva pozadí: #336699;
}
a horní RH vrstva bude:
#Layer1 {
poloha:absolutní;
vlevo:200px;
top:0px;
šířka:100%;
výška:180px;
z-index: 2;
barva pozadí: #33CCFF;
}
a 3. vrstva, která vyplní zbytek okna (jakkoli se změní velikost), by měla být něco jako:
#Layer1 {
poloha:absolutní;
vlevo:200px;
nahoře:180px;
šířka:100%;
výška: 100 %;
z-index: 3;
barva pozadí: #99CCFF;
}
Pokud používáte Dreamweaver, je nejlepší vložit do každé vrstvy nějaký fiktivní obsah, pro případ, že by se vrstva v zobrazení stránky scvrknula na nic, proto „a,b,c atd.“ v původním html výše.
ps nejsem odborník, možná se pletu, ale doufám, že to pomůže. Mohu říci, že můj první kousek kódu funguje. Já osobně bych nehnízdil vrstvy, kdybych mohl trochu pomoci, ale to jsem prostě já - dělám jen jednoduché. N
NoNameBrand
- 17. listopadu 2005
- Halifax, Kanada
- 27. března 2006
Zde je to, co bych udělal:
Kód:
foo věříš!
-
- 14. června 2003
-
-
- MD / VA / DC
- 27. března 2006
Dekoncept...
Podívejte se na FlashObject a ve stažení je kód pro vytvoření div fullscreen.. možná to půjde upravit, jak chcete.
http://blog.deconcept.com/flashobject/ Floyde
Původní plakát -
- 7. dubna 2005
-
-
- Monterrey Mexiko
- 28. března 2006
Díky za veškerou pomoc, ale právě jsem si uvědomil, že přesné rozložení, které chci, není možné dosáhnout kombinací pevných šířek/výšek a procent. Přepsal jsem to pouze pomocí procent a teď to funguje. Pokud máte o označení zájem, dejte mi vědět a já ho zveřejním. stevep
-
- 13. října 2004
-
-
- Spojené království
- 28. března 2006
floyde řekl: Pokud máte zájem o označení, dejte mi vědět a já to zveřejním.
Rád bych se podíval, jestli máte čas napsat znovu.
NoNameBrand řekl: Co je to za „vrstvy“? je to esque ve stylu Dreamweaveru pro 'rozbité věci'?
No, nevím o „přelomových věcech“, ale myslím, že jste usoudili, že nejsem nadšenec CSS – vrstvy jsou příhodný název, který DW dává věcem, které by se podle mě měly nazývat „prvky umístěné v CSS“ – a Myslím, že jim tak říkají, aby se lidé jako já z pozadí DTP / Photoshopu cítili trochu pohodlněji. Když se podíváte na kód, který jste zahrnuli do svého příspěvku, NoNameBrand je mnohem elegantnější než ten můj – budu muset bodnout, abych si ten tag div pořádně probral. Děkuji za OP a odpovědi. N NoNameBrand
-
- 17. listopadu 2005
-
-
- Halifax, Kanada
- 28. března 2006
stevep řekl: No, nevím o „přelomových věcech“, ale myslím, že jste usoudili, že nejsem nadšenec CSS – vrstvy jsou příhodný název, který DW dává věcem, které by se podle mě měly nazývat „prvky umístěné v CSS“ '
Měli na sobě také skládané z-indexy – které umísťují věci na stránku zepředu dozadu. Už jsem viděl DW vrstvy, které totálně rozbily web, ale jinak jsem s nimi nebyl moc vystavený (to bylo dost, opravdu).
Budu se muset pobodat, abych si pořádně prošel hlavou kolem tagu div.
A je pouze libovolný blok - sémanticky nic neznamená, jako adělá (odstavec textu). Aje stejný nápad, ale pro vložené věci (jako a tag, ale opět bez sémantiky).
Nejjednodušší věcí, kterou se můžete naučit, je přestat používat Dreamweaver. Své stránky navrhuji ve Photoshopu a poté ukládám grafické prvky, které chci, spolu se zapisováním barevných kódů a několika hrubých rozměrů pixelů pro účely zarovnání, a poté kóduji stránky v TextWrangler nebo VIM. Floyde
Původní plakát -
- 7. dubna 2005
-
-
- Monterrey Mexiko
- 28. března 2006
stevep řekl: Rád bych se podíval, jestli máte čas znovu napsat příspěvek.
Tady to je, je tam trochu španělštiny, doufám, že to není příliš matoucí:
Kód:Velké schéma html { výška: 100 %; } tělo { okraj: 0; výplň: 0; výška: 100 %; šířka: 100 %; } #left, #right { float: left; } #left { vyska:100%; barva pozadí: oranžová; šířka: 10 %; } #vpravo { vyska: 100%; poloha:relativní; šířka: 90 %; } #top { barva pozadí: modrá; výška: 10 %; } #fotos { pozice: relativní; výška: 90 %; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { výška: 50 %; šířka: 50 %; přetečení: auto; pozice: absolutní; } #foto_sup_izq, #foto_sup_der { top: 0; } #foto_sup_der, #foto_inf_der { vlevo: 50 %; } #foto_inf_izq, #foto_inf_der { nahoře: 50 %; } 
Přílohy
Populární Příspěvky