floyde
Original plakat- 7. april 2005
- Monterrey Mexico
- 27. mars 2006
Jeg har to div. Den ene har fast høyde og jeg vil at den andre skal fylle den gjenværende vertikale plassen på vinduet. Hvis jeg setter sistnevnte divs høyde til 100 %, vil det gjøre den samme høyden som vinduet, men jeg vil at det skal være høyden på vinduet minus høyden på den første div.
Dette er koden jeg bruker:
Kode: |_+_|
Jeg inkluderte også noen bilder som viser hva jeg vil gjøre og hva jeg har klart å gjøre så langt. Takk på forhånd
Vedlegg
N
NoNameBrand
- 17. november 2005
- Halifax, Canada
- 27. mars 2006
Ellers kan jeg ikke komme på en måte du kan få det du vil ha.
stevep
- 13. oktober 2004
- Storbritannia
- 27. mars 2006
Prøve:
Navnløst dokument
til
b
c
d
Og
ps jeg jukset ved å gjøre det i DW, legge til noe innhold i det andre laget, og så rote med koden - DW liker at ting har litt polstring rundt kantene og selv om du kan spesifisere i dialogene at du vil ha et lag til start på 0px fra øverste hjørne, du må fortelle det to ganger ved å bruke kodevisningen. Jeg måtte uansett.
floyde
Original plakat- 7. april 2005
- Monterrey Mexico
- 27. mars 2006
NoNameBrand sa: Hvorfor ikke hekke 1. inne i 2.?
Ellers kan jeg ikke komme på en måte du kan få det du vil ha.
Takk, det fungerer visuelt, men den andre div vil være en beholder for denne layouten , så jeg trenger fortsatt at den har de riktige dimensjonene slik at innholdet kan arve dem.
Så kanskje det rett og slett ikke er mulig? Kanskje jeg må bruke et lite javascript for å få det til å fungere?
stevep sa: Prøv:Takk, men jeg kunne ikke få det til å fungere. Hvilken nettleser brukte du?
floyde
Original plakat- 7. april 2005
- Monterrey Mexico
- 27. mars 2006
Ok, her er et bilde av mitt endelige mål. Så langt har jeg gjort det gradvis, så kanskje problemet er min første tilnærming. Så hvordan ville dere tilnærmet dette (jeg trenger bare ideer)? Ville du brukt ren css, eller ville du gi etter for tabeller eller rammer?
Vedlegg
stevep
- 13. oktober 2004
- Storbritannia
- 27. mars 2006
Det du må leke med er dette:
#Layer1 {
posisjon:absolutt;
venstre:0px;
topp:0px;
bredde:100%;
høyde:180px;
z-indeks: 1;
bakgrunnsfarge: #99CCFF;
}
Grov ut siden på et stykke papir slik at du får posisjonene riktig, og det vil gi deg posisjonen til det øvre venstre hjørnet av hvert lag. Høyden på lag 1 vil bestemme startposisjonen til lag 2 - i dette tilfellet må lag 2 ha entopp:180px;kodelinje.
Hvis du vil ha de 3 lagene som du viste i det siste innlegget ditt, vil laget lengst til venstre være:
#Layer1 {
posisjon:absolutt;
venstre:0px;
topp:0px;
bredde:200px;
høyde:100%;
z-indeks: 1;
bakgrunnsfarge: #336699;
}
og det øverste RH-laget vil være:
#Layer1 {
posisjon:absolutt;
venstre:200px;
topp:0px;
bredde:100%;
høyde:180px;
z-indeks: 2;
bakgrunnsfarge: #33CCFF;
}
og det tredje laget for å fylle resten av vinduet (uansett størrelsen på det) skal være noe sånt som:
#Layer1 {
posisjon:absolutt;
venstre:200px;
topp:180px;
bredde:100%;
høyde:100%;
z-indeks: 3;
bakgrunnsfarge: #99CCFF;
}
Det er best å legge litt dummy-innhold i hvert lag hvis du bruker Dreamweaver, i tilfelle laget krymper til ingenting i sidevisning, derav 'a,b,c etc' i den originale html-en ovenfor.
ps jeg er ingen ekspert, jeg kan ta feil, men jeg håper det hjelper. Det jeg kan si er at min første kodebit ser ut til å fungere. Jeg personlig ville ikke hekket lag hvis jeg kunne hjelpe til, men det er bare meg - jeg gjør bare enkelt. N
NoNameBrand
- 17. november 2005
- Halifax, Canada
- 27. mars 2006
Her er hva jeg ville gjort:
Kode:
foo du tror!
-
- 14. juni 2003
-
-
- MD / VA / DC
- 27. mars 2006
Dekonsept...
Sjekk ut FlashObject og i nedlastingen er det kode for å lage en div fullskjerm.. kanskje den kan skreddersys slik du vil ha den.
http://blog.deconcept.com/flashobject/ floyde
Original plakat -
- 7. april 2005
-
-
- Monterrey Mexico
- 28. april 2006
Takk for all hjelp folkens, men jeg skjønte akkurat at det nøyaktige oppsettet jeg ønsker er umulig å oppnå med en kombinasjon av faste bredder/høyder og prosenter. Jeg skrev det om med bare prosenter og nå fungerer det. Hvis du er interessert i markeringen, gi meg beskjed, så legger jeg det ut. stevep
-
- 13. oktober 2004
-
-
- Storbritannia
- 28. april 2006
floyde sa: Hvis du er interessert i markeringen, gi meg beskjed, så legger jeg det ut.
Jeg vil gjerne ta en titt om du har tid til å poste igjen.
NoNameBrand sa: Hva er dette 'lag'-greiene? er det Dreamweaver-aktig for 'break stuff'?
Vel, jeg vet ikke om de 'brytende tingene', men jeg antar at du skjønte at jeg ikke er en CSS-boff - lag er et praktisk navn gitt av DW til ting som jeg mener bør kalles 'CSS-posisjonerte elementer' - og Jeg tror de kaller dem det for å få folk som meg fra en DTP / Photoshop-bakgrunn til å føle seg litt mer komfortable. Når du ser på koden du har inkludert i innlegget ditt NoNameBrand, er den mye mer elegant enn min - jeg må prøve å virkelig få hodet rundt div-taggen. Takk for OP og svar. N NoNameBrand
-
- 17. november 2005
-
-
- Halifax, Canada
- 28. april 2006
stevep sa: Vel, jeg vet ikke om de 'brytende tingene', men jeg antar at du skjønte at jeg ikke er en CSS-boff - lag er et praktisk navn gitt av DW til ting som jeg mener bør kalles 'CSS-posisjonerte elementer' '
De hadde også stablede z-indekser på seg - som plasserer ting foran til bak på en side. Jeg har sett DW-lag før som fullstendig ødela et nettsted, men ellers har jeg ikke hatt mye eksponering for dem (det var nok, egentlig).
Jeg må ha et stikk for å virkelig få hodet rundt div-taggen.
A er bare en vilkårlig blokk - det betyr ikke noe semantisk, slik agjør (et tekstavsnitt). ENer den samme ideen, men for innebygde ting (som en tag, men igjen, semantisk gratis).
Den enkleste tingen å gjøre for å lære dette er å slutte å bruke Dreamweaver. Jeg designer sidene mine i Photoshop og lagrer deretter de grafiske elementene jeg vil ha, sammen med å skrive ned fargekoder og noen grove pikselmålinger for justeringsformål, og så koder jeg nettstedet i TextWrangler eller VIM. floyde
Original plakat -
- 7. april 2005
-
-
- Monterrey Mexico
- 28. april 2006
stevep sa: Jeg vil gjerne ta en titt om du har tid til å poste igjen.
Her er det, det er litt spansk der inne, jeg håper det ikke er for forvirrende:
Kode:Grand Scheme html { height: 100%; } body { margin: 0; polstring: 0; høyde: 100 %; bredde: 100 %; } #venstre, #høyre { flyte: venstre; } #left { height:100%; bakgrunnsfarge: oransje; bredde: 10 %; } #right { høyde: 100 %; stilling:slektning; bredde: 90 %; } #top { bakgrunnsfarge: blå; høyde: 10 %; } #fotos { posisjon: relativ; høyde: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { height: 50%; bredde: 50 %; overløp: auto; posisjon: absolutt; } #foto_sup_izq, #foto_sup_der { topp: 0; } #foto_sup_der, #foto_inf_der { venstre: 50 %; } #foto_inf_izq, #foto_inf_der { topp: 50 %; } 
Vedlegg
Populære Innlegg