Mga Forum

Ginagawa ang div element na punan ang natitirang patayong espasyo? (css)

floyde

Orihinal na poster
Abr 7, 2005
Monterrey Mexico
  • Mar 27, 2006
pwede ba?
Mayroon akong dalawang div. Ang isa ay may nakapirming taas at gusto kong punan ng isa ang natitirang patayong espasyo sa bintana. Kung itatakda ko ang taas ng huling div sa 100%, gagawin itong kapareho ng taas ng window, ngunit gusto kong ito ang taas ng window na binawasan ang taas ng unang div.

Ito ang code na ginagamit ko:
Code: |_+_|
Nagsama rin ako ng ilang larawan na nagpapakita kung ano ang gusto kong gawin at kung ano ang nagawa ko hanggang ngayon. Salamat nang maaga

Mga kalakip

  • xa.gif xa.gif'file-meta'> 2.6 KB · Views: 10,076
  • xb.gif xb.gif'file-meta'> 3 KB · Views: 9,950
N

NoNameBrand

Nob 17, 2005


Halifax, Canada
  • Mar 27, 2006
Bakit hindi pugad ang 1st sa loob ng 2nd?

Kung hindi, wala akong maisip na paraan para makuha mo ang gusto mo.

steve

Oktubre 13, 2004
UK
  • Mar 27, 2006
Sa palagay ko, maaaring hindi mo sinasabi sa pangalawang layer kung saan ito dapat magsimula, kaya ipinapalagay na ito ay nagsisimula sa itaas, samakatuwid ay nagsasapawan sa unang layer.
Subukan:




Walang pamagat na dokumento










sa






b


c




d


At







ps Dinaya ko sa pamamagitan ng paggawa nito sa DW, pagdaragdag ng ilang nilalaman sa pangalawang layer, at pagkatapos ay ginugulo ang code - Gusto ng DW ang mga bagay na magkaroon ng ilang padding sa mga gilid at kahit na maaari mong tukuyin sa mga dialog na gusto mo ng isang layer magsimula sa 0px mula sa tuktok na sulok, kailangan mong sabihin ito ng dalawang beses, gamit ang Code View. Kinailangan ko pa rin.

floyde

Orihinal na poster
Abr 7, 2005
Monterrey Mexico
  • Mar 27, 2006
Sinabi ng NoNameBrand: Bakit hindi ilagay ang 1st sa loob ng 2nd?

Kung hindi, wala akong maisip na paraan para makuha mo ang gusto mo.

Salamat, gumagana iyon, ngunit ang pangalawang div ay magiging isang lalagyan para sa layout na ito, kaya kailangan ko pa rin itong magkaroon ng mga wastong dimensyon upang ang mga nilalaman nito ay maaaring magmana ng mga ito.

Kaya marahil ito ay hindi posible? Marahil ay kailangan kong gumamit ng kaunting javascript para magawa ito?

sabi ni steve: Subukan:
Salamat, pero hindi ko magawa, anong browser ang ginamit mo?

floyde

Orihinal na poster
Abr 7, 2005
Monterrey Mexico
  • Mar 27, 2006
Ang grand scheme ng mga bagay

Ok eto ang pic ng ultimate goal ko. Sa ngayon ay unti-unti ko na itong ginagawa, kaya siguro ang problema ay ang aking paunang diskarte. So how would you guys approach this (I just need ideas)? Gumagamit ka ba ng purong css, o bibigay ka ba sa mga talahanayan o mga frame?

Mga kalakip

  • grand_scheme.gif grand_scheme.gif'file-meta'> 40.2 KB · Mga View: 450

steve

Oktubre 13, 2004
UK
  • Mar 27, 2006
Ginamit ko ang Safari. Kopyahin at i-paste ang tipak ng code sa isang text file - tiyaking mayroon itong .html suffix kapag na-save mo ito. Pagkatapos ay i-drag lamang ang bagong file sa isang bukas na window ng browser. Sinubukan lang ito gamit ang Firefox at ok na ito - sa tingin ko ito ang gusto mo.
Ang bit na kailangan mong paglaruan ay ito:
#Layer1 {
posisyon:ganap;
kaliwa:0px;
tuktok:0px;
lapad:100%;
taas:180px;
z-index: 1;
kulay ng background: #99CCFF;
}

Gupitin ang iyong pahina sa isang piraso ng papel upang makuha mo ang mga posisyon nang tama, at iyon ay magbibigay sa iyo ng posisyon sa itaas na sulok ng LH ng bawat layer. Ang taas ng layer 1 ay tutukuyin ang panimulang posisyon ng layer 2 - sa kasong ito ang layer 2 ay kailangang magkaroon ng atuktok:180px;linya ng code.
Kung gusto mo ang 3 layer gaya ng ipinapakita mo sa iyong huling post, ang pinakakaliwang layer ay:
#Layer1 {
posisyon:ganap;
kaliwa:0px;
tuktok:0px;
lapad:200px;
taas:100%;
z-index: 1;
kulay ng background: #336699;
}

at ang tuktok na layer ng RH ay magiging:
#Layer1 {
posisyon:ganap;
kaliwa:200px;
tuktok:0px;
lapad:100%;
taas:180px;
z-index: 2;
kulay ng background: #33CCFF;
}

at ang ika-3 layer upang punan ang natitirang bahagi ng window (gayunpaman ito ay binago) ay dapat na tulad ng:
#Layer1 {
posisyon:ganap;
kaliwa:200px;
tuktok:180px;
lapad:100%;
taas:100%;
z-index: 3;
kulay ng background: #99CCFF;
}

