Newsgroup: it.lavoro.professioni.webmaster
Titolo: aiuto - centrare pagina web

Salve,vorrei poter centrare all'interno del browser la pagina seguente(di
cui ho riportato sotto il codice sorgente).
Anche se inserisco i tag <center></center> all'interno del codice dopo il
<body> non ottengo nessun risultato...
credo che la questione sia legata al fatto che ho inserito codice CSS.
Mi potete aiutare?
Cosa devo fare?
Grazie.
<html>
 <head>
  <style type="text/css">
  <!--
  #cell_r0_c0{position:absolute;left:0;top:0;width:800;height:122;}
 #cell_r1_c0{position:absolute;left:0;top:122;width:199;height:135;}
 #cell_r1_c1{position:absolute;left:199;top:122;width:200;height:135;}
 #cell_r1_c2{position:absolute;left:399;top:122;width:200;height:135;}
 #cell_r1_c3{position:absolute;left:599;top:122;width:201;height:135;}
 #cell_r2_c0{position:absolute;left:0;top:257;width:199;height:21;}
 #cell_r2_c1{position:absolute;left:199;top:257;width:200;height:21;}
 #cell_r2_c2{position:absolute;left:399;top:257;width:200;height:21;}
 #cell_r2_c3{position:absolute;left:599;top:257;width:201;height:21;}
 #cell_r3_c0{position:absolute;left:0;top:278;width:800;height:62;}
 #cell_r4_c0{position:absolute;left:0;top:340;width:400;height:63;}
#cell_r4_c1{position:absolute;left:400;top:340;width:341;height:63;backgroun
d-image: url(images/index_12.gif);}
 #cell_r4_c2{position:absolute;left:741;top:340;width:59;height:63;}
 #cell_r5_c0{position:absolute;left:0;top:403;width:800;height:197;}
 #cell_r6_c0{position:absolute;left:0;top:600;width:800;height:20;}
 //-->
 </style>
 </head>
 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="cell_r0_c0"><img width="800" height="122" src="images/logo.gif"
border="0"></div>
<div id="cell_r1_c0"><img width="199" height="135" src="images/foto1.jpg"
border="0"></div>
<div id="cell_r1_c1"><img width="200" height="135" src="images/foto2.jpg"
border="0"></div>
<div id="cell_r1_c2"><img width="200" height="135" src="images/foto3.jpg"
border="0"></div>
<div id="cell_r1_c3"><img width="201" height="135" src="images/foto4.jpg"
border="0"></div>
<div id="cell_r2_c0"><img width="199" height="21"
src="images/bott_index.gif" border="0"></div>
<div id="cell_r2_c1"><img width="200" height="21"
src="images/bott_servizi.gif" border="0"></div>
<div id="cell_r2_c2"><img width="200" height="21"
src="images/bott_contatti.gif" border="0"></div>
<div id="cell_r2_c3"><img width="201" height="21"
src="images/bott_raggiungi.gif" border="0"></div>
<div id="cell_r3_c0"><img width="800" height="62" src="images/index_10.jpg"
border="0"></div>
<div id="cell_r4_c0"><img width="400" height="63" src="images/index_11.jpg"
border="0"></div>
<div id="cell_r4_c1"><FONT face="Times New Roman"> <STRONG><FONT
face=Verdana color=#000e69 size=1>Blabla Blabla Blabla Blabla Blabla Blabla
Blabla Blabla Blabla Blabla Blabla
</FONT></STRONG></FONT></div>
<div id="cell_r4_c2"><img width="59" height="63" src="images/index_13.jpg"
border="0"></div>
<div id="cell_r5_c0"><img width="800" height="197" src="images/index_14.jpg"
border="0"></div>
<div id="cell_r6_c0"><img width="800" height="20"
src="images/webdesigner.gif" border="0"></div>
</body>
</html>


Hai provato a raccogliere il tuo codice in una tabella??
Prova cosě:
Dopo il body:  <body leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
Apri una tabella: <center><table align=center width=100%><tr><td
align=center>
Inserisci il tuo codice: <div id="cell_r0_c0"><img width="800" height="122"
src="images/logo.gif"
border="0"></div> etc...etc... [... cut ...]
e chiudi il tutto
</td></tr></table></center>
Ciao
CR

