Problema tag div

**riroro14** · 02-07-2010, 20:51

Salve, vorrei porre un quesito ad un problema sui tag div.
Sto creando una struttura di un sito con un header, il contenuto e il footer attraverso i tag div.

Per capirci

codice:

<body bgcolor="#000000">

<div id="header"></div>
<div id="contenuto"></div>
<div id="footer"></div>

</body>

Potendo modificare la grandezza di ogni div mi sono chiesto se si poteva creare qualche problema di visualizzazione con le diverse risoluzioni di monitor.
Vi faccio un esempio, io ho una risoluzione 1200x800px , se io faccio i div di lunghezza 1100px (quindi il div occuperà quasi completamente lo spazio disponibile del monitor) ad una risoluzione inferiore la struttura potrebbe alterarsi? Potrebbe quindi comparire la scroolbarr orizzontale per visualizzare interamente la pagina?E se si c'è un modo per ovviare al problema della risoluzione?

**Pino SIlvestre** · 03-07-2010, 00:11

Se assegni ai div una dimensione fissa, questi la manterranno. Se gli elementi della pagina risultano più larghi della finestra del browser, compare la barra orizzontale.

Soluzioni? Una possibilità è utilizzare un layout fluido, o semifluido. Il div o div non hanno dimensione fissa (la dimensione potrebbe non essere dichiarata, oppure essere percentuale), e quindi si ridimensionano al variare dell'ampiezza della finestra del browser. Un esempio potrebbe essere wikipedia.

Un'altra possibilità è lavorare con un sito a dimensione fissa. In questo caso devi decidere la dimensione tenendo conto delle risoluzioni maggiormente diffuse: allargandoti avrai più libertà di creazione, ma un maggior numero di persone avrà a che fare con la barra orizzontale.
Un tempo era d'obbligo lavorare tenendo conto della risoluzione 800x600, quindi si impostava una larghezza di circa 750/770 pixel, mentre oggi si fa più spesso riferimento alla risoluzione 1024x768 (quindi una larghezza fissa di 950/990 pixel circa). In genere il sito viene centrato e all'aumentare della risoluzione si ingrandiscono le "bande laterali". Un esempio può essere il forum di html.it.

Ai tempi della preistoria del web era diffusa l'abitudine di creare siti diversi per varie risoluzioni o browser, ma questo oggi è anacronistico, oltre che faticoso da gestire.

Dopo tutto questo discorso ti dirò, puoi anche tentare di rilevare la risoluzione dell'utente con javascript e agire di conseguenza, però ti sconsiglio di abusare di questa possibilità.

**riroro14** · 03-07-2010, 12:55

Credo di aver capito, dunque secondo la tua esperienza utilizzare gli AP div in percentuale potrebbe risolvere definitivamente il mio problema?Te lo chiedo perchè ho avuto precedentemente qualche esperienza nel campo però anche gli AP div in percentuale mi avevano creato problemi (ad esempio alcuni browser li visualizzavano in maniera non del tutto corretta e anche se erano fluidi il problema delle risoluzioni non si era risolto completamente).

Ultima domanda, anche se molto spesso vengono "snobbate", sarebbe così scorretto utilizzare le tabelle che,checchè se ne dica, non creano questo tipo di problemi?

**Pino SIlvestre** · 04-07-2010, 15:27

Mi sono reso conto che, forse, la risposta alla tua domanda è molto più semplice di quello che mi era sembrata.

se io faccio i div di lunghezza 1100px (quindi il div occuperà quasi completamente lo spazio disponibile del monitor) ad una risoluzione inferiore la struttura potrebbe alterarsi? Potrebbe quindi comparire la scroolbarr orizzontale per visualizzare interamente la pagina?

