Centrare un DIV per renderlo visibile su qualsiasi monitor

[roby.rigoli.6970]

Salve.

Sono nuovo qui su Mr. Webmaster e ho un quesito da porre agli esperti di questo forum
Da 2 anni ormai ho aperto il mio sito personale di cicloamatore e con la poca conoscenza informatica che possiedo sono riuscito a strutturarlo usando i DIV e posizionandoli in determinati punti dello schermo.

Premetto che ho un monitor 22 pollici con risoluzione massima di 1920x1080. So che ormai la maggior parte dei siti viene realizzata con risoluzione di 1600x1200. Come editor sto usando in versione trial Adobe Dreamweaver CC in italiano col quale sto acquisendo una certa dimestichezza nella creazione dei DIV e nel loro posizionamento nello schermo.

Siccome sono consapevole che non tutti i possessori di PC hanno monitor come il mio a livello di risoluzione, volevo sapere come posso centrare un DIV da 1600x1200 e vederlo centrato sia sul mio monitor che su quello di altri che magari possono avere un notebook da 17" o un monitor classico o abbastanza avanti con gli anni


Certo di un gradito riscontro, saluto distintamente

 

[cory]

So che ormai la maggior parte dei siti viene realizzata con risoluzione di 1600x1200.

affermazione sicuramente erronea
visto la diffusione degli smartphone etc. direi che devi considerare un'area utile
min 320
max 1024

 

[WottaFacca]

Il metodo più semplice e veloce è quello di creare un DIV con larghezza al 100% e al suo interno un DIV con larghezza che vuoi, consiglio tra 960 e 1200, che abbia come regola di stile

 margin: 0 auto;

 

[Max 1]

La regola margin: top auto è sicuramente quella che serve, ma il problema mi sembra molto più ampio!

1. Mi sembra di aver capito che il tutto è strutturato con posizionamenti assoluti, (cosa da avitare assolutamente perchè come puoi notare crea solo problemi), il layout fa fatto seguendo il normale flusso della pagina.
2. Le dimensioni del layout sono esagerate! Dimensioni consigliate in larghezza sono 980px.
3. Anche le misure in percentuale devono essere utilizzate solo da chi è in grado di gestirle bene! Fare layout elastici è una prerogativa da esperti
4. Div di 1600px è pittosto difficile che vengano visualizzati per intero da monitor datati specialmente da quelli analogici.
5. Insomma secondo me bisogna rivedere tutto il layout prima di preoccuparsi del centraggio di un div

 

[mickey123]

Si concordo con Max 1, un div di 1600px è eccome esagerato, e conta che la risoluzione più diffusa è 1366x768 come puoi vedere dalle fonti ufficiali: http://www.w3schools.com/browsers/browsers_display.asp

Io il div principale contenitore, lo faccio 1100px o al massimo 1120px, più largo lasciatemelo dire, fa c....e non si legge nulla. Oppure usa 980x580.

 

[alessandro.scuderoni]

Se vuoi mantenere la struttura a posizione assoluta puoi realizzare più layout uguali, ma diversi nelle dimensioni, e farli scegliere dal browser in base alla risoluzione adottata

 

[Max 1]

Se vuoi mantenere la struttura a posizione assoluta puoi realizzare più layout uguali, ma diversi nelle dimensioni, e farli scegliere dal browser in base alla risoluzione adottata

Non ti sembra una soluzione anomala e macchinosa? Non è meglio fare le cose come si deve?

 

[alessandro.scuderoni]

Ciao Max1,
per fare le cose come si deve, dovrebbe passare ad un layout responsive che richiede molto più tempo.
Si può ottenere un risultato "simile" con fogli di stile dedicati ai vari dispositivi; dove con un semplice javascript viene caricato lo stile più indicato; la modifica da fare è abbastanza semplice nelle pagine html, richiede un po' di tentativi per generare un css adeguato.

Secondo me è più indicato rispetto creare div da 980 pixel fissi

Alessandro

 

[Max 1]

Il tuo ragionamento vale se il layout è un layout che segue il flusso della pagina, ma dove ci sono tanti posizionamenti relativi e assoluti, utilizzare un layout di questo genere è un'impresa anche per un esperto e lui non lo è! Si fa prima a rifarlo da capo!

 

[mickey123]

mah perchè tu staresti a scrivere 10 fogli di stile? perchè non posti la tua soluzione responsive, anzichè fare il grande ?

Ciao Max1,
per fare le cose come si deve, dovrebbe passare ad un layout responsive che richiede molto più tempo.
Si può ottenere un risultato "simile" con fogli di stile dedicati ai vari dispositivi; dove con un semplice javascript viene caricato lo stile più indicato; la modifica da fare è abbastanza semplice nelle pagine html, richiede un po' di tentativi per generare un css adeguato.

Secondo me è più indicato rispetto creare div da 980 pixel fissi

Alessandro

 

[alessandro.scuderoni]

Visto che Roby ha espresso la seguente volontà

Siccome sono consapevole che non tutti i possessori di PC hanno monitor come il mio a livello di risoluzione, volevo sapere come posso centrare un DIV da 1600x1200 e vederlo centrato sia sul mio monitor che su quello di altri che magari possono avere un notebook da 17" o un monitor classico o abbastanza avanti con gli anni

gli unici modi validi sono, o fogli di stile dedicati, o uno stile responsive.
Ho solo dato il mio contributo alla domanda.

Roby, se puoi, mandaci il link al sito


Alessandro

 

[roby.rigoli.6970]

Problema risolto.

 

[Max 1]

Problema risolto.

Si però è consuetudine e bello, dopo aver chiesto aiuto e due pagine di discussione, quando si risolve, dire anche come si è risolto, è il minimo per chi ha cercato di aiutarti