» Il sito si vede sfasato sui vari broswer

Andreasnake · 22-01-08, 22:06

Ciao ragazzi, sto costruendo il mio sito web con dreamweaver, non riesco a capire perche una volta pubblicato si vede tutto sfasato, ossia le tabelle varie tutte fuori asse idem per foto ecc. Come posso fare a risolvere questo enigma?
Grazie anticipatamente.
Andrea

PsYCHo · 23-01-08, 00:35

Ciao Andreasnake e benvenuto nel Forum GT!

Ti sposto nella sezione più adatta.

misterwo · 23-01-08, 11:16

sfasato in che senso?
ma solo su IE o dici tra IE e FF?
hai classi (css)?

Andreasnake · 23-01-08, 12:59

Praticamente vedo le tabelle sfasate in Explorer, Mozilla, Opera, sono su safari vedo bene.. Come devo fare? Il sito lo sto facendo con tabelle e layout.
Potreste aiutarmi è un gran dilemma che mi blocca. Ci sto lavorando ad una risuoluzione di i1024 x 768.
Grazie.

misterwo · 23-01-08, 13:53

1024..quindi sono larghe sui 1000 circa o usi 100%?
bordi, margini ecc?

Andreasnake · 23-01-08, 14:56

ma ci lavoro sul 100%.
Niente bordi faccio tutto con tabelle, credi che dovrei inserire bordi?
Se si dammi una mano anche su come metterli con dream.
Grazie mille per l'interessamento.

kaisersose · 23-01-08, 15:44

Ciao andreasnake

prova a postare uno screennshoot della pagina in modo che possiamo capire come lo vedi

eventualmente anche il codice potrebbe essere utile, cosi e un po difficile capire dove sia il problema.

Andreasnake · 23-01-08, 16:09

Eccne uno!
Anche se non è quello attuale ma il problema è questo.. In quello attuale le tabelle che sono all'interno di un altra tabella una volta inserita nel browser si sfasano tutte, ossia vanno a mettersi fuori dalla tabella principale...
Ecco il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=".org/1999/xhtml">

<head>

<title>Spettacolo - Home page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="file:///Macintosh HD/Users/Andrea/Desktop/mm_entertainment.css" type="text/css" />
<style type="text/css">

</style></head>
<body>
<div align="center">
<table width="1029" height="164" border="1" bgcolor="#666666">
<tr>
<td width="714"><div align="center" class="Stile2">
<p align="left"><strong>Welcome to Constrictormorphs </strong></p>
<div class="Stile5" id="Layer4">
<p>21-01-2008 22:16</p>
</div>
<p align="left"><span class="Stile3"><u>Allevamento amatoriale specializzato in boa constrictor </u></span></p>
</div></td>
<td width="240"><img src="logo nuovo.gif" alt="Logo Cm" width="182" height="157" /></td>
</tr>
</table>
<table width="1030" height="818" border="5" bgcolor="#000000">
<tr>
<td width="953" height="42"><table width="893" height="35" border="1">
<tr>
<td><div align="center"><span class="Stile4">Home</span></div></td>
<td><div align="center" class="Stile4">Chi siamo </div></td>
<td><div align="center" class="Stile4">Galleria</div></td>
<td><div align="center" class="Stile4">Disponibilità</div></td>
<td><div align="center" class="Stile4">Contatti</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="760" bordercolor="#333333"><div id="Layer6">
<table width="505" height="346" border="1">
<tr>
<td><img src="DSCF0427.jpg" alt="Sunglow" width="505" height="346" /></td>
</tr>
</table>
</div>
<div id="Layer7">
<table width="200" border="1">
<tr>
<td height="26"><div align="center" class="Stile4">Blog</div></td>
</tr>
<tr>
<td height="325"> </td>
</tr>
</table>
</div>
<div id="Layer8">
<table width="200" height="353" border="1">
<tr>
<td height="22" class="Stile4"><div align="center">Collezione</div></td>
</tr>
<tr>
<td height="316"><div id="Layer9">
<div align="center"><span class="Stile6"><u>Ancestrale</u></span></div>
</div>
<div class="Stile6" id="Layer10">
<div align="center"><u>Albino Kahl </u></div>
</div>
<div class="Stile6" id="Layer11">
<div align="center"><u>Albino Sharp</u>
<div id="Layer12"><u>Anery</u>
<div id="Layer13"><u>Ghost</u>
<div id="Layer14"><u>Salmon</u></div>
</div>
</div>
</div>
</div></td>
</tr>
</table>
<p> </p>
</div></td>
</tr>
</table>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

