floyde
Manifesto originale- 7 aprile 2005
- Monterrey Messico
- 27 marzo 2006
Ho due div. Uno ha un'altezza fissa e voglio che l'altro riempia lo spazio verticale rimanente sulla finestra. Se imposto l'altezza di quest'ultimo div al 100%, lo renderà alla stessa altezza della finestra, ma voglio che sia l'altezza della finestra meno l'altezza del primo div.
Questo è il codice che sto usando:
Codice: |_+_|
Ho incluso anche alcune immagini che mostrano cosa voglio fare e cosa sono stato in grado di fare finora. Grazie in anticipo
Allegati
-
xa.gif'file-meta'> 2.6 KB · Visualizzazioni: 10.076 -
xb.gif'file-meta'> 3 KB · Visualizzazioni: 9,950
Nessun nomeMarca
- 17 novembre 2005
- Halifax, Canada
- 27 marzo 2006
Altrimenti, non riesco a pensare a un modo per ottenere quello che vuoi.
stevep
- 13 ottobre 2004
- UK
- 27 marzo 2006
Provare:
Documento senza titolo
a
B
C
D
e
ps Ho imbrogliato facendolo in DW, aggiungendo del contenuto al secondo livello e poi pasticciando con il codice: a DW piace che le cose abbiano un po' di riempimento attorno ai bordi e anche se puoi specificare nelle finestre di dialogo che vuoi che un livello inizia a 0px dall'angolo in alto, devi dirlo due volte, usando la vista codice. Ho dovuto comunque.
floyde
Manifesto originale- 7 aprile 2005
- Monterrey Messico
- 27 marzo 2006
NoNameBrand ha detto: Perché non nidificare il 1° all'interno del 2°?
Altrimenti, non riesco a pensare a un modo per ottenere quello che vuoi.
Grazie, funziona visivamente, ma il secondo div sarà un contenitore per questo layout, quindi ho ancora bisogno che abbia le dimensioni corrette in modo che il suo contenuto possa ereditarli.
Quindi forse semplicemente non è possibile? Forse avrò bisogno di usare un po' di javascript per farlo funzionare?
stepep ha detto: prova:Grazie, ma non sono riuscito a farlo funzionare, che browser hai usato?
floyde
Manifesto originale- 7 aprile 2005
- Monterrey Messico
- 27 marzo 2006
Ok, ecco una foto del mio obiettivo finale. Finora l'ho fatto gradualmente, quindi forse il problema è il mio approccio iniziale. Quindi, come vi avvicinereste a questo (ho solo bisogno di idee)? Useresti css puro o cedere a tabelle o frame?
Allegati
stevep
- 13 ottobre 2004
- UK
- 27 marzo 2006
Il pezzo con cui devi giocare è questo:
#Livello1 {
posizione: assoluta;
sinistra:0px;
in alto: 0px;
larghezza: 100%;
altezza: 180 px;
indice z: 1;
colore di sfondo: #99CCFF;
}
Sgrossa la tua pagina su un pezzo di carta in modo da ottenere le posizioni giuste e questo ti darà la posizione dell'angolo superiore sinistro di ogni livello. L'altezza del livello 1 determinerà la posizione iniziale del livello 2 - in questo caso il livello 2 deve avere ain alto: 180 px;riga di codice.
Se vuoi i 3 livelli come mostrato nel tuo ultimo post, il livello più a sinistra sarà:
#Livello1 {
posizione: assoluta;
sinistra:0px;
in alto: 0px;
larghezza: 200 px;
altezza: 100%;
indice z: 1;
colore di sfondo: #336699;
}
e lo strato superiore RH sarà:
#Livello1 {
posizione: assoluta;
sinistra: 200 px;
in alto: 0px;
larghezza: 100%;
altezza: 180 px;
indice z: 2;
colore di sfondo: #33CCFF;
}
e il terzo livello per riempire il resto della finestra (comunque sia ridimensionato) dovrebbe essere qualcosa del tipo:
#Livello1 {
posizione: assoluta;
sinistra: 200 px;
in alto: 180 px;
larghezza: 100%;
altezza: 100%;
indice z: 3;
colore di sfondo: #99CCFF;
}
È meglio inserire del contenuto fittizio in ogni livello se si utilizza Dreamweaver, nel caso in cui il livello si riduca a nulla nella visualizzazione della pagina, quindi 'a, b, c ecc' nell'html originale sopra.
ps non sono un esperto, potrei sbagliarmi ma spero di esserti stato d'aiuto. Quello che posso dire è che il mio primo bit di codice sembra funzionare. Personalmente non nidicherei i livelli se potessi aiutare un po ', ma sono solo io - faccio solo cose semplici. n
Nessun nomeMarca
- 17 novembre 2005
- Halifax, Canada
- 27 marzo 2006
Ecco cosa farei:
Codice:
pippo credi!
-
- 14 giugno 2003
-
-
- MD / VA / DC
- 27 marzo 2006
Deconcetto...
Dai un'occhiata a FlashObject e nel download c'è il codice per creare un div a schermo intero.. forse può essere personalizzato come vuoi tu.
http://blog.deconcept.com/flashobject/ floyde
Manifesto originale -
- 7 aprile 2005
-
-
- Monterrey Messico
- 28 marzo 2006
Grazie per tutto l'aiuto ragazzi, ma mi sono appena reso conto che il layout esatto che voglio è impossibile da ottenere con una combinazione di larghezze/altezze fisse e percentuali. L'ho riscritto usando solo le percentuali e ora funziona. Se sei interessato al markup fammi sapere e lo posterò. stevep
-
- 13 ottobre 2004
-
-
- UK
- 28 marzo 2006
floyde ha detto: se sei interessato al markup fammi sapere e lo posterò.
Vorrei dare un'occhiata se hai tempo per postare di nuovo.
NoNameBrand ha detto: cos'è questa roba a 'strati'? è quello Dreamweaver per 'rompere le cose davvero bene'?
Beh, non conosco le 'roba' ma immagino che tu abbia intuito che non sono un esperto di CSS - i livelli sono un nome conveniente dato da DW a cose che penso dovrebbero essere chiamate 'elementi posizionati CSS' - e Penso che li chiamino così per far sentire un po' più a loro agio le persone come me con un background di DTP / Photoshop. Guardando il codice che hai incluso nel tuo post NoNameBrand è molto più elegante del mio - dovrò provare a capire davvero il tag div. Grazie per l'OP e per le risposte. n Nessun nomeMarca
-
- 17 novembre 2005
-
-
- Halifax, Canada
- 28 marzo 2006
stevep ha detto: Beh, non conosco le 'roba' ma immagino che tu abbia intuito che non sono un CSS boff - i livelli sono un nome conveniente dato da DW a cose che penso dovrebbero essere chiamate 'elementi posizionati CSS '
Avevano anche indici z impilati su di loro, che posizionano le cose dall'inizio alla fine su una pagina. Ho visto i livelli DW prima che distruggessero completamente un sito, ma per il resto non ho avuto molta esposizione ad essi (era abbastanza, davvero).
Dovrò sforzarmi di capire davvero il tag div.
A è solo un blocco arbitrario - non significa nulla semanticamente, nel modo in cui afa (un paragrafo di testo). UNè la stessa idea, ma per le cose in linea (come a tag, ma ancora una volta semanticamente libero).
La cosa più semplice da fare per imparare queste cose è smettere di usare Dreamweaver. Progetto i miei siti in Photoshop e quindi salvo gli elementi grafici che desidero, annotando i codici colore e alcune misurazioni approssimative dei pixel per scopi di allineamento, quindi codifico il sito in TextWrangler o VIM. floyde
Manifesto originale -
- 7 aprile 2005
-
-
- Monterrey Messico
- 28 marzo 2006
stevep ha detto: Vorrei dare un'occhiata se hai tempo per postare di nuovo.
Ecco, c'è un po' di spagnolo lì dentro, spero non sia troppo confuso:
Codice:Grande schema html { altezza: 100%; } corpo { margine: 0; imbottitura: 0; altezza: 100%; larghezza: 100%; } #sinistra, #destra { float: sinistra; } #sinistra { altezza:100%; colore di fondo: arancione; larghezza: 10%; } #right { altezza: 100%; posizione: parente; larghezza: 90%; } #top { colore di sfondo: blu; altezza: 10%; } #foto { posizione: relativa; altezza: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { altezza: 50%; larghezza: 50%; trabocco: automatico; posizione: assoluta; } #foto_sup_izq, #foto_sup_der { top: 0; } #foto_sup_der, #foto_inf_der { sinistra: 50%; } #foto_inf_izq, #foto_inf_der { alto: 50%; } 
Allegati
Messaggi Popolari