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: 7987

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: 7987

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: 7987

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: 7987

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 citando

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
juzo kun
Dio maturo
Dio maturo


Registrato: 19/04/04 08:32
Messaggi: 1853
Residenza: tra la tastiera e la sedia

MessaggioInviato: 17 Mar 2005 09:37    Oggetto: Re: ... Rispondi citando

Più che per i CSS la filosofia serve per capire come si comportano i brausa ;)



Sul doctype e annessi e connessi è abbastanza esauriente questo articolo... se avete voglia di sorbirvelo ;)



Cià

JK

Top
Profilo Invia messaggio privato HomePage
pincopallino
Dio maturo
Dio maturo


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

MessaggioInviato: 17 Mar 2005 13:27    Oggetto: Re: ... Rispondi citando

Diavolo d'una JK, cos'hai scovato! Molto interessante l'articolo citato. In particolare, ho provato il trucchetto sul file INI per obbligare Opera a lavorare sempre in modalità Standard, anziché quirk (vedere qui) e ho scoperto che:



1. questi fora fanno pena - in modalità standard i caratteri sono così piccoli da risultare illeggibili

2. il famoso width=100% che mi dava problema in XHTML, dà lo stesso problema anche in HTML se guardato in modalità standard.



Mumble mumble... adesso sono obbligato a ricontrollare tutti i miei siti in modalità standard e correggere chissà quante pagine, nonostante validino W3C. Farò notte, mi sa... :(

_________________________________

Support Opera browser - read why

Top
Profilo Invia messaggio privato
pincopallino
Dio maturo
Dio maturo


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

MessaggioInviato: 17 Mar 2005 20:10    Oggetto: Re: ... Rispondi citando

Fanciulle

(chissà perché i CSS sembrano pane per la nostra componente femminile)

torno alla carica con i CSS.

Supponiamo che invece di due colonne ne vogliate 3, con colore di sfondo diverso e lunghezza variabile a seconda del testo. Il trucchetto della GIF di reb non è più applicabile.

La struttura che ho è



content: contiene tutto

header

left, central, right

footer



Non c'è modo di forzare i tre left, central, right, ad avere la stessa lunghezza? Diciamo sempre il central ha lunghezza massima, ma variabile. Voglio che left e right abbiano la stessa lunghezza di central.

Con la tabelle è automatico, con i CSS come si fa? Immagino sia un problema comune, quindi anche la soluzione dovrebbe essere banale.

Ancora GIA! :D

_________________________________

Support Opera browser - read why

Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


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

MessaggioInviato: 17 Mar 2005 22:20    Oggetto: Re: ... Rispondi citando

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, :lol )



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


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

MessaggioInviato: 17 Mar 2005 23:19    Oggetto: Re: ... Rispondi citando

Insomma, stesso colore (sfondo) alle colonne laterali e colore assegnato a quella centrale. Non c'è invece modo di ottenere qualcosa come questo (molto perfettibile, lo so: sto facendo delle prove) sostituendo tabelle con div, senza complicarsi troppo la vita.. ehm, il layout? :rolleyes



Mumble, mumble...

_________________________________

Support Opera browser - read why

Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


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

MessaggioInviato: 18 Mar 2005 20:08    Oggetto: ... Rispondi citando

come questo dici? o come questo? ;)



vorrei fare una precisazione: e' considerato accessibile anche un layout a tabella fatto in modo che togliendo la tabella il contenuto resti ugualmente fruibile, che non e' arabo, ma significa semplicemente niente tabelle annidate o da leggere "di seguito" (tecnica classica per allineare un form, ad esempio: l'etichetta nella colonna 1 e il campo nella colonna 2) e riempite invece a mo' di colonna di giornale



ad esempio zn ora e' fatto con un div in cima, un div in fondo e una tabella a tre colonne per il corpo: se io disabilito le tabelle, il contenuto ha comunque un senso compiuto e questo layout se vuoi e' applicabilissimo al tuo sito :)



edit: ho corresciunuto un po' di italiacano che mi era scampato ;)

Edited by: rebelia at: 18/3/05 23:21
Top
Profilo Invia messaggio privato HomePage
pincopallino
Dio maturo
Dio maturo


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

MessaggioInviato: 18 Mar 2005 20:21    Oggetto: Re: ... Rispondi citando

OK Reb, grazie, adesso so come passare il weekend ;)

_________________________________

Support Opera browser - read why

Top
Profilo Invia messaggio privato
pincopallino
Dio maturo
Dio maturo


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

MessaggioInviato: 23 Mar 2005 15:09    Oggetto: Nuntio vobis gaudium magnum! Rispondi

Grazie ai consigli di Reb, son riuscito a CSS+DIV-izzare il sito linkato qui sopra, mantenendo le tre colonne. Very Happy


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
Pagina 1 di 1

 
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