kaisersose · 23-01-08, 16:20

cosi da una lettura veloce direi che il problema e nell'absolute, in pratica se lo imposti absolute il div si posiziona ,appunto in modo assoluto, quindi naturale che
si sfasi tutto o che si sovrappongono con altri div.

Comunque ora vado a mangiare dopo lo guardo meglio e cerchiamo di trovare una soluzione.

Andreasnake · 23-01-08, 16:23

Ecco grazie mille, perche mi blocco non posso andare avanti..
Grazie ancora

misterwo · 23-01-08, 16:44

il regno dell'absolute...
ma scusa come mai mischi tabelle e layout?

a parte questo stai annidando il mondo, div con dentro table o viceversa nn ha senso...
ma solo con i div? se proprio tab...

alla fine è la parte centrale che rimane fissa e nn segue..credo che la colpa sia tra #Layer8 e soci...

kaisersose · 23-01-08, 21:21

Ciao, scusa il ritardo sono rientrato da poco.

beh direi che c'è un bel po di confusione con i div,quando si imposta la proprietà absolute a un div le dimensioni e la posizione sono indipendenti dagli altri, ecco il perchè dello sfasamento.

ti faccio un esempio, se un div lo imposti con margin-left, cioe lo spazio tra il lato di sinistra e il div , a 100px e posizione assoluta e un altro div dai le stesse impostazioni naturale che si sovrappongono.

Potra sembrarti banale ma la priam cosa che mi sento di consigliarti e di dare un occhiata ai fogli di stile e al loro utilizzo di seguito due ottime guide.

guida di base ai css
layout fluidi
Da quello che vedo nel codice e da come conosco dreamweaver probabilmente hai disegnato i div " a mano" cioe usando lo strumento disegna livello, beh telo sconsiglio vivamente.il codice cosi come e un po difficile correggerlo, se hai freta di fare il sito, lascia stare per ora i div, quindi cancella il codice dei vari layer e usa solo tabelle, se invece hai voglia di imparare magari partendo proprio da questo sito che stai facendo allora:

cancella tutto il codice e aiutandoti con le guide prova a creare uan struttra di base con i div, poi a suo interno puoi inserire quello che vuoi.
purtroppo e una soluzione drastica ma cosi come e quasi impossibile correggere il codice.
Parti creando 5 div,contenitore(che contiene gli altri div) header,menu,content,footer.
imposta per ognuno le proprieta di base,il div principale contenitore, impostalo con misure in percentuale, oppure non impostare nulla se vuoi che occupi tutta la pagina.
Pe rlevarie prorpieta dei div puoi usare il pannello dei stili di dreamweaver, crei un nuovo foglio di stile, lo coleghi al tuo file html, non usare percorsi assoluti come in questo codice che hai postato :
<link rel="stylesheet" href="file:///Macintosh HD/Users/Andrea/Desktop/mm_entertainment.css" type="text/css" />
e sbagliato:
<link rel="stylesheet" href="stili/mm_entertainment.css" type="text/css" />
e corretto, ho messo stili/ davanti presupponendo che ti crei una cartella apposita in cui conservare i fogli di stile.
cancella tutti gli stili interni cioe :
#Layer1 {
position:absolute;
width:908px;
height:368px;
z-index:1;
left: 14px;
top: 56px;
}
et company, che sono quelli che ti creano errore, ma per come e impostato sono anche la struttura portante del sito, se crei i 5 div come ti ho suggerito( ma non devono essere per forza 5,dipende da come struturi il tuo sito) ti semplifichi di gran lunga la vita e tutto il codice css
lo inserisci nel foglio di stile collegato, cosi in ogni pagina ti basterà creare i div con i loro nomi e si riadatteranno automaticamente,

SO che il tutto ti potra sembrare "profano" o strano, pero credimi, anche per me era cosi, ma con un po di impegno e di studio vedrai che otterrai ottimi risultati.
In ogni caso noi siamo qua quando hai un problema posta.
Se invece non ti va di studiare o perder tempo, allora cancella tutti i div,nel tuo codice e usa solo tabelle, ma se impari a usare i div avrai tantissime soddisfazioni, ci sono passato e lo so.

Andreasnake · 23-01-08, 21:30