border="0"></div>
Funziona anche se l'id lo assegni direttamente all'immagine:
<img  id="cell_r0_c0" width="800" height="122" src="images/logo.gif"
border="0">
Risparmi di metterci una il tag div, tanto e' l'immagine che devi
posizionare no?
Usi una funzione javascript attivata all'evento onload della pagina
per calcolare le nuove posizioni e sposti le tue div/immagini in
quella posizione.
Un esempio che funziona sia con IE 6.0 che con browser basati su
Mozilla ver. >1.1 (forse anche con alcune precedenti ma sicuramente
non con IE 4.x  o Netscape 4.x se non erro):
[...]
<script LANGUAGE="JavaScript">
//dimensione della schermata che vuoi centrare 
// nel tuo caso dovrebbe essere 800
var layoutwidth=800; 
// funzione per spostare un oggetto
function centerit(objid, delta, curleft){
// parametri: id dell'object, spostamento a destra, 
// posizione corrente
// riferimento all'oggetto da spostare
 obj=document.getElementById(objid);
// calcola  nuova posizione
 newleft=curleft+delta;
// setta nuova posizione
 obj.style.left=newleft+"px";
}
function centerall(){
// centra tutti gli objects
 try{
	// determina la dim. dello schermo utilizzabile
	available_width=document.body.clientWidth; 
	if(available_width>layoutwidth){ 
		// se devi centrare gli oggetti
		// di quanto devi spostarli per centrarlui
		delta=(available_width-layoutwidth)/2; 
		//sposta gli oggetti
		centerit("cell_r0_c0",delta,0); 
		centerit("cell_r1_c0",delta,0); 
		centerit("cell_r1_c1",delta,199);
		//[...]  richiama la funzione per tutti quelli
		// che devi spostare
	}
 }
 catch(e){
	alert("Errore:"+
e.name
+" "+e.message);
 }
}
</script>
</head>
<!--
 qui fai partire la funzione al caricamento della pagina con l'onload
di body:
-->
<body onload="centerall();">
[...]
Ne caso tu debba usare anche browser di versioni precedenti o browser
che non implementano alcuni metodi o hanno una "definizione" del
documento diversa: il concetto su come farlo e' lo stesso ma cambia il
codice javascript, devi determinare quale browser e' usato e scrivere
il codice per ciascuno di essi.
'bye


ha scritto nel messaggio news:P3pyb.126401$hV.46...@news2.tin.it...


 ha scritto nel
messaggio news:3fca2f1c...@news.tin.it...


Grazie.
Modifica un po' il CSS.
Pprova qualcosa di questo tipo e vedi se funziona con il tuo browser:
Per le immagini modifica in questo modo:
  #cell_r0_c0{
    position:absolute; 
    display:block;
    left:0px;
    top:0px;
    width:800px;
    height:122px;
  }
N.B. questo e' un esempio solo per la tua prima immagine :)
Definisci uno stile per una div esterna:
  #outsidediv{
    position:relative; 
    display:block;
    left:0px;
    top:0px;
    width:800px;
    height:620px;
 }
Da quello che ho visto dal tuo codice la dimensione di quello che vuoi
visualizzare e' di 800x620, modifica se diverso.
Infine nel codice HTML:
[...]
<center>
<div id="outsidediv">
  <img id="cell_r0_c0" width="800"  height="122" src="images/logo.gif"
   border="0">
<!--
[...]
aggiungi qui le altre immagini
[...]
-->
</div> <!-- outsidediv -->
</center>
[..]
La div esterna (relative) viene centrata sullo schermo
(<center>..</center>, le immagini (absolute) vengono posizionate
all'interno di essa nelle coordinate (assolute riguardo al "block"
esterno, quindi ad essa relative) che hai specificato.
Il problema e' sempre "come il browser decide di interpretare il CSS
definito". Funziona con IE 6 e Mozilla 1.3 non garantisco per altri :)
'bye