Printable View
Buonasera a tutti, volevo chiedervi se mi potete aiutare a centrare una pagina oltre a destra/sinistra, anche sopra sotto.
ad esempio come questo http://www.amedeominghi.com
in modo tale che ridimensionando la finestra il contenuto è sempre al centro VERTICALMENTE.
grazie mille
Prova ad aggiungere questa riga di stile:e a scrivere quindi tutti i contenuti del tuo sito in un DIV...Codice HTML:<STYLE>
BODY { text-align:center; vertical-align:middle }
</STYLE>
Stammi bene...
Guarda io ti consiglio sempre di separare la grafica dai contenuti usando i CSS...Quindi racchiudi tutti i contenuti del tuo sito all'interno di un bel <div> contenitore e poi nei CSS scrivi
Il vertical-align non credo venga letto dai CSS e da tutti i browser!!!Codice HTML:DIV.contenitore {
margin: 0 auto;
...
...
}
grazie mille, il mio intento è centrare tutto sia verticalmente che orizzontalmente...
ps: come si fa a fare una striscia colorata in alto su tutta la pagina come c'è nel sito di dementialsite?
Basta che metti:Citazione:
Originalmente inviato da archidaniele
Codice HTML:<div style="background-color:#FF0000;">Ciao</div>
ok, è vero grazie mille
non riesco ancora a centrare verticalmente il contenuto nella pagina come nel sito soprariportato separando in css come dice cflgroup2001.
chi può aiutarmi?
grazie
Se vuoi centrare verticalmente dentro a un div oltre al vertical-align devi aggiungerci display:table-cell (che non funziona lo stesso con Internet Explorer), quindi il div sarà così:
Codice HTML:<div style="text-align:center; vertical-align:middle; display:table-cell;">Ciao</div>
grazie, sto provando ma non va il vertical-align... come mai?
Vorrei che la scritta e la riga fossero al centro anche verticalmente al ridimensionamento della finestra>>>> potete vedere la sola pagina di prova
Mi sono dimenticato che devi mettere l'altezza del div.
P.S.: Come già scritto sopra, con Internet Explorer non dovrebbe funzionare.Codice HTML:<div style="text-align:center; vertical-align:middle; display:table-cell; height:100%;">Ciao</div>
ho capito, quindi non c'è un sistema per risolvere con IE? come si può centrare nella pagina questo
http://www.amedeominghi.com/flashSite/default.htm
lo si può fare solo se è in .swf?
Si potrebbe usare una tabella formata da un'unica cella:
Codice HTML:<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">Ciao</td>
</tr>
</table>
perfetto e poi metto dentro tutto il contenuto?
in questo caso come deve essere definita la posizione dei vari oggetti definiti nel css?grazie ancora
Tutto il contenuto della pagina sarà al posto di Ciao.
ok, sto provando
tantissime grazie e >ciao!>
Guarda che si può fare anche con i DIV :
Prima di </head> scrivi:
e poi nel codice della pagina riporti questo:Codice:<style type="text/css">
#box { background: yellow;
position:absolute;top:50%;left:50%; }
</style>
dove al posto di "ciao" inserirai i contenuti che vuoi. :wink:Codice:<DIV id="box"> Ciao </DIV>
Sapresti anche riuscire a centrare anche il contenuto dentro a un div verticalmente?
In che senso ?
Non ho provato, ma in teoria, credo basti aggiungere nel CSS le misure del "box" (height e width) un bel "padding" della misura che vuoi, ed abbiamo il nostro "ciao" centrato all'interno del DIV ... poi se invece di scrivere ci mettiamo un'immagine, credo sia lo stesso, no ? :wink:
io nel frattempo sto provando... vi ringrazio
a presto
Allora, il vertical-align continuo a dire che non è proprio riconosciuto dai CSS e oltrettutto nel codice non è validato dl W3C!!! Con la tabelle te lo sconsiglio davvero...sarabbe come andare dal concessionario e comprare una macchina euro 2 allo stesso prezzo di un euro 4...Cerchiamo di fare siti accessibli e tabless che è la cosa migliore!!!
Come direbbe rockaffè se intervenisse in questa discussione, anch'io all'inizio usavo solo tabelle e la grafica tabless del mio sito me l'ha praticamente quasi fatta tutta un amico, ma da quando ho capito l'errore che stavo facendo ora cerco sempre di spinegere gli altri verso questa "nuova frontiera del web"!!!
Secondo me con il margin: 0 auto dovresti risolvere...Prova ad aumentare i px scrivenod ad esempio margin: 20px auto e soprattutto usa solo DIV!!!
In questo sito c'è quella striscia bluastra con scritto FantaGames in nero, lì ho usato il metodo che avevo suggerito io per allineare tutto al centro verticalmente. Purtroppo funziona solo con Internet Explorer. Volevo sapere se si può "tradurre" il tuo metodo per il mio caso, perché ci ho provato ma non ci sono riuscito.Citazione:
Originalmente inviato da Taitaonline
Mi sono appena ricordato di un'altra idea, ma che purtroppo è una soluzione "apparente" al problema:Quello che però si ottiene non è tanto un contenuto centrato nella pagina, quanto piuttosto un DIV che rimane spostato dai bordi (la cui dimensione si adatta alla finestra).Codice HTML:<BODY STYLE="margin:0;padding:20%;height:100%">
<DIV STYLE="background-color:#RRGGBB;overflow:auto;height:100%;min-height:60%;max-height:60%">
...
</DIV>
</BODY>
Statemi bene...
P.S. Ah, la combinazione di height e min-height/max-height è un trucchetto per far digerire bene le altezze tanto a Explorer quanto a Firefox...