Grazie mille, ho tantissima voglia di imparare solo che fino ad ora nessuno mi ha aiutato piu di tanto..
Ho creato tutto a mano ( in progettazione) il codice lo sconosco non capisco neppure ciò che mi hai detto esempio: div,tag, e quant'altro..
Se qualcuno mi illumina ci provo..
Grazie mille.

22-01-08, 22:06	#1 (permalink)
Andreasnake User Data di registrazione: Jan 2008 Messaggi: 10	Il sito si vede sfasato sui vari broswer Ciao ragazzi, sto costruendo il mio sito web con dreamweaver, non riesco a capire perche una volta pubblicato si vede tutto sfasato, ossia le tabelle varie tutte fuori asse idem per foto ecc. Come posso fare a risolvere questo enigma? Grazie anticipatamente. Andrea

23-01-08, 00:35	#2 (permalink)
PsYCHo Esperto Data di registrazione: Jan 2007 Ubicazione: Firenze Messaggi: 1,656	Ciao Andreasnake e benvenuto nel Forum GT! Ti sposto nella sezione più adatta.
	__________________ Il blog per i webmaster sul posizionamento.

23-01-08, 11:16	#3 (permalink)
misterwo User Data di registrazione: Oct 2007 Ubicazione: Brescia Messaggi: 607	sfasato in che senso? ma solo su IE o dici tra IE e FF? hai classi (css)?
	__________________ a star bene gente... \| Ricette di cucina \|

23-01-08, 13:53	#5 (permalink)
misterwo User Data di registrazione: Oct 2007 Ubicazione: Brescia Messaggi: 607	1024..quindi sono larghe sui 1000 circa o usi 100%? bordi, margini ecc?
	__________________ a star bene gente... \| Ricette di cucina \|

23-01-08, 15:44	#7 (permalink)
kaisersose Esperto Data di registrazione: Sep 2005 Ubicazione: Barcellona Messaggi: 1,111	Ciao andreasnake prova a postare uno screennshoot della pagina in modo che possiamo capire come lo vedi eventualmente anche il codice potrebbe essere utile, cosi e un po difficile capire dove sia il problema.
	__________________ b&b - bread & breakfast italiani

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

23-01-08, 12:59	#4 (permalink)
Andreasnake User Data di registrazione: Jan 2008 Messaggi: 10	Praticamente vedo le tabelle sfasate in Explorer, Mozilla, Opera, sono su safari vedo bene.. Come devo fare? Il sito lo sto facendo con tabelle e layout. Potreste aiutarmi è un gran dilemma che mi blocca. Ci sto lavorando ad una risuoluzione di i1024 x 768. Grazie.

23-01-08, 14:56	#6 (permalink)
Andreasnake User Data di registrazione: Jan 2008 Messaggi: 10	ma ci lavoro sul 100%. Niente bordi faccio tutto con tabelle, credi che dovrei inserire bordi? Se si dammi una mano anche su come metterli con dream. Grazie mille per l'interessamento.

