Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

Layer su Explorer e Firefox

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

Layer su Explorer e Firefox

Postdi Swalke » 15/05/05 17:37

Ciao ragazzi!
Ho un problema Letale!

Sono riuscito, dopo mille fatiche ad ottenere un Layer centrato nella pagina.

La particolarità di questo layer è che la sua posizione non cambia in base alla risoluzione (rimane sempre al centro). Se però si scende al di sotto della dimensione della pagina trascinando i bordi della finestra allora il layer resta fisso. E' più facile a farsi che a spiegarsi.

[PICCOLA PARENTESI PER I PIU' CURIOSI]
Se fate un layer che resta sempre centrato, e avete una pagina che consiste in una grande tabella centrata rispetto alla finestra, se rimpicciolite la finestra oltre alle dimensioni della tabella, vedrete il layer scorrere (per tenersi sempre al centro) sopra la vostra tabella.
Ecco, nel mio caso ho eliminato questa cosa pur mantenendo la centratura quando la finestra è a tutto schermo, qualsiasi sia la risoluzione.
Quindi nel mio caso il Layer resta sempre in una posizione specifica indipendentemente dalla risoluzione, ma anche indipendentemente dal rimpicciolimento della finestra oltre la misura della tabella centrale contenente tutta la pagina web

[FINE PARENTESI PER I PIU' CURIOSI]

Il mio problema è che in Explorer il Layer occupa una posizione, mentre in Firefox ne occupa un altra!
Cosa si può fare per evitare questa cosa?
...e perchè ciò succede?

Se non trovo una soluzione sono nella c***a!

Vi lascio il codice del layer... ...magari vi è' d'aiuto:

Codice: Seleziona tutto
<style type="text/css">
body {
margin: 0px;
height: 100%;
}
div.LayerCentrato {
text-align: center;

color: #192939;
position: Absolute;
top: 203;
center: 50%;
font-size: 12px;
font-family: Verdana;
font-weight: Bold;
width: 510px;
height: 122px;
border: Solid 0px #CCCCCC;
margin: -61px, -390px;

}
</style>


Codice: Seleziona tutto
<div class="LayerCentrato"><TABLE WIDTH=510 align=center cellpadding=0 cellspacing=0><tr><td><img src="immagini/ArkRoll.gif" name="Ark" width="510" height="122" border="0" usemap="#Map" id="Ark"></td></tr></TABLE></div>


Spero che qualcuno sappia aiutarmi!

Grazie a tutti!
Avatar utente
Swalke
Hardware Admin
 
Post: 820
Iscritto il: 26/10/01 01:00
Località: Milano

Sponsor
 

Postdi Mone » 15/05/05 22:17

L'ho provato ma non ho capito in che modo resti centrato.... :oops:

Vabbè comunque visto che per qualsiasi problema tiro fuori Javascript, eccone uno anche per te:

http://www.quirksmode.org/js/fixedmenu.html

chissà se matcha con le tue necessità! 8)
lo script l'illustrato fa in modo che ci sia un layer fisso in un punto nella finestra.
Avatar utente
Mone
Utente Senior
 
Post: 343
Iscritto il: 21/10/03 19:44
Località: Zion

Postdi Triumph Of Steel » 15/05/05 22:59

mhmh non mi è chiaro nemmeno a me, perchè su IE a me la tabella si vede per metà, mentre l'altra metà va fuori finestra!

togliendo dallo stile
Codice: Seleziona tutto
margin: -61px, -390px;

mi risulta uguale in entrambi i browser, e cmq non centrata, ma attaccata al bordo sinistro della finestra!
Avatar utente
Triumph Of Steel
Moderatore
 
Post: 7852
Iscritto il: 22/08/01 01:00

Postdi Swalke » 16/05/05 01:02

Mone: il tuo script non fa al caso mio! Invece di provare a spiegarti perchè (cosa complicatissima) ti faccio fare una prova.
Prendi questo codice e fai una pagina web.
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
height: 100%;
}
div.LayerCentrato {
text-align: center;

color: #192939;
position: Absolute;
top: 70;
center: 50%;
font-size: 12px;
font-family: Verdana;
font-weight: Bold;
width: 300px;
height: 122px;
border: Solid 0px #CCCCCC;
margin: -61px, -50px;
}
</style>
<title>Prova</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table WIDTH=785 align=center cellpadding=0 cellspacing=0 bgcolor="#999999">
<tr>
<td >
<div class="LayerCentrato">
<TABLE WIDTH=100 align=center cellpadding=0 cellspacing=0 bgcolor="#FF0000">
<tr><td>Come va???</td></tr></TABLE>
</div>
<p>Ciao CiaoCiao CiaoCiao CiaoCiao CiaoCiao CiaoCiao CiaoCiao CiaoCiao CiaoCiao
CiaoCiao CiaoCiao Ciao</p>
<p>Ciao CiaoCiao CiaoCiao CiaoCiao CiaoCiao Ciao</p>
<p>Ciao CiaoCiao CiaoCiao Ciao</p>
<p>Ciao CiaoCiao CiaoCiao Ciao</p></td>
</tr></table>
</body>
</html>


