Precedente :: Successivo |
Autore |
Messaggio |
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
Inviato: 11 Mar 2005 01:07 Oggetto: ... |
|
|
non son guru, ma provo a risponderti ugualmente
Definizione dell'area globale
#Content {
margin: 50px auto 50px auto;
border-top: 0px solid #006;
text-align: left;
border: 1px solid #333;
width: 800px;
position: relative
}
Definizione della colonna di sinistra
#Left {
width: 150px;
margin: 0px 0px 0px 0px;
background-color: White;
text-align: center;
posi*ion: abso*ute;
top: 0;
left: 0;
}
(ho editato, perche' ezboard non gradisce il posizionamento assoluto )
Definizione della zona centrale
#Central {
margin: 0px 0px 0px 150px;
width: 650px; <- togli questa
text-align: left;
}
(premetto che questa e' UNA delle soluzioni, ma io mi ci trovo bene, perche' non sfonda neanche a concentrarsi!)
il posizionamento assoluto fa riferimento al primo posizionamento relativo soprastante, ecco perche' definisco con position: relative il div contenitore, altrimenti il div di sinistra si posiziona rispetto alla finestra del browser
poi posiziono in maniera assoluta il div di sinistra
quindi do giustamente il margine a sinistra di 150px (io farei anche uno o due di piu', cmq fai qualche prova) e poi evito di definire la larghezza del div centrale, che cosi' riempie tutto lo spazio che gli resta a disposizione
unico problema e' che il posizionamento assoluto toglie il div dal fluire della pagina, percio' e' come non ci sia; i div successivi (il footer o la chiusura del div contenitore, ad esempio) faranno riferimento quindi al div di destra, che di default e' posizionato in maniera relativa; eventualmente, nelle pagine col div di destra piu' corto di quello di sinistra, puoi risolvere aggiungendo una classe con un padding-bottom pari alla quantita' che sicuramente permette alle tue pagine di essere visualizzate correttamente
naturalmente, se il div di sinistra e' sistematicamente piu' lungo dell'altro, il posizionamento sara' fatto in maniera inversa
Edited by: rebelia at: 11/3/05 1:10
|
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
Inviato: 11 Mar 2005 09:34 Oggetto: Re: ... |
|
|
Grazie Reb,
quasi perfetto! In effetti, ho un altro DIV, "Header", che prende tutta l'area, quindi il posizionamento assoluto del "Left" non deve essere messo a top 0, ma ad un valore diverso. Nel mio caso l'ho messo a 150, ma temo che in browser diversi si vedano sovrapposizioni - controllerò.
A proposito. Il div di sinistra è più corto di quello di destra. Non c'è modo di dirgli di occupare tutta l'area verticale disponibile? Poiché ha colore diverso, il fatto che termini prima non è molto elegante. Con una tabella è semplice, ma poiché nel div di destra ho pure una tabella, se usassi tab invece di div avrei tabella in tabella - non proprio l'ideale.
Grazie ancora.
_________________________________
Support Opera browser - read why |
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
|
Top |
|
|
ioSOLOio Amministratore
Registrato: 12/09/03 18:01 Messaggi: 16342 Residenza: in un sacco di...acqua
|
|
Top |
|
|
juzo kun Dio maturo
Registrato: 19/04/04 08:32 Messaggi: 1853 Residenza: tra la tastiera e la sedia
|
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
Inviato: 17 Mar 2005 22:20 Oggetto: Re: ... |
|
|
vediamo...
per avere la colonna colorata a seconda della lunghezza del testo, ti basta colorare la colonna stessa anziche' usare la gif; dare una lunghezza fissa alla colonna non funziona, non con le colonne absolute e non con tutti i browser (come diceva juzo, la filosofia serve per i browser, non per i css, )
quindi le due modalita' tra cui scegliere ed essere sicuro di avere un discreto crossbrowsing sono: gif e conseguente lunghezza uguale (simulata, naturalmente) per le tre colonne, oppure ogni colonna colorata per i fatti suoi e lunga come il proprio contenuto; altra alternativa e' dare effetti diversi, come ad esempio lasciare header, footer, colonne laterali e spazio attorno tutti dello stesso colore di sfondo e colorare diversamente solo la colonna centrale dei contenuti (www.birreriapedavena.info , tanto per fare un po' di SPAM, ma non mi viene in mente nessun altro sito con questa caratteristica cosi' al volo!)
sicuramente se hai i div laterali sempre della stessa lunghezza, con un gioco di div annidati ed adeguatamente formattati (posizione, colore, altezza, padding e chi piu' ne ha, piu' ne metta... ), probabilmente riesci ad ottenere il risultato desiderato, ma sei sicuro che ne valga la pena? tutto dipende da questo e non sto dicendo che NON ne valga la pena, solo che devi vedere tu
... e dio disse "pkunzip universo" (anonimo) |
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
|
Top |
|
|
pincopallino Dio maturo
Registrato: 05/05/02 08:05 Messaggi: 3396 Residenza: Paperopoli
|
Inviato: 23 Mar 2005 15:09 Oggetto: Nuntio vobis gaudium magnum! |
|
|
Grazie ai consigli di Reb, son riuscito a CSS+DIV-izzare il sito linkato qui sopra, mantenendo le tre colonne.
|
|
Top |
|
|
|