Centrare un DIV per renderlo visibile su qualsiasi monitor

roby.rigoli.6970

Nuovo Utente
9 Giu 2015
31
0
6
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
 

WottaFacca

Utente Attivo
20 Mar 2015
134
0
0
Desenzano d/G
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
Codice:
 margin: 0 auto;
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.406
339
83
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

Utente Attivo
17 Gen 2015
59
0
6
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

Nuovo Utente
1 Giu 2015
25
0
1
Roma
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.406
339
83
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

Nuovo Utente
1 Giu 2015
25
0
1
Roma
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.406
339
83
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

Utente Attivo
17 Gen 2015
59
0
6
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

Nuovo Utente
1 Giu 2015
25
0
1
Roma
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
A centrare iframe con div HTML e CSS 2
N Centrare il testo verticalmente in una div. HTML e CSS 2
F Centrare slider div HTML e CSS 1
asevenx centrare sito con div HTML e CSS 7
W Centrare immagine con Bootstrap [era: Centrare div con bootstrap] HTML e CSS 2
M Centrare un DIV nel BODY (usando i CSS) HTML e CSS 1
D Centrare del testo all'interno di un DIV ? HTML e CSS 3
nourdine centrare verticalmente un div HTML e CSS 1
Shyson Centrare box css HTML e CSS 2
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
Andrea_Ventura [HTML] Problema centrare elemento orizzontalmente HTML e CSS 9
F [HTML] Centrare testo rispetto l'immagine HTML e CSS 1
elpirata [HTML] Non riesco a centrare menu orizzontale HTML e CSS 5
L Problema per centrare titolo PopUp HTML e CSS 5
ecosito Google Maps: Centrare il marker ed editare il fumetto PHP 1
LuigiDonato Centrare Tabella HTML e CSS 10
asevenx problema per centrare sito HTML e CSS 5
A centrare la pagina con Js Javascript 1
R Come centrare il testo in un paragrafo con sfondo colorato? HTML e CSS 2
L Centrare galleria immagine HTML e CSS 2
Z centrare verticalmente il testo di un button HTML e CSS 1
Marcolotto Centrare un testo (orizzontalmente e verticalmente) in una TextView Android Sviluppo app per Android 1
E Centrare finestra popup Javascript 7
A centrare una tabella HTML e CSS 3
C centrare pagine sito HTML e CSS 17
V centrare un layout a qualunque risoluzione HTML e CSS 3
I Centrare un layout al centro della pagina HTML e CSS 8
M Centrare un sito con tutti i browser HTML e CSS 22
Nyl Centrare pagina HTML e CSS 7
D Centrare menù HTML e CSS 2
Oscar83 Si possono centrare automaticamente i CSS?? HTML e CSS 2
N Non riesco a centrare l'immagine di sfondo Webdesign e Grafica 9
D Centrare Un Pulsante Webdesign e Grafica 12
D Centrare IMG tramite action script Flash 2
simoncino Centrare pagine con Dreamweaver Webdesign e Grafica 1
M Centrare un logo in tutte le risoluzioni.... HTML e CSS 4
F Centrare la pagina HTML e CSS 8
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0

Discussioni simili