Pinakamainam na maglagay ng ilang dummy na nilalaman sa bawat layer kung gumagamit ka ng Dreamweaver, kung sakaling ang layer ay lumiit sa wala sa page view, kaya't ang 'a,b,c etc' sa orihinal na html sa itaas.

ps hindi ako expert baka mali ako pero sana makatulong. Ang masasabi ko ay ang aking unang bit ng code ay mukhang gumagana. Ako mismo ay hindi maglalagay ng mga layer kung makakatulong ako, ngunit ako lang iyon - simple lang ang ginagawa ko. N

NoNameBrand

Nob 17, 2005
Halifax, Canada
  • Mar 27, 2006
Ano ang bagay na 'layers' na ito? ang Dreamweaver-esque para sa 'break stuff real-good'?

Narito ang gagawin ko:
Code:
foo   

naniniwala ka!

Hun 14, 2003
MD / VA / DC
  • Mar 27, 2006
Deconcept...

Check out FlashObject at sa download may code para makagawa ng div fullscreen.. baka pwede i-tailor kung paano mo gusto.

http://blog.deconcept.com/flashobject/

floyde

Orihinal na poster
Abr 7, 2005
Monterrey Mexico
  • Mar 28, 2006
Salamat sa lahat ng tulong guys, ngunit napagtanto ko na ang eksaktong layout na gusto ko ay imposibleng makamit sa isang kumbinasyon ng mga nakapirming lapad/taas at porsyento. Isinulat ko itong muli gamit ang mga porsyento lamang at ngayon ito ay gumagana. Kung interesado ka sa markup ipaalam sa akin at ipo-post ko ito.

steve

Oktubre 13, 2004
UK
  • Mar 28, 2006
sabi ni floyde: Kung interesado ka sa markup ipaalam sa akin at ipo-post ko ito.
Gusto kong tingnan kung mayroon kang oras upang mag-post muli.
Sinabi ni NoNameBrand: Ano itong 'mga layer' na bagay? ang Dreamweaver-esque para sa 'break stuff real-good'?
Well, hindi ko alam ang tungkol sa 'breaking stuff' ngunit sa palagay ko naisip mo na hindi ako isang CSS boff - ang mga layer ay isang maginhawang pangalan na ibinigay ng DW sa mga bagay na sa tingin ko ay dapat tawaging 'CSS positioned elements' - at Sa palagay ko ay tinawag nila iyon para maging mas komportable ang mga taong katulad ko mula sa background ng DTP / Photoshop. Kung titingnan mo ang code na iyong isinama sa iyong post na NoNameBrand, mas elegante ito kaysa sa akin - kailangan kong magkaroon ng saksak sa talagang pag-ikot ng aking ulo sa div tag. Salamat sa OP at sa mga sagot. N

NoNameBrand

Nob 17, 2005
Halifax, Canada
  • Mar 28, 2006
Sinabi ni stevep: Well, hindi ko alam ang tungkol sa 'breaking stuff' ngunit sa palagay ko naisip mo na hindi ako isang CSS boff - ang mga layer ay isang maginhawang pangalan na ibinigay ng DW sa mga bagay na sa tingin ko ay dapat tawaging 'CSS positioned elements '

Mayroon din silang stacking z-index sa mga ito - na naglalagay ng mga bagay sa harap-sa-likod sa isang pahina. Nakakita na ako ng mga layer ng DW bago na ganap na sinira ang isang site, ngunit kung hindi man ay hindi gaanong nalantad sa kanila (tama na iyon, talaga).

Kailangan kong magkaroon ng saksak sa talagang pag-ikot ng ulo ko sa div tag.

Ang A ay isang arbitrary block lamang - hindi ito nangangahulugan ng anumang semantically, ang paraan a

ginagawa (isang talata ng teksto). Aay ang parehong ideya, ngunit para sa mga inline na bagay (tulad ng a tag, ngunit muli, libre ang semantiko).

Ang pinakamadaling gawin upang matutunan ang bagay na ito ay ang paghinto sa paggamit ng Dreamweaver. Idinisenyo ko ang aking mga site sa Photoshop at pagkatapos ay i-save ang mga graphical na elemento na gusto ko, kasama ang pagsusulat ng mga code ng kulay at ilang magaspang na sukat ng pixel para sa mga layunin ng pag-align, at pagkatapos ay kino-code ko ang site sa TextWrangler o VIM.

floyde

Orihinal na poster
Abr 7, 2005
Monterrey Mexico
  • Mar 28, 2006
Sinabi ni steve: Gusto kong tingnan kung mayroon kang oras upang mag-post muli.
Eto na, medyo may kastila diyan, sana hindi masyadong nakakalito:

Code:
Grand Scheme html { taas: 100%; } body { margin: 0; padding: 0; taas: 100%; lapad: 100%; } #kaliwa, #kanan { float: left; } #kaliwa { height:100%; kulay ng background: orange; lapad: 10%; } #right { height: 100%; posisyon:kamag-anak; lapad: 90%; } #top { background-color: blue; taas: 10%; } #fotos { position: relative; taas: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { height: 50%; lapad: 50%; overflow: auto; posisyon: ganap; } #foto_sup_izq, #foto_sup_der { tuktok: 0; } #foto_sup_der, #foto_inf_der { left: 50%; } #foto_inf_izq, #foto_inf_der { tuktok: 50%; } img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg 

Mga kalakip

  • img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg'file-meta'> 36.3 KB · Views: 405