Cabecera HTML

Deiv · #1 31-12-2007

Me ha interesado cómo obtuvieron fijar un logo inamovible en esta página:

Código PHP:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<style type="text/css">
#logo {
 Z-INDEX: 1; LEFT: 0px; MARGIN: 0px; COLOR: white; POSITION: absolute; TOP: 0px
}
[id]#logo {
 POSITION: fixed
}
</style>
<body>
<P id=logo><A title=Home href="http://coding.derkeiler.com/"><IMG title=Home 
height=308 alt=derkeiler.com src="logo.png" width=77 border=0></A></P>
</body>
</html>

PRIMERO.-
El código trabaja muy bien en IE7 pero:
1.- En IE6 no funciona ¿Por qué?
2.- En IE7 si de la cabecera le quito: "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
y solamente le dejo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
Tampoco funciona ¿Por qué?

SEGUNDO.-
El Script de abajo que encontre de tantos ejemplos en la Red:

Código PHP:


			
if (document.all) {
yourLogo = "Mouse Orbital - "; 
logoFont = "Arial";
logoColor = "FFFFFF";
yourLogo = yourLogo.split(''); 
L = yourLogo.length; 
TrigSplit = 360 / L; 
Sz = new Array()
logoWidth = 60; 
logoHeight = -30; 
ypos = 0; 
xpos = 0; 
step = 0.03; 
currStep = 0; 
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
 document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
 +'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
 +'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;   
xpos = event.x - 5;  
}
document.onmousemove=Mouse;
function animateLogo() {
 outer.style.pixelTop = document.body.scrollTop;  
 for (i = 0; i < L; i++) {  
  ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
  ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
  Sz[i] = ie[i].style.pixelTop - ypos; 
  if (Sz[i] < 5) 
   Sz[i] = 5; 
  ie[i].style.fontSize = Sz[i] / 1.7; 
 }
 currStep -= step; 
 setTimeout('animateLogo()', 20); 
}
window.onload = animateLogo;
}

Si coloco en la Cabececera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
Este interesante efecto funciona siguiendo al Mouse pero.... cuando se hace Scroll de la Página con la rueda Central del Mouse: El EFECTO del Script NO SIGUE al Mouse ¿Por qué?

Sin embargo si QUITO toda la cabecera, o sea borro todo el:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
¡Funciona perfectamente!! ¿Por qué?. El efecto sigue al mouse, y con el scroll tampoco se hace problemas.

Entonces resumiendo:
Nuevamente ¿Cómo entender esto de las Cabeceras? ¿Cómo darse cuenta para los ejemplos que menciono: ¿Cuando utilizar uno de otro?
En la primera pregunta estoy suponiendo que el IE6 no tiene esa capacidad para mantener fijo el logo?
Pero ¿por qué al borrar como mencioné UNA PARTE de la cabecera tampoco funciona en IE7?
En la segunda pregunta mas extraño aún, si quito toda, pero toda la cabecera, funciona muy bien el Script, y ¿Por qué NO así con cabecera?
Feliz Año nuevo a todo los amigos del Foro!

Deiv · #2 10-01-2008

Hola amigos,
No existe alguna orientación sobre mi último post?
Saludos

jachguate · #3 11-01-2008

Cita:

Empezado por Deiv

Nuevamente [i]¿Cómo entender esto de las Cabeceras?

Creo que lo primero que debes preguntarte es para que sirve la cabecera. Dicho en pocas palabras, es una indicación al Web Browser de cómo interpretar el contenido de la página. Si la cabecera no está, el WebBrowser usará la convención que él mismo determine.
Esto responde automáticamente la pregunta que has hecho:

Cita:

Empezado por Deiv

En la segunda pregunta mas extraño aún, si quito toda, pero toda la cabecera, funciona muy bien el Script, y ¿Por qué NO así con cabecera?

Porque al no estar la cabecera, un determinado navegador está suponiendo que tu documento cumple con determinado estándar. Al estar la cabecera, quien está indicando cuál es ese estandar sos vos.

Cita:

Empezado por Deiv

¿Cómo darse cuenta para los ejemplos que menciono: ¿Cuando utilizar uno de otro?

No creo que exista un método estándar para esto. Debes leer, conocer y entender las especificaciones, debes también leer sobre saber cómo funcionan los navegadores, ya que hay algunos (como el IE) que en muchos casos se pasán el estándar por el forro... y finalmente, aplicar el método de prueba y error.

Triste, pero cierto.

Hasta luego.

Herramientas	Buscar en Tema
Mostrar Versión Imprimible Enviar por Correo	Buscar en Tema: Búsqueda Avanzada
Desplegado
Cambiar a Modo Lineal Modo Híbrido Cambiar a Modo Hilado

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
publicidad y cabecera	Camila	Internet	2	16-07-2006 09:19:52
Cabecera-líneas	Asshole	Conexión con bases de datos	0	09-06-2005 18:56:58
Cabecera DataGrid	mamen	.NET	4	26-10-2004 13:16:51
Cabecera-lineas	Asshole	Impresión	1	27-05-2004 04:40:39
Cabecera en SubDeails	buitrago	Impresión	0	25-11-2003 19:29:47