Se eviti di dar loro una larghezza definita, i div si adatteranno alla dimensione della finestra del browser. Chiaramente più la finestra del browser sarà stretta (non solo per un fatto di risuluzione: l'utente potrebbe non avere il browser esteso a tutto schermo) più gli elementi contenuti scaleranno verso il basso.

Se invece hai casi più specifici, spiegati più approfonditamente. Non capisco, quando dici "con le tabelle non succede". Assegnare una larghezza di 1100 pixel a una tabella ha lo stesso risultato di assegnare 1100 pixel di width a un div: sbaglio?

**riroro14** · 05-07-2010, 15:36

http://www.etag.ae/

Bè si, forse era meglio spiegarti da subito il mio problema,in sostanza quello che desidero fare è una struttura molto simile a quella del sito che ho linkato, quindi con un contenitore, un header, uno spazio per il contenuto e il footer che si estendono al 100% della lunghezza dello schermo senza lo spazio laterale (come nel caso del forum di html.it) .

Credo di aver risolto il problema iniziale cioè il mio timore che il sito potesse essere visualizzato in maniera sbagliata a seconda delle risoluzioni, ho assegnato alla lunghezza del contenitore il 100% (quindi dovrebbe estendersi per tutte le risoluzioni al 100%) mentre per quanto riguarda il resto ho assegnato misure in px. Devo ancora testare l'efficenza della struttura, spero vada bene.

Non capisco, quando dici "con le tabelle non succede". Assegnare una larghezza di 1100 pixel a una tabella ha lo stesso risultato di assegnare 1100 pixel di width a un div: sbaglio?

No, non sbagli, mi sono espresso male, il fatto è che strutturare un sito con le tabelle risulta molte volte più semplice rispetto ad una struttura con i div quindi mi domandavo se, alla luce dei problemi che stavo incontrando, non fosse il caso di utilizzare le classiche tabelle.

**Pino SIlvestre** · 06-07-2010, 11:06

ok, qualche migliaio di parole è stata spesa inutilmente

Quello che segnali è un layout a larghezza fissa, 960 pixel direi.

Il forum di html.it non ha due colonne laterali, ha uno sfondo grigio. Sembrano 2 colonne? Sì. Sono due colonne? No.
Cosa c'è di diverso nel sito che proponi? La gestione del background. Questo sito propone un'immagine di sfondo ripetuta orizzontalmente (questa: http://www.etag.ae/images/bg-homecontainer.jpg), dandoti l'impressione della fluidità, fluidità che da un punto di vista tecnico non esiste.

La cosa è molto semplice:

codice:

body { background: #colore url('img_da_ripetere_orizzontalmente.jpg') repeat-x }

Ricapitolando:

Credo di aver risolto il problema iniziale cioè il mio timore che il sito potesse essere visualizzato in maniera sbagliata a seconda delle risoluzioni.

Per fortuna hai postato l'esempio a cui vuoi ispirarti, altrimenti non ci saremmo mai capiti: il sito si vedrà sempre com'è, perché è a larghezza fissa. Sotto a 960px comparirà la barra orizzontale (come nell'esempio proposto), ma gli elementi resteranno dove sono. I siti fluidi o semifluidi sono un'altra cosa.

Mi domandavo se, alla luce dei problemi che stavo incontrando, non fosse il caso di utilizzare le classiche tabelle.

Credo che la differenza stia nel fatto che sei pratico di tabelle, e non pratico con la gestione del layout via css. Il layout che proponi è molto semplice da realizzare, bastano tre div, quattro se vuoi stare comodo, più quelli che eventualmente vorrai aggiungere per ottenere quell'effetto con jquery.

I ragazzi del forum CSS sono molto preparati e ti sapranno aiutare.

**riroro14** · 06-07-2010, 14:21

ok, grazie per i chiarimenti

Però se mi permetti io non ho mai detto che il forum html.it ha delle colonne, ho scritto solo che c'era uno spazio laterale.

p.s; le tue parole non sono sprecate!

**Pino SIlvestre** · 07-07-2010, 02:25

Però se mi permetti io non ho mai detto che il forum html.it ha delle colonne, ho scritto solo che c'era uno spazio laterale.

Abbi pazienza, sono abituato a rispondere "nel tempo", cioè scrivo un pezzo di risposta (se non è immediata) ogni tanto... a volte il giorno dopo trovo dei tab del browser con risposte incomplete mai inviate... ... insomma, mi capita di perdere un po' il filo

Discussione: Problema tag div

Strumenti discussione

Ricerca discussione

Visualizza

Problema tag div

Permessi di invio