23-01-08, 16:09	#8 (permalink)
Andreasnake User Data di registrazione: Jan 2008 Messaggi: 10	Eccne uno! Anche se non è quello attuale ma il problema è questo.. In quello attuale le tabelle che sono all'interno di un altra tabella una volta inserita nel browser si sfasano tutte, ossia vanno a mettersi fuori dalla tabella principale... Ecco il codice: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=".org/1999/xhtml"> <!-- DW6 --> <head> <!-- Copyright 2005 Macromedia, Inc. All rights reserved. --> <title>Spettacolo - Home page</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="file:///Macintosh HD/Users/Andrea/Desktop/mm_entertainment.css" type="text/css" /> <style type="text/css"> <!-- body,td,th { color: #000000; } body { background-color: #E67300; } #Layer1 { position:absolute; width:908px; height:368px; z-index:1; left: 14px; top: 56px; } #Layer2 { position:absolute; width:800px; height:340px; z-index:1; top: 60px; left: 85px; } .Stile2 { font-size: 36px; font-family: "Comic Sans MS"; } .Stile3 {font-size: 24px} #Layer3 { position:absolute; width:182px; height:157px; z-index:1; top: 20px; } .Stile4 { color: #FFFFFF; font-size: 18px; font-family: "Comic Sans MS"; } #Layer4 { position:absolute; width:200px; height:37px; z-index:1; left: 529px; top: 16px; } .Stile5 {font-size: 14px} #Layer5 { position:absolute; width:562px; height:353px; z-index:2; left: 167px; top: 234px; } #Layer6 { position:absolute; width:504px; height:306px; z-index:2; left: 311px; top: 298px; } #Layer7 { position:absolute; width:183px; height:356px; z-index:3; left: 859px; top: 285px; } #Layer8 { position:absolute; width:188px; height:355px; z-index:4; left: 74px; top: 286px; } #Layer9 { position:absolute; width:200px; height:36px; z-index:5; left: 6px; top: 37px; } .Stile6 { font-family: "Comic Sans MS"; font-size: 16px; color: #FFFFFF; } #Layer10 { position:absolute; width:200px; height:34px; z-index:5; left: 7px; top: 63px; } #Layer11 { position:absolute; width:200px; height:33px; z-index:5; left: 8px; top: 88px; } #Layer12 { position:absolute; width:177px; height:106px; z-index:5; left: 2px; top: 24px; } #Layer13 { position:absolute; width:200px; height:115px; z-index:1; left: -6px; top: 25px; } #Layer14 { position:absolute; width:200px; height:115px; z-index:5; left: 2px; top: 22px; } #Layer15 { position:absolute; width:200px; height:115px; z-index:1; left: 746px; top: 306px; } --> </style></head> <body> <div align="center"> <table width="1029" height="164" border="1" bgcolor="#666666"> <tr> <td width="714"><div align="center" class="Stile2"> <p align="left"><strong>Welcome to Constrictormorphs </strong></p> <div class="Stile5" id="Layer4"> <p>21-01-2008 22:16</p> </div> <p align="left"><span class="Stile3"><u>Allevamento amatoriale specializzato in boa constrictor </u></span></p> </div></td> <td width="240"><img src="logo nuovo.gif" alt="Logo Cm" width="182" height="157" /></td> </tr> </table> <table width="1030" height="818" border="5" bgcolor="#000000"> <tr> <td width="953" height="42"><table width="893" height="35" border="1"> <tr> <td><div align="center"><span class="Stile4">Home</span></div></td> <td><div align="center" class="Stile4">Chi siamo </div></td> <td><div align="center" class="Stile4">Galleria</div></td> <td><div align="center" class="Stile4">Disponibilità</div></td> <td><div align="center" class="Stile4">Contatti</div></td> </tr> </table></td> </tr> <tr> <td height="760" bordercolor="#333333"><div id="Layer6"> <table width="505" height="346" border="1"> <tr> <td><img src="DSCF0427.jpg" alt="Sunglow" width="505" height="346" /></td> </tr> </table> </div> <div id="Layer7"> <table width="200" border="1"> <tr> <td height="26"><div align="center" class="Stile4">Blog</div></td> </tr> <tr> <td height="325"> </td> </tr> </table> </div> <div id="Layer8"> <table width="200" height="353" border="1"> <tr> <td height="22" class="Stile4"><div align="center">Collezione</div></td> </tr> <tr> <td height="316"><div id="Layer9"> <div align="center"><span class="Stile6"><u>Ancestrale</u></span></div> </div> <div class="Stile6" id="Layer10"> <div align="center"><u>Albino Kahl </u></div> </div> <div class="Stile6" id="Layer11"> <div align="center"><u>Albino Sharp</u> <div id="Layer12"><u>Anery</u> <div id="Layer13"><u>Ghost</u> <div id="Layer14"><u>Salmon</u></div> </div> </div> </div> </div></td> </tr> </table> <p> </p> </div></td> </tr> </table> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </body> </html>

23-01-08, 16:20	#9 (permalink)
kaisersose Esperto Data di registrazione: Sep 2005 Ubicazione: Barcellona Messaggi: 1,111	cosi da una lettura veloce direi che il problema e nell'absolute, in pratica se lo imposti absolute il div si posiziona ,appunto in modo assoluto, quindi naturale che si sfasi tutto o che si sovrappongono con altri div. Comunque ora vado a mangiare dopo lo guardo meglio e cerchiamo di trovare una soluzione.
	__________________ b&b - bread & breakfast italiani

23-01-08, 16:23	#10 (permalink)
Andreasnake User Data di registrazione: Jan 2008 Messaggi: 10	Ecco grazie mille, perche mi blocco non posso andare avanti.. Grazie ancora

