Floyde
Pôvodný plagát- 7. apríla 2005
- Monterrey Mexiko
- 27. marec 2006
Mám dve div. Jeden má pevnú výšku a chcem, aby ten druhý vyplnil zvyšný vertikálny priestor na okne. Ak nastavím výšku druhého prvku div na 100 %, bude mať rovnakú výšku ako okno, ale chcem, aby to bola výška okna mínus výška prvého prvku div.
Toto je kód, ktorý používam:
Kód: |_+_|
Priložil som aj niekoľko obrázkov, ktoré ukazujú, čo chcem robiť a čo som doteraz dokázal. Vopred ďakujem
Prílohy
N
NoNameBrand
- 17. novembra 2005
- Halifax, Kanada
- 27. marec 2006
Inak ma nenapadá spôsob, ako dostať to, čo chceš.
stevep
- 13. októbra 2004
- UK
- 27. marec 2006
Skúste:
Dokument bez názvu
do
b
c
d
A
ps Podvádzal som tak, že som to urobil v DW, pridal som nejaký obsah do druhej vrstvy a potom som sa pohral s kódom - DW má rád veci, keď majú okolo okrajov nejaké vypchávky a aj keď v dialógových oknách môžete určiť, že chcete, aby vrstva začnite na 0px od horného rohu, musíte to povedať dvakrát pomocou zobrazenia kódu. Aj tak som musel.
Floyde
Pôvodný plagát- 7. apríla 2005
- Monterrey Mexiko
- 27. marec 2006
NoNameBrand povedal: Prečo nevnoriť 1. do 2.?
Inak ma nenapadá spôsob, ako dostať to, čo chceš.
Vďaka, to funguje vizuálne, ale druhý div bude kontajner pre toto rozloženie, takže stále potrebujem, aby mal správne rozmery, aby ich mohol zdediť jeho obsah.
Takže možno to jednoducho nie je možné? Možno budem musieť použiť malý javascript, aby to fungovalo?
stevep povedal: Skúste:Ďakujem, ale nepodarilo sa mi to spustiť, aký prehliadač si použil?
Floyde
Pôvodný plagát- 7. apríla 2005
- Monterrey Mexiko
- 27. marec 2006
Ok, tu je obrázok môjho konečného cieľa. Doteraz som to robil postupne, takže možno je problém v mojom prvotnom prístupe. Ako by ste k tomu pristúpili vy (potrebujem len nápady)? Použili by ste čisté css, alebo by ste dali prednosť tabuľkám či rámom?
Prílohy
stevep
- 13. októbra 2004
- UK
- 27. marec 2006
Trošku, s ktorou sa musíte pohrať, je toto:
#Layer1 {
poloha:absolútna;
left:0px;
top:0px;
šírka: 100 %;
výška: 180px;
z-index: 1;
farba pozadia: #99CCFF;
}
Zhrubnite svoju stránku na kus papiera, aby ste získali správne pozície, a tým získate polohu horného ľavého rohu každej vrstvy. Výška vrstvy 1 určí počiatočnú polohu vrstvy 2 - v tomto prípade vrstva 2 musí mať ahore:180px;riadok kódu.
Ak chcete 3 vrstvy tak, ako ste to ukázali vo svojom poslednom príspevku, potom vrstva najviac vľavo bude:
#Layer1 {
poloha:absolútna;
left:0px;
top:0px;
šírka: 200px;
výška: 100 %;
z-index: 1;
farba pozadia: #336699;
}
a horná RH vrstva bude:
#Layer1 {
poloha:absolútna;
vľavo:200px;
top:0px;
šírka: 100 %;
výška: 180px;
z-index: 2;
farba pozadia: #33CCFF;
}
a 3. vrstva, ktorá vyplní zvyšok okna (akokoľvek sa zmení veľkosť), by mala byť niečo ako:
#Layer1 {
poloha:absolútna;
vľavo:200px;
hore:180px;
šírka: 100 %;
výška: 100 %;
z-index: 3;
farba pozadia: #99CCFF;
}
Ak používate Dreamweaver, je najlepšie do každej vrstvy vložiť fiktívny obsah pre prípad, že by sa vrstva v zobrazení stránky scvrkla na nič, teda „a,b,c atď“ v pôvodnom html vyššie.
ps nie som odbornik, mozno sa mylim ale dufam ze to pomoze. Môžem povedať, že môj prvý kúsok kódu funguje. Osobne by som nehniezdil vrstvy, ak by som mohol pomôcť, ale som len ja - robím len jednoduché. N
NoNameBrand
- 17. novembra 2005
- Halifax, Kanada
- 27. marec 2006
Tu je to, čo by som urobil:
kód:
foo veríš!
-
- 14. júna 2003
-
-
- MD / VA / DC
- 27. marec 2006
Dekoncept...
Pozrite si FlashObject a v stiahnutí je kód na vytvorenie div fullscreen.. možno sa to dá prispôsobiť, ako chcete.
http://blog.deconcept.com/flashobject/ Floyde
Pôvodný plagát -
- 7. apríla 2005
-
-
- Monterrey Mexiko
- 28. marec 2006
Ďakujem za všetku pomoc, ale práve som si uvedomil, že presné rozloženie, ktoré chcem, nie je možné dosiahnuť kombináciou pevných šírok/výšok a percent. Prepísal som to iba pomocou percent a teraz to funguje. Ak máte záujem o označenie, dajte mi vedieť a ja ho zverejním. stevep
-
- 13. októbra 2004
-
-
- UK
- 28. marec 2006
floyde povedal: Ak máte záujem o označenie, dajte mi vedieť a ja ho uverejním.
Rád by som sa pozrel, či máte čas napísať príspevok znova.
NoNameBrand povedal: Čo je to za „vrstvy“? je to ako z Dreamweavera pre 'prestávkové veci' naozaj dobré'?
Neviem o „rozbíjacích veciach“, ale myslím, že ste usúdili, že nie som nadšenec CSS – vrstvy sú vhodným názvom, ktorý DW dáva veciam, o ktorých si myslím, že by sa mali nazývať „prvky umiestnené v CSS“ – a Myslím, že ich tak nazývajú, aby sa ľudia ako ja z pozadia DTP / Photoshop cítili o niečo pohodlnejšie. Pri pohľade na kód, ktorý ste zahrnuli do svojho príspevku NoNameBrand, je oveľa elegantnejší ako ten môj – budem sa musieť poriadne potrápiť, aby som sa dostal k tagu div. Ďakujem za OP a odpovede. N NoNameBrand
-
- 17. novembra 2005
-
-
- Halifax, Kanada
- 28. marec 2006
stevep povedal: No, neviem o 'prelomových veciach', ale myslím, že ste usúdili, že nie som nadšenec CSS - vrstvy sú vhodným názvom, ktorý DW dáva veciam, o ktorých si myslím, že by sa mali nazývať 'prvky umiestnené v CSS '
Mali na sebe aj stohovacie z-indexy – ktoré umiestňujú veci na stránku spredu dozadu. Videl som už predtým DW vrstvy, ktoré totálne rozbili stránku, ale inak som im nebol príliš vystavený (to bolo naozaj dosť).
Budem sa musieť poriadne potrápiť, aby som dostal hlavu okolo značky div.
A je len ľubovoľný blok - sémanticky nič neznamená, ako arobí (odsek textu). Aje rovnaký nápad, ale pre inline veci (ako a tag, ale opäť bez sémantiky).
Najjednoduchšie, ako sa naučiť tieto veci, je prestať používať Dreamweaver. Svoje stránky navrhujem vo Photoshope a potom ukladám grafické prvky, ktoré chcem, spolu s zaznamenávaním farebných kódov a niektorých hrubých rozmerov pixelov na účely zarovnania, a potom kódujem stránku v TextWrangler alebo VIM. Floyde
Pôvodný plagát -
- 7. apríla 2005
-
-
- Monterrey Mexiko
- 28. marec 2006
stevep povedal: Rád by som sa pozrel, či máte čas napísať príspevok znova.
Tu to je, je tam trochu španielčiny, dúfam, že to nie je príliš mätúce:
kód:Grand Scheme html { výška: 100 %; } telo { okraj: 0; výplň: 0; výška: 100 %; šírka: 100 %; } #left, #right { float: left; } #left { vyska:100%; farba pozadia: oranžová; šírka: 10 %; } #vpravo { vyska: 100%; poloha:relatívna; šírka: 90 %; } #top { farba pozadia: modrá; výška: 10 %; } #foto { poloha: relatívna; výška: 90 %; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { výška: 50%; šírka: 50 %; prepad: auto; pozícia: absolútna; } #foto_sup_izq, #foto_sup_der { hore: 0; } #foto_sup_der, #foto_inf_der { vľavo: 50%; } #foto_inf_izq, #foto_inf_der { hore: 50 %; } 
Prílohy
Populárne Príspevky