Punto informatico Network
Login Esegui login | Non sei registrato? Iscriviti ora (è gratuito!)
Username: Password:
  • Annuncio Pubblicitario

[XHTML e CSS] DIV e Struttura a 3 Colonne

Cerchi consigli per migliorare il tuo sito? Vuoi aprire un sito in poco tempo?
Discuti con altri webmaster, chiedi chiarimenti ed opinioni in tutta libertà.
Lo spam verrà cancellato.

[XHTML e CSS] DIV e Struttura a 3 Colonne

Messaggioda M@ttia » dom ago 20, 2006 7:33 pm

Un Piccolo problemino di sovrapposizione: nella struttura del mio sito utilizzo i DIV per formare tre colonne: quella di sinistra e destra hanno una larghezza fissa (in px, diciamo 117 e 125 ad es.) mentre quella in mezzo dovrebbe adattarsi a riempire la larghezza che resta (dato che in base alla risoluzione che l'user usa lo spazio rimanente in mezzo varia). Quando l'avevo fatto con le tabelle non c'erano problemi, ma ora coi div e la proprietà float mi trovo un po' (tanto) spaesato, nel senso che purtroppo non riesco a far sì che la colonna centrale si ridimensioni, cosicché la colonna di destra va a sovrapporsi a quella centrale e accade un macello.

Ecco nel concreto il codice CSS:

Codice: Seleziona tutto
#Sinistro
{
   float:   left;
   margin:  0 0 0 0;           // attaccato al bordo e larga fissa, ok
   width:   111px;
}

#Destro
{
   float:   right;
   margin:  0 10px 0 0;      // un poco staccata dal bordo e larga fissa, ok
   width:   270px;
}

#Centrale
{
   margin:  0 0 0 115px;    // Problema (l'ho messo io così solo per dare un output...)
   width:   60%;
}


Qualcuno potrebbe illuminarmi su come fare per far sì che la colonna centrale vada a tappare esattamente il buco (cioè io imposto margini e tutto ma la larghezza giusta evitando sovrapposizioni...).

Vi mostro due screenshots di ciò che è il concreto: Qui è come lo si visualizza se si hanno la risoluzione giusta (o comunque sufficiente a non farle sovrapporre):

Immagine

Qui invece se si ha la risoluzione troppo piccola, oppure si restringe la finestra: invece di comportarsi "come colonne di una tabella" anarchicamente si sovrappongono a vicenda (quella di sinistra è ok perché la centrale ha margine sinistro fisso):

Immagine

Come posso fare per avere un layout a tre colonne di cui le esterne a larghezza fissa ecosicché non si sovrappongano? help please! Thx! [^]
</IE><FIREFOX>
Avatar utente
M@ttia
Moderatore
Moderatore
 
Messaggi: 8363
Iscritto il: lun giu 09, 2003 2:18 pm
Località: Ticino - Estero

Messaggioda gialloporpora » gio ago 24, 2006 5:42 pm

Prova a seguire quanto riportato qui e ci dovresti riuscire.
Ciao
Albert Einstein: « 10 cose sono infinite: l'universo e la stupidità umana ma sull'universo nutro ancora dubbi »
Avatar utente
gialloporpora
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 1780
Iscritto il: mer lug 27, 2005 11:55 pm

Messaggioda M@ttia » sab set 02, 2006 8:03 pm

Oplà, chiedo scusa per il ritardo nella risposta ma fra le tante cose da fare e lo studio il sito web ho dovuto accantonarlo un po' e non ho potuto concentrarmici troppo, comunque ora bene o male sono riuscito nell'intento, se non ancora in un particolare che proprio non riesco a sormontare:

(premetto che non posso farcela con l'attributo min-width, sia perché IE non lo supporta (figuriamoci se su IE andava...) e soprattutto perché in ogni pagina dovrei avere una minwidth diversa, in quanto ogni pagina ha dei contenuti diversi (immagini, ecc.)).


Con la stessa struttura, ma a tabelle, quando il restringimento arriva al limite, la tabella non si restringe più e compaiono gli scroll laterali, e tutto resta dentro di lei, mentre col div esce tutto ciò che non è testo, quindi mi chiedevo solo se non ci fosse appunto un modo per dire al div di comportarsi come fa giustamente la tabella, cioè di contenere quello che gli sta dentro, e se diventa troppo piccolo e le immagini, ecc. dentro di lui non ci stanno più di non restringersi più ma di far comparire le scrollbars (un po' come una min-width dinamica ma in verità è una cosa naturale delle tabelle, non capisco perché il div fa come se non ci fosse...).

Thx! [^]
</IE><FIREFOX>
Avatar utente
M@ttia
Moderatore
Moderatore
 
Messaggi: 8363
Iscritto il: lun giu 09, 2003 2:18 pm
Località: Ticino - Estero


Messaggioda M@ttia » mar set 12, 2006 11:52 am

Sorry se ritiro su il topic ma il problema persiste, nessuno ha idea di come far comportare un div come una tabella per quanto riguarda il contenere il suo contenuto senza farlo uscire dai margini? [:I]

Normale:
Immagine

Div che non rispettano i bordi (come invece fanno le tabelle):
Immagine
</IE><FIREFOX>
Avatar utente
M@ttia
Moderatore
Moderatore
 
Messaggi: 8363
Iscritto il: lun giu 09, 2003 2:18 pm
Località: Ticino - Estero

Messaggioda Boo » dom set 17, 2006 11:59 am

Il punto è che il div non è una tabella, cioè l'immagine che hai tu non è nel div ma sul div. Problemi così se ne trovano ogni giorno, puoi solo scendere a compromessi riducendo l'immagine in modo che difficilmente i visitatori si troveranno colonne sovrapposte oppure eliminare la colonna di destra o ancora restringere quest'ultima.
Avatar utente
Boo
Silver Member
Silver Member
 
Messaggi: 1276
Iscritto il: sab dic 04, 2004 3:41 pm

Messaggioda M@ttia » dom set 17, 2006 7:03 pm

Come temevo... stavo guardando anche l'attributo overflow: auto che fa quello che volevo io ma mette le barre sol oal div e non alla pagina, e anche a compatibilità non credo sia il massimo... Grazie x la conferma [^]
</IE><FIREFOX>
Avatar utente
M@ttia
Moderatore
Moderatore
 
Messaggi: 8363
Iscritto il: lun giu 09, 2003 2:18 pm
Località: Ticino - Estero

Messaggioda Pacopas » dom ott 15, 2006 5:16 am

so che la discussione è un po vecchia ma io non frequento quasi mai questa parte del forum mi sono trovato a rispondere ad una discussione con rumez è ho dato una occhiata anche a questa. probabilmente il buon vecchio mattia (perdonami la confidenza) a già risolto ma se dovesse interessare a qualcuno si può fare creando un contenitore che contiene tutte le tre colonne del corpo impostando i margini della colonna centrale cosi:

margin:0 270px 0 111px;

alla prossima

ps
si risolve anche il problema dell'overflow con il box esterno
alla fine... ogni uomo considera i limiti della propria visione personale come i limiti del mondo...
Avatar utente
Pacopas
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 6708
Iscritto il: mer ott 05, 2005 12:44 am

Messaggioda ssjx » lun ott 16, 2006 12:00 am

Pacopas nn sapevo che te la cavassi anche come webmaster ............ i miei complimenti 6 davvero un dio [^]


tra l'altro mi hai risolto anche il problema che avevo con questo suggerimento [:-D]
Usavo IE e mi lamentavo... usavo Mozilla e mi lamentavo, decisamente meno ma mi lamentavo, ... poi ho trovato Opera e fu amore a prima vista
Avatar utente
ssjx
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 5756
Iscritto il: ven nov 26, 2004 3:37 pm
Località: Barcellona

Messaggioda Pacopas » lun ott 16, 2006 12:19 am

ssjx ha scritto:Pacopas nn sapevo che te la cavassi anche come webmaster ............ i miei complimenti 6 davvero un dio [^]


[:-H]
così mi lusinghi, poi detto da te acquista un maggior valore.
sono contento di esserti stato di aiuto.

alla prossima

[^]
alla fine... ogni uomo considera i limiti della propria visione personale come i limiti del mondo...
Avatar utente
Pacopas
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 6708
Iscritto il: mer ott 05, 2005 12:44 am


Torna a Sviluppo Web

Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti

cron
Powered by phpBB © 2002, 2005, 2007, 2008 phpBB Group
Traduzione Italiana phpBB.it

megalab.it: testata telematica quotidiana registrata al Tribunale di Cosenza n. 22/09 del 13.08.2009, editore Master New Media S.r.l.; © Copyright 2008 Master New Media S.r.l. a socio unico - P.I. 02947530784. GRUPPO EDIZIONI MASTER Spa Tutti i diritti sono riservati. Per la pubblicità: Master Advertising