23-01-08, 16:44	#11 (permalink)
misterwo User Data di registrazione: Oct 2007 Ubicazione: Brescia Messaggi: 607	il regno dell'absolute... ma scusa come mai mischi tabelle e layout? a parte questo stai annidando il mondo, div con dentro table o viceversa nn ha senso... ma solo con i div? se proprio tab... alla fine è la parte centrale che rimane fissa e nn segue..credo che la colpa sia tra #Layer8 e soci...
	__________________ a star bene gente... \| Ricette di cucina \|

23-01-08, 21:21	#12 (permalink)
kaisersose Esperto Data di registrazione: Sep 2005 Ubicazione: Barcellona Messaggi: 1,111	Ciao, scusa il ritardo sono rientrato da poco. beh direi che c'è un bel po di confusione con i div,quando si imposta la proprietà absolute a un div le dimensioni e la posizione sono indipendenti dagli altri, ecco il perchè dello sfasamento. ti faccio un esempio, se un div lo imposti con margin-left, cioe lo spazio tra il lato di sinistra e il div , a 100px e posizione assoluta e un altro div dai le stesse impostazioni naturale che si sovrappongono. Potra sembrarti banale ma la priam cosa che mi sento di consigliarti e di dare un occhiata ai fogli di stile e al loro utilizzo di seguito due ottime guide. guida di base ai css layout fluidi Da quello che vedo nel codice e da come conosco dreamweaver probabilmente hai disegnato i div " a mano" cioe usando lo strumento disegna livello, beh telo sconsiglio vivamente.il codice cosi come e un po difficile correggerlo, se hai freta di fare il sito, lascia stare per ora i div, quindi cancella il codice dei vari layer e usa solo tabelle, se invece hai voglia di imparare magari partendo proprio da questo sito che stai facendo allora: cancella tutto il codice e aiutandoti con le guide prova a creare uan struttra di base con i div, poi a suo interno puoi inserire quello che vuoi. purtroppo e una soluzione drastica ma cosi come e quasi impossibile correggere il codice. Parti creando 5 div,contenitore(che contiene gli altri div) header,menu,content,footer. imposta per ognuno le proprieta di base,il div principale contenitore, impostalo con misure in percentuale, oppure non impostare nulla se vuoi che occupi tutta la pagina. Pe rlevarie prorpieta dei div puoi usare il pannello dei stili di dreamweaver, crei un nuovo foglio di stile, lo coleghi al tuo file html, non usare percorsi assoluti come in questo codice che hai postato : <link rel="stylesheet" href="file:///Macintosh HD/Users/Andrea/Desktop/mm_entertainment.css" type="text/css" /> e sbagliato: <link rel="stylesheet" href="stili/mm_entertainment.css" type="text/css" /> e corretto, ho messo stili/ davanti presupponendo che ti crei una cartella apposita in cui conservare i fogli di stile. cancella tutti gli stili interni cioe : #Layer1 { position:absolute; width:908px; height:368px; z-index:1; left: 14px; top: 56px; } et company, che sono quelli che ti creano errore, ma per come e impostato sono anche la struttura portante del sito, se crei i 5 div come ti ho suggerito( ma non devono essere per forza 5,dipende da come struturi il tuo sito) ti semplifichi di gran lunga la vita e tutto il codice css lo inserisci nel foglio di stile collegato, cosi in ogni pagina ti basterà creare i div con i loro nomi e si riadatteranno automaticamente, SO che il tutto ti potra sembrare "profano" o strano, pero credimi, anche per me era cosi, ma con un po di impegno e di studio vedrai che otterrai ottimi risultati. In ogni caso noi siamo qua quando hai un problema posta. Se invece non ti va di studiare o perder tempo, allora cancella tutti i div,nel tuo codice e usa solo tabelle, ma se impari a usare i div avrai tantissime soddisfazioni, ci sono passato e lo so.
	__________________ b&b - bread & breakfast italiani

23-01-08, 21:30	#13 (permalink)
Andreasnake User Data di registrazione: Jan 2008 Messaggi: 10	Grazie mille, ho tantissima voglia di imparare solo che fino ad ora nessuno mi ha aiutato piu di tanto.. Ho creato tutto a mano ( in progettazione) il codice lo sconosco non capisco neppure ciò che mi hai detto esempio: div,tag, e quant'altro.. Se qualcuno mi illumina ci provo.. Grazie mille.

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email