floyde
Originalaffisch- 7 april 2005
- Monterrey Mexiko
- 27 mars 2006
Jag har två div. Den ena har en fast höjd och jag vill att den andra ska fylla det återstående vertikala utrymmet på fönstret. Om jag ställer in den sistnämnda div:s höjd till 100 %, kommer den att bli samma höjd som fönstret, men jag vill att det ska vara höjden på fönstret minus höjden på den första div.
Det här är koden jag använder:
Kod: |_+_|
Jag inkluderade också några bilder som visar vad jag vill göra och vad jag har kunnat göra hittills. Tack på förhand
Bilagor
N
NoNameBrand
- 17 november 2005
- Halifax, Kanada
- 27 mars 2006
Annars kan jag inte komma på ett sätt att få som du vill.
stevep
- 13 oktober 2004
- Storbritannien
- 27 mars 2006
Prova:
Namnlöst dokument
till
b
c
d
Och
ps jag fuskade genom att göra det i DW, lägga till lite innehåll i det andra lagret och sedan bråka med koden - DW gillar att saker har lite utfyllnad runt kanterna och även om du kan ange i dialogerna att du vill ha ett lager för att börja på 0px från det övre hörnet, du måste berätta det två gånger med hjälp av kodvyn. Jag var tvungen i alla fall.
floyde
Originalaffisch- 7 april 2005
- Monterrey Mexiko
- 27 mars 2006
NoNameBrand sa: Varför inte kapsla 1:an inuti 2:an?
Annars kan jag inte komma på ett sätt att få som du vill.
Tack, det fungerar visuellt, men den andra div kommer att vara en behållare för den här layouten, så jag behöver fortfarande att den har rätt dimensioner så att innehållet kan ärva dem.
Så det kanske helt enkelt inte är möjligt? Jag kanske måste använda lite javascript för att få det att fungera?
stevep sa: Prova:Tack, men jag kunde inte få det att fungera, vilken webbläsare använde du?
floyde
Originalaffisch- 7 april 2005
- Monterrey Mexiko
- 27 mars 2006
Okej, här är en bild på mitt slutmål. Hittills har jag gjort det gradvis, så problemet är kanske mitt första tillvägagångssätt. Så hur skulle ni närma er detta (jag behöver bara idéer)? Skulle du använda ren css, eller skulle du ge efter för tabeller eller ramar?
Bilagor
stevep
- 13 oktober 2004
- Storbritannien
- 27 mars 2006
Det du måste leka med är detta:
#Layer1 {
position:absolut;
vänster:0px;
top:0px;
bredd:100%;
höjd:180px;
z-index: 1;
bakgrundsfärg: #99CCFF;
}
Rugga ut sidan på ett papper så att du får rätt positioner, och det ger dig positionen för det övre vänstra hörnet av varje lager. Höjden på lager 1 kommer att avgöra startpositionen för lager 2 - i detta fall måste lager 2 ha entop:180px;kodrad.
Om du vill ha de 3 lagren som du visade i ditt senaste inlägg, kommer lagret längst till vänster att vara:
#Layer1 {
position:absolut;
vänster:0px;
top:0px;
bredd:200px;
höjd:100%;
z-index: 1;
bakgrundsfärg: #336699;
}
och det övre RH-skiktet kommer att vara:
#Layer1 {
position:absolut;
vänster:200px;
top:0px;
bredd:100%;
höjd:180px;
z-index: 2;
bakgrundsfärg: #33CCFF;
}
och det tredje lagret för att fylla resten av fönstret (hur det än ändras) bör vara något i stil med:
#Layer1 {
position:absolut;
vänster:200px;
top:180px;
bredd:100%;
höjd:100%;
z-index: 3;
bakgrundsfärg: #99CCFF;
}
Det är bäst att lägga lite dummy-innehåll i varje lager om du använder Dreamweaver, om lagret krymper till ingenting i sidvyn, därav 'a,b,c etc' i den ursprungliga HTML-koden ovan.
ps jag är ingen expert, jag kan ha fel men jag hoppas det hjälper. Vad jag kan säga är att min första kodbit verkar fungera. Jag personligen skulle inte kapa lager om jag kunde hjälpa till att bita, men det är bara jag - jag gör bara enkelt. N
NoNameBrand
- 17 november 2005
- Halifax, Kanada
- 27 mars 2006
Här är vad jag skulle göra:
Koda:
foo du tror!
-
- 14 juni 2003
-
-
- MD / VA / DC
- 27 mars 2006
Dekoncept...
Kolla in FlashObject och i nedladdningen finns kod för att göra en div fullskärm.. kanske kan skräddarsys hur du vill ha den.
http://blog.deconcept.com/flashobject/ floyde
Originalaffisch -
- 7 april 2005
-
-
- Monterrey Mexiko
- 28 mars 2006
Tack för all hjälp killar, men jag insåg precis att den exakta layouten som jag vill ha är omöjlig att uppnå med en kombination av fasta bredder/höjder och procentsatser. Jag skrev om det med bara procentsatser och nu fungerar det. Om du är intresserad av uppmärkningen låt mig veta så lägger jag upp det. stevep
-
- 13 oktober 2004
-
-
- Storbritannien
- 28 mars 2006
floyde sa: Om du är intresserad av uppmärkningen låt mig veta så lägger jag upp det.
Jag skulle vilja ta en titt om du har tid att skriva igen.
NoNameBrand sa: Vad är det här för 'lager'-grejer? är det där Dreamweaver-liknande för 'bryta grejer riktigt bra'?
Tja, jag vet inte om de 'brytande grejerna' men jag antar att du sa att jag inte är en CSS-boff - lager är ett bekvämt namn som DW ger till saker som jag tycker borde kallas 'CSS-positionerade element' - och Jag tror att de kallar dem så för att få folk som mig från en DTP/Photoshop-bakgrund att känna sig lite mer bekväma. När du tittar på koden du har inkluderat i ditt inlägg NoNameBrand så är det mycket mer elegant än min - jag måste ha koll på att verkligen få huvudet runt div-taggen. Tack för OP och svaren. N NoNameBrand
-
- 17 november 2005
-
-
- Halifax, Kanada
- 28 mars 2006
stevep sa: Tja, jag vet inte om de 'brytande grejerna' men jag antar att du sa att jag inte är en CSS-boff - lager är ett bekvämt namn som DW ger till saker som jag tycker borde kallas 'CSS-positionerade element' '
De hade också stackande z-index på dem - som placerar saker fram och bak på en sida. Jag har sett DW-lager förut som totalt slog sönder en sida, men annars har jag inte haft mycket exponering för dem (det räckte faktiskt).
Jag måste ha ett hugg för att verkligen få huvudet runt div-taggen.
A är bara ett godtyckligt block - det betyder ingenting semantiskt, som agör (ett stycke text). Aär samma idé, men för inline-saker (som en taggen, men återigen, semantisk fri).
Det enklaste du kan göra för att lära dig det här är att sluta använda Dreamweaver. Jag designar mina sajter i Photoshop och sparar sedan de grafiska element som jag vill ha, tillsammans med att anteckna färgkoder och några grova pixelmått för justering, och sedan kodar jag sajten i TextWrangler eller VIM. floyde
Originalaffisch -
- 7 april 2005
-
-
- Monterrey Mexiko
- 28 mars 2006
stevep sa: Jag skulle vilja ta en titt om du har tid att skriva igen.
Här är det, det är lite spanska där, jag hoppas att det inte är för förvirrande:
Koda:Grand Scheme html { höjd: 100%; } body { marginal: 0; stoppning: 0; höjd: 100%; bredd: 100%; } #vänster, #höger { flyta: vänster; } #left { height:100%; bakgrundsfärg: orange; bredd: 10%; } #right { höjd: 100%; position:släkting; bredd: 90%; } #top { bakgrundsfärg: blå; höjd: 10%; } #fotos { position: relativ; höjd: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { höjd: 50%; bredd: 50%; overflow: auto; position: absolut; } #foto_sup_izq, #foto_sup_der { topp: 0; } #foto_sup_der, #foto_inf_der { vänster: 50%; } #foto_inf_izq, #foto_inf_der { topp: 50%; } 
Bilagor
Populära Inlägg