Indice del forum Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto
 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

    Newsletter RSS Facebook Twitter Contatti Ricerca
Ancora CSS
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet
Precedente :: Successivo  
Autore Messaggio
pincopallino
Dio maturo
Dio maturo


Registrato: 05/05/02 08:05
Messaggi: 3396
Residenza: Paperopoli

MessaggioInviato: 10 Mar 2005 20:03    Oggetto: Ancora CSS Rispondi citando

Domandina per i "guru" dei CSS

In un'area definita al centro dello schermo, vorrei mettere una colonna stretta a sinistra ed una zona centrale che riempia il resto dell'area definita.

Ho provato una cosa del genere



Definizione dell'area globale

#Content {

        margin: 50px auto 50px auto;

        border-top: 0px solid #006;

        text-align: left;

        border: 1px solid #333;

        width: 800px;

}



Definizione della colonna di sinistra

#Left {

        width: 150px;

        margin: 0px 0px 0px 0px;

        background-color: White;

        text-align: center;

}



Definizione della zona centrale

#Central {

        margin: 0px 0px 0px 150px;

        width: 650px;

        text-align: left;

}



Poi nel codice accatiemmeelle metto qualcosa del genere:



DIV id="Content"

DIV id="Left"

bla bla bla

/DIV

DIV id="Central"

bla bla bla

/DIV

/DIV



(non metto le parentesi angolate altrimenti eZboard si arrabbia).



Problema: ciò che ho messo nel DIV "Central" compare sotto ciò che messo nel DIV "Left", e non a fianco!

Ho cambiato un po' di "width", per accertarmi che non sia un problema di conflitti fra dimensioni. Nulla, sempre uguale.



Dove sbaglio? :rolleyes



GIA

_________________________________

Support Opera browser - read why

Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 08:22
Messaggi: 7982

MessaggioInviato: 11 Mar 2005 01:07    Oggetto: ... Rispondi citando

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 :rolleyes )



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
Profilo Invia messaggio privato HomePage
pincopallino
Dio maturo
Dio maturo


Registrato: 05/05/02 08:05
Messaggi: 3396
Residenza: Paperopoli

MessaggioInviato: 11 Mar 2005 09:34    Oggetto: Re: ... Rispondi citando

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
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 08:22
Messaggi: 7982

MessaggioInviato: 11 Mar 2005 09:55    Oggetto: ... Rispondi citando

un trucco per non incasinarsi troppo la vita con i div e' studiare layout che non necessitino di un controllo al pixel (commento estemporaneo :D )



i div arrivano dove arrivano e allora:

a) accetti la cosa come una caratteristica del layout

b) se vuoi l'effetto tabella crei una gif che simuli le due o tre colonne e la piazzi come sfondo al div contenitore e lasci trasparenti i div-colonna: l'effetto e' lo stesso :)

Top
Profilo Invia messaggio privato HomePage
pincopallino
Dio maturo
Dio maturo


Registrato: 05/05/02 08:05
Messaggi: 3396
Residenza: Paperopoli

MessaggioInviato: 11 Mar 2005 15:05    Oggetto: Re: ... Rispondi citando

Brava Reb, proprio quello che mi serviva!

Omaggio floreale meritato :p





_________________________________

Support Opera browser - read why

Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 08:22
Messaggi: 7982

MessaggioInviato: 11 Mar 2005 18:28    Oggetto: ... Rispondi citando

ma woooow! ma sono commosciuta, grassie pinco :D

Top
Profilo Invia messaggio privato HomePage
pincopallino
Dio maturo
Dio maturo


Registrato: 05/05/02 08:05
Messaggi: 3396
Residenza: Paperopoli

MessaggioInviato: 16 Mar 2005 16:40    Oggetto: Problemi di DOCTYPE Rispondi citando

Reb,

torno alla carica.....



Se nel doctype metto



!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd"



il DIV di destra dichiarato come 100% di larghezza esce di brutto dal DIV globale. Per farcelo stare devo dargli le dimensioni in pixel, oppure usare semplicemente



!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"





L'istesso problema mi affligge se provo in XHTML con dichiarazione



!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/...ional.dtd"



Perché? Pourquoi? Why? Naze?....



'sta cosa mi deprime :o





[Edit] Con "auto" funziona ;)

_________________________________

Support Opera browser - read why

Edited by: pincopallino  at: 16/3/05 20:36
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 08:22
Messaggi: 7982

MessaggioInviato: 16 Mar 2005 21:14    Oggetto: ... Rispondi citando

Quote:
[Edit] Con "auto" funziona ;)


:b



cmq pinco fattene una ragione, per lavorare con i css bisogna essere un po' filosofi :lol

Top
Profilo Invia messaggio privato HomePage
pincopallino
Dio maturo
Dio maturo


Registrato: 05/05/02 08:05
Messaggi: 3396
Residenza: Paperopoli

MessaggioInviato: 16 Mar 2005 22:46    Oggetto: Re: ... Rispondi citando

Quote:
per lavorare con i css bisogna essere un po' filosofi


Un giorno ti mostro la sezione "filosofia" della mia biblioteca.

Però non è che mi serva a molto, per i CSS, se devo essere onesto... :rolleyes

_________________________________

Support Opera browser - read why

Top
Profilo Invia messaggio privato
ioSOLOio
Amministratore
Amministratore


Registrato: 12/09/03 18:01
Messaggi: 16342
Residenza: in un sacco di...acqua

MessaggioInviato: 17 Mar 2005 09:35    Oggetto: Re: ... Rispondi

Quote:
per lavorare con i css bisogna essere un po' filosofi
nel senso che occorre prenderla un po' come viene ?

Ma per questo c'è già Winzozz...!!:b



Top
Profilo Invia messaggio privato
Mostra prima i messaggi di:   
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet Tutti i fusi orari sono GMT + 1 ora
Vai a 1, 2  Successivo
Pagina 1 di 2

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi