Newsgroup: it.comp.www.html
Titolo: Centrare tutto - 800 x 600 a 1024 x 768

Ciao a tutti.
E' un po' di tempo che vorrei risolvere questa cosa, e leggiucchiando per il
NG non ho trovato una risposta (oppure non l'ho capita, non sarebbe
improbabile).
Premessa: uso Dreamweaver, so poco di html.
Problema: sto preparando delle pagine che vorrei fossero visibili bene sia a
800 X 600 che oltre, quindi ho settato la larghezza della pagina a 760 px.
Ho inoltre alcune immagini che devono essere larghe quanto la pagina, le ho
fatte anch'esse a 760.
Se apro la pagina a 800 x 600 la vedo correttamente, se la apro a 1024 x 768
la vedo uguale, ma è affiancata a sinistra.
La cosa mi sembra normale, in quanto tutti gli oggetti presenti nella pagina
hanno delle coordinate assolute (come vedo nel codice).
Io vorrei che, quando apro la pagina in 1024 X 768 tutto si spostasse al
centro, mantenendo le relazioni tra i vari oggetti (quindi considerando il
margine sx non assolutamente a sx ma a sx relativamente al centro della
pagina a prescindere dalla risoluzione, credo).
Si può fare? Posso risolvere o aggirare il problema? Lo posso fare
mantenendo compatibilità con tutti i browser?
Ringrazio chiunque possa darmi una risposta, spero di essermi spiegato
adeguatamente, ciao :)

 mantenendo compatibilità con tutti i browser?
Ci sono molte soluzioni, ma se (come mi sembra di capire)
hai semplicemente usato delle tabelle,
ti dovrebbe bastare inserire il tutto dentro a un div centrato.
Es: scrivi <div align="center">
prima di aprire la prima tabella,
e </div> dopo che hai chiuso l'ultima.
Se non ci sono errori dentro il codice, dovrebbe andare,
ed è compatibile con tutti i browser da Netscape2 in su.
Nota: se per caso hai il codice di un contatore nelle pagine
ti conviene portarlo fuori dal div (al limite chiudi e riapri il div)
perché ho verificato che sovente rallentano il proprio "contenitore".
MaRoK

 ti dovrebbe bastare inserire il tutto dentro a un div centrato.
No, in effetti ho usato dei div. Dreamweaver non mi dà la possibilità di
centrarli, ora provo a mano.
<fatto>
Come faccio a dirgli che il div principale contiene tutto il resto?
Gli altri div sono posizionati in zone precise del div principale... mi sa
che non si può fare :(
A meno che non trasformo i div in tabelle 1 x 1 invisibili... ma poi come le
posiziono sullo sfondo?
Io ho provato così:
<div align="center">
 <div id="Layer1" style="position:absolute; left:0px; top:0px; width:768px;
height:990px; z-index:1"><img src="Img/paginasfondo.jpg" width="765"
height="906"></div>
 <div id="Layer2" style="position:absolute; left:28px; top:183px;
width:137px; height:46px; z-index:2">
www.prova.it
</div>
 <div id="Layer3" style="position:absolute; left:292px; top:59px;
width:376px; height:95px; z-index:3"><img src="Img/bannergc.gif" width="374"
height="85"></div>
</div>
Qual'è l'errore?
Ti ringrazio tantissimo per avermi risposto, ma possibile che questo
problema ce l'ho solo io?
Spero di riuscire a capirci qualcosa...

"Tafano" <chevit...@inwind.itNOSPAM> ha scritto nel messaggio
news:o%x4a.267443$AA2.10...@news2.tin.it...

Ma usa le tabelle!!! che fai solo un gran casino eheh...
e poi usa le percentuali non i pixel..almeno io faccio così...
<table align='center' width=100%>
.....
.....
.....
</table>
Cmq con un javascript puoi controllare la risoluzione video che l'utente sta
utilizzando e in base a questo
mostrare una o l'altra configurazione...
ciao
AleZen

 No, in effetti ho usato dei div.
Bene. Allora cambia tutto! :D
Prova a cambiare il tuo codice in questo modo:
<body style="height:100%;margin:0px">
 <div id="Layer1" style="position:absolute; left:50%; top:0px; width:768px; height:990px; margin:0 0 0 -384px; z-index:1">
 <img src="Img/paginasfondo.jpg" width="765" height="906"></div>
 <div id="Layer2" style="position:absolute; left:20%; top:183px; width:137px; height:46px; z-index:2">
 
www.prova.it
</div>
 <div id="Layer3" style="position:absolute; right:20%; top:59px; width:376px; height:95px; z-index:3">
 <img src="Img/bannergc.gif" width="374" height="85"></div>
Su IE6, Opera6 e Mozilla sembra andare. L'ho scritto ricordandomi dell'esempio:
http://www.constile.org/template/centrare_il_box/centrare_il_box.html
che aveva postato Deelan qualche tempo fa, in pratica in Layer1 metti un margine
destro negativo pari alla metà della larghezza del div, e imposti left:50%.
Negli altri andando a occhio ho messo 20% da sinistra per il primo e 20%
da destra per il secondo, se non quadrano cambia i valori!
Poi però al posto di tutti quegli "style" bisognerà creare un foglio di stile,
possibilmente esterno e condiviso da tutte le pagine, non credi?
Altrimenti lavorare con i div non serve a una randa! :D
MaRoK

Salve a tutti.
Perchè complicarsi la vita...
usa  <CENTER> .....  </CENTER>
Può essere utile a qualcuno questo:...
(fare copia incolla in un file .txt e poi modificare in .htm)
serve per vedere il sito alle varie risoluzioni 
640-800-1024
...ecc.
""""""""""""""""""""""""""""""""""
<HTML>
<head>
<title>Gratislandia - Screen size web test</title>
</head>
<SCRIPT language="JavaScript">
<!--
function MPiccolo() {
if (document.rt.url.value == "" || document.rt.url.value ==
"http://"){alert("Per cortesia, inserite un indirizzo internet
....");document.rt.url.focus();document.rt.url.select();return;}
window.open(document.rt.url.value,'600x480','toolbar=yes,status=yes,scrollba
rs=yes,location=yes,menubar=yes,directories=yes,width=320,height=240')}
function Piccolo() {
if (document.rt.url.value == "" || document.rt.url.value ==
"http://"){alert("Per cortesia, inserite un indirizzo internet
....");document.rt.url.focus();document.rt.url.select();return;}
window.open(document.rt.url.value,'640x480','toolbar=yes,status=yes,scrollba
rs=yes,location=yes,menubar=yes,directories=yes,width=640,height=480')}
function Medio() {
if (document.rt.url.value == "" || document.rt.url.value ==
"http://"){alert("Per cortesia, inserite un indirizzo internet
....");document.rt.url.focus();document.rt.url.select();return;}
window.open(document.rt.url.value,'800x600','toolbar=yes,status=yes,scrollba
rs=yes,location=yes,menubar=yes,directories=yes,width=800,height=600')}
function Largo() {
if (document.rt.url.value == "" || document.rt.url.value ==
"http://"){alert("Per cortesia, inserite un indirizzo internet
....");document.rt.url.focus();document.rt.url.select();return;}
window.open(document.rt.url.value,'960x720','toolbar=yes,status=yes,scrollba
rs=yes,location=yes,menubar=yes,directories=yes,width=960,height=720')}
function MLargo() {
if (document.rt.url.value == "" || document.rt.url.value ==
"http://"){alert("Per cortesia, inserite un indirizzo internet
....");document.rt.url.focus();document.rt.url.select();return;}
window.open(document.rt.url.value,'1024x768','toolbar=yes,status=yes,scrollb
ars=yes,location=yes,menubar=yes,directories=yes,width=1024,height=768')}
// -->
</SCRIPT>
<body topmargin="5" leftmargin="5" background="images/sfondo.gif"
style="font-family: Verdana" link="#000000" vlink="#000000" alink="#FF0000">
<div align="center">
<TABLE width=460 border=1 style="border-collapse: collapse" cellpadding="0"
cellspacing="0" bordercolor="#000000">
<TR bgColor=#ffffff>
<TD>
<P align="center" style="margin: 5 10">
<B>Il SCREEN SIZE WEB TEST</B></P>
<P align="justify" style="margin: 5 10">
<B><BR></B>
Si tratta di un MicroTool per la visualizzazione delle vostre pagine alle
varie possibili risoluzioni che un navigatore può
adottare.<BR>Sebbene sia possibile farlo anche a casa, modificando le
impostazioni di visualizzazione del proprio Personal
Computer, grazie a questo strumento, una volta inserito un indirizzo
Internet o una pagina presente nel vostro Hard Disk,
con un solo click, potrete immediatamente avere un'idea dei risultati
ottenibili alle varie risoluzioni.</P>
<P align="justify" style="margin: 5 10">&nbsp;</P>
<FORM name=rt>
<P align=center><FONT>URL:&nbsp;</FONT><INPUT size=32 value=http://
name=url></P>
<DIV align=center>
<TABLE cellSpacing=1 cellPadding=4 width="100%" bgColor=#808080 border=0>
<TR>
<TD width="20%" bgColor=#efefef>
<P align=center><INPUT onclick=MPiccolo() type=button value=600x480
name=2></P></TD>
<TD width="20%" bgColor=#efefef>
<P align=center><INPUT onclick=Piccolo() type=button value=640x480 name=3>
</P></TD>
<TD width="20%" bgColor=#efefef>
<P align=center><INPUT onclick=Medio() type=button value=800x600
name=4></P></TD>
<TD width="20%" bgColor=#efefef>
<P align=center><INPUT onclick=Largo() type=button value=960x720
name=5></P></TD>
<TD width="20%" bgColor=#efefef>
<P align=center><INPUT onclick=MLargo() type=button value=1024x768
name=51></P></TD></TR></TABLE></DIV></FORM></TD></TR></TABLE></div>
<p></p>
</BODY>
</HTML>
""""""""""""""""""""""""""""""""""""
Un saluto dalla Sardegna
--
Alberto Zilaghe
www.zilaghe.it
Fotografie della Sardegna

 usa  <CENTER> .....  </CENTER>
Sě ma lui non usa le tabelle,
usa i div con posizionamento assoluto! :D
MaRoK


 Voglio per prima cosa ringraziare tutti, sto lavoricchiando per risolvere
il problema grazie alle dritte che mi avete dato! Secondo me il problema
principale è che lo sfondo è costituito da una pagina. Per ora, dopo aver
provato un po' di tutto, sto provando con tabelle dentro tabelle... peccato
non poter usare dei div dentro una tabella, avrei risolto tutto :(
La soluzione del 50% sarebbe ottima, ma funge solo per posizionare al
centro, il resto si sposta a seconda della grandezza della pagina, ma cosa
più antipatica è che in anteprima con dreamweaver non si capisce niente, e
fare mappe cliccabili così è un po' complicato...
Bah... facevo prima (e meglio) a studiare seriamente l'html.
Ah, non ho linkato il sito (versione precedente) perché è per un partito
politico, avrei volentieri ascoltato suggerimenti.
Grazie ancora a tutti :)

 Bah... facevo prima (e meglio) a studiare seriamente l'html.
questo paga sempre, magari sulla lunga distanza.
-- 
email: 
goldic...@yahoo.it
web: 
http://www.deelan.com