Visualizala con explorer mettendo una risoluzione di 1024x768.
La tabella rossa, qualsiasi cosa tu faccia, resterà sempre alla stessa distanza da una scritta "Ciao" presa di riferimento. Puoi cambiare risoluzione, stringere o allargare la finestra, ma lei starà sempre li.
Ora prova a rimpicciolire piano piano la finestra trascinando il bordo destro, fino al massimo. Vedi? La tabella rossa è sempre li alla stessa distanza dalla scritta "Ciao" di riferimento.
Se provi a fare la stessa cosa col tuo script, ad un certo punto vedrai il menù che resterà certamente sempre in una certa posizione rispetto la finestra ma che inizierà a scorrere rispetto a una qualsiasi scritta "Ciao" di riferimento. Questo non deve accadere!

Il mio Layer costruito in quel modo (casualmente) era perfetto, solo che su Firefox si vede in una posizione diversa da Explorer! E questo non va bene!

Triumph: se io tolgo quella parte nello stile semplicemente mi si sposta + in basso e + a destra sia in Firefox che in explorer, però la differenza di posizionamento mi resta!

Comuqne la mia domanda finale è:
Non c'è un modo di ottenere lo stesso effetto che succede nel codice che ho postato qui sopra, che funzioni sia su Firefox che su Explorer?

Questa cosa che io ho creato casualmente pacioccando con uno stile trovato su web è molto potente perchè permette di fissare un oggeto in un punto preciso di una pagina in ogni situazione immaginabile.
Peccato che i browser lo digeriscano in modo diverso!

Devo assolutamente aggirare questo inconveniente!
Aiuto!!!
Avatar utente
Swalke
Hardware Admin
 
Post: 820
Iscritto il: 26/10/01 01:00
Località: Milano

Postdi archimede » 16/05/05 09:23

Il tuo CSS non è valido. Prova così:
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<style type="text/css">
body {
margin: 0px;
height: 100%;
}
div.LayerCentrato {
text-align: center;

color: #192939;
background: transparent;
background-image: none;
position: relative;
top: 70px;
font-size: 12px;
font-family: Verdana;
font-weight: Bold;
width: 300px;
height: 122px;
border: Solid 0px #CCCCCC;
margin: -61px -50px;
}
</style>
<title>Prova</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table WIDTH=785 align=center cellpadding=0 cellspacing=0 bgcolor="#999999">
  <tr>
    <td >
      <div class="LayerCentrato">
      <TABLE WIDTH=100 align=center cellpadding=0 cellspacing=0 bgcolor="#FF0000">
        <tr>
          <td>Come va???</td>
        </tr>
      </TABLE>
      </div>
      <p>Ciao CiaoCiao CiaoCiao CiaoCiao CiaoCiao CiaoCiao CiaoCiao CiaoCiao CiaoCiao
      CiaoCiao CiaoCiao Ciao</p>
      <p>Ciao CiaoCiao CiaoCiao CiaoCiao CiaoCiao Ciao</p>
      <p>Ciao CiaoCiao CiaoCiao Ciao</p>
      <p>Ciao CiaoCiao CiaoCiao Ciao</p>
    </td>
  </tr>
</table>
</body>
</html>
HTH.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi Swalke » 16/05/05 11:16

Archimede! Col tuo stile sono praticamente riuscito.

In pratica ho sostituito quel "absolute" col "relative".
Se non ho capito male in questo modo gli dai una posizione (usando i due atributi "top" e "left") rispetto alla cella in cui il div è inserito giusto?

Bene!!! Mitico!
Era quello che volevo!

Però c'è ancora un problemino tra Firefox e Explorer. Questo non si riesce a vedere nella pagina di cui ho postato l'html.
Tra firefox e Explorer c'è una differenza di un pixell sull'asse y nel visualizzare il layer.
Io me ne rendo conto perchè nel layer ci ho messo una rollover che cambia da trasparente nella stessa immagine che ho sotto al layer e in pratica passandoci sopra col mouse in firefox la vedo sfalsarsi di un pixel verso l'alto!
A questo punto l'unica soluzione è quella di riconoscere il browser e di cambiare il posizionamento in base al browser?
Avatar utente
Swalke
Hardware Admin
 
Post: 820
Iscritto il: 26/10/01 01:00
Località: Milano

Postdi archimede » 16/05/05 11:42

Swalke ha scritto:A questo punto l'unica soluzione è quella di riconoscere il browser e di cambiare il posizionamento in base al browser?
E' possibile: CSS veramente cross-browser io non sono mai riuscito a scriverne (per cose un po' particolari, s'intende) ma c'è chi sostiene che si può fare.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi Swalke » 16/05/05 12:31

Ho risolto!
Quello shift di un pixel verso l'alto non centrava con lo stile ma con l'altezza della cella in cui inserivo il div. Togliendo l'attributo di altezza laaa cella ora vedo in firefox la stessa cosa che in explorer.

E' proprio triste che un browse visualizzi queste differenze rispetto ad un altro!
Ora io ho messo a posto rispetto a Firefox e Explorer ma non oso pensare cosa si vedrebbe con Netscape, Opera, Conqueror o chissà cos'altro!

Cosa può fare uno a parte recarsi a Lourdes?
Dovrebbe installarsi i 5 browser più usati?
Quindi Explorer, Firefox...
...chi mi completa la lista?

Grazie mille!
Avatar utente
Swalke
Hardware Admin
 
Post: 820
Iscritto il: 26/10/01 01:00
Località: Milano

Postdi archimede » 16/05/05 13:59

Swalke ha scritto:Quindi Explorer, Firefox...
...chi mi completa la lista?
Opera e Netscape, tanto per citare i primi due che mi sovvengono.

Poi (ovviamente?) potrai divertiti a scoprire le differenze tra le diverse versioni dello stesso browser (IE5.5, se ben ricordo, è particolarmente istruttivo).

Infine tanti auguri per le varie piattaforme (Mac e Linux, ad esempio).

Good luck.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi Swalke » 16/05/05 14:26

Dovrebbero UNIFORMARE le interpretazioni del codice da parte dei browser!
Così come c'è un protocollo per il trasporto dati, si dovrebbe creare uno standard per l'interpretazione del codice!
Così è quasi il CAOS!
Avatar utente
Swalke
Hardware Admin
 
Post: 820
Iscritto il: 26/10/01 01:00
Località: Milano

Postdi Mone » 16/05/05 20:47

Dovrebbero UNIFORMARE le interpretazioni del codice da parte dei browser!

Ci sta provando il w3c e piano piano ci stiamo avvicinando, rispetto al passato i browser ora sono compatibilissimi!
Sempre sul sito dello script precedente trovi un po' di storia:
http://www.quirksmode.org/browsers/history.html
...chi mi completa la lista?

8) Attenzione, se sei debole di cuore non andare a questo indirizzo:
http://browsers.evolt.org

(ci sono addirittura browser per console...)
Avatar utente
Mone
Utente Senior
 
Post: 343
Iscritto il: 21/10/03 19:44
Località: Zion

Postdi Swalke » 18/05/05 20:09

Porca vacca quanti ne esistono!? :eeh:

E dire che dalla lista manca ad esempio Konqueroro... ...chissà perchè?

Quindi chissà quanti altri ce ne saranno!

Comunque statisticamente credo che se una pagina web la metti a posto per i 4 o 5 browser più usati, allora è a posto per quasi tutti credo.
Tralasciando il fatto che alcuni non supportano javascript o cose del genere.

Credo che se qualcuno si mette a costruire un browser cercherà di fare in modo che si avvicini il più possibile a quelli + conosciuti (a livello di interpretazione e visualizzazione del codice) anche perchè se no rischia di fare un browser che nessuno usa visto che molti siti Web sono costruiti basandosi su ciò che viene visualizzato dai browser più conosciuti.
No? :roll:
Avatar utente
Swalke
Hardware Admin
 
Post: 820
Iscritto il: 26/10/01 01:00
Località: Milano

Postdi Mone » 30/05/05 17:11

Così ad occhio almeno l'80% dei browser è un IE, quindi i browser + conosciuti in teoria è IE....

Se vuoi essere sicuro di andare bene praticamente ovunque ti consiglio 4 test:
IE
FireFox
Opera
Konqueror/Safari
Avatar utente
Mone
Utente Senior
 
Post: 343
Iscritto il: 21/10/03 19:44
Località: Zion


Torna a Programmazione


Topic correlati a "Layer su Explorer e Firefox":

Problema con firefox
Autore: Girod
Forum: Software Windows
Risposte: 1

Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti