Foros del Web » Creando para Internet » CSS »

Problema con el DOCTYPE

Estas en el tema de Problema con el DOCTYPE en el foro de CSS en Foros del Web. Hola a todos, quisiera saber si me pueden solucionar una duda. Estoy haciendo una página web en la que sól estoy utilizando las tecnologías HTML ...
  #1 (permalink)  
Antiguo 13/12/2010, 11:33
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Problema con el DOCTYPE

Hola a todos, quisiera saber si me pueden solucionar una duda.
Estoy haciendo una página web en la que sól estoy utilizando las tecnologías HTML y CSS (tal vez más tarde use Javascript)
Tenía Rollovers hecho con Javascript pero me aconsejaron hacerlo con CSS asi que me puse a cambiarlo. Realicé el código CSS (Rollover método sprite) a la perfección y hice los respectivos cambios en el HTML. Volvi a abrir la página y esta estaba normal, se veían las imágenes pero su Rollover no funcionaba. Le puse el siguiente DOCTYPE para que funcionase:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

d"> 
El rollover ahora funciona, pero a cambio todos los divs y otros elementos de la página HAN QUEDADO COMPLETAMENTE DESCOLOCADOS
Un DOCTYPE puede cambiar tanto?
Si es así por favor espero que me puedan decir que puedo hacer para solucionarlo.
  #2 (permalink)  
Antiguo 13/12/2010, 15:45
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 384
Antigüedad: 8 años, 6 meses
Puntos: 43
Respuesta: Problema con el DOCTYPE

Encontre esto: http://cesarv.com/blog/?p=21 talvez te ayude a entender algo.
  #3 (permalink)  
Antiguo 13/12/2010, 15:56
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema con el DOCTYPE

Cita:
Iniciado por chicohot20 Ver Mensaje
Encontre esto: [url]http://cesarv.com/blog/?p=21[/url] talvez te ayude a entender algo.
Lo lei, no se si lo he entendido bien porque no me ha quedado muy claro. Creo que tengo que poner que el padding y el border sea 0. Voy a probar y ya comentaré que tal me ha ido.

EDIT:
he ajustado el padding border y margin y no he solucionado nada.
El código CSS:
Cita:
BODY{background-image:url('Images/bg.jpg');color:#b3ed46;font-family:Verdana;font-size:11pt;}
.base{background-color:#1f1f1f;position:absolute;top:0px;left:98;vi sibility:visible;z-index:1;width:1024;height:1000;border:0px;margin:0 px;padding:0px}
.head{position:absolute;top:0px;left:98;visibility :visible;z-index:2;border:0px;margin:0px;padding:0px;}
.barra{position:absolute;top:180px;left:98;visibil ity:visible;z-index:2;border:0px;margin:0px;padding:0px;}
.textbase{position:absolute;top:241px;left:123;vis ibility:visible;z-index:2;border:0px;margin:0px;padding:0px;}
.yahO{position:absolute;top:728px;left:133;visibil ity:visible;z-index:2;border:0px;margin:0px;padding:0px;}
.yahT{position:absolute;top:728px;left:629;visibil ity:visible;z-index:2;border:0px;margin:0px;padding:0px;}
.down{position:absolute;top:925px;left:98;visibili ty:visible;z-index:2;border:0px;margin:0px;padding:0px;}
.barraT{position:absolute;top:946px;left:471;visib ility:visible;z-index:3;border:0px;margin:0px;padding:0px;}
.creator{position:absolute;top:971px;left:442;visi bility:visible;z-index:3;border:0px;margin:0px;padding:0px;}
.enlacefinal{text-decoration:none;color:black;font-family:arial;font-size:9ptborder:0px;margin:0px;padding:0px;}
.escrito{position:absolute;top:257px;left:165;visi bility:visible;z-index:3;width:891px;height:377px;border:0px;margin :0px;padding:0px;}
.visitas{position:absolute;top:946px;left:471;visi bility:hidden;z-index:4;border:0px;margin:0px;padding:0px;}
.downloads{text-decoration:none;color:#bef265;font-family:verdana;font-size:12pt;border:0px;margin:0px;padding:0px;}
.tit{text-decoration:none;color:white;font-family:Lucida Sans Unicode;font-size:20pt;border:0px;margin:0px;padding:0px;}
a.downloads:hover{font-weight:bold}
.indexR {
background: url("Images/baropt/index.gif") no-repeat;
width: 132px;
height: 47px;
float: left;
border:0px;margin:0px;padding:0px;
}
.indexR:hover { background-position: 0 -47px; }

.downloadsR {
background: url("Images/baropt/downloads.gif") no-repeat;
width: 132px;
height: 47px;
float: left;
border:0px;margin:0px;padding:0px;
}
.downloadsR:hover { background-position: 0 -47px; }

.aboutusR {
background: url("Images/baropt/aboutus.gif") no-repeat;
width: 132px;
height: 47px;
float: left;
border:0px;margin:0px;padding:0px;
}
.aboutusR:hover { background-position: 0 -47px; }

.joinusR {
background: url("Images/baropt/joinus.gif") no-repeat;
width: 132px;
height: 47px;
float: left;
border:0px;margin:0px;padding:0px;
}
.joinusR:hover { background-position: 0 -47px; }

.contactR {
background: url("Images/baropt/contact.gif") no-repeat;
width: 132px;
height: 47px;
float: left;
border:0px;margin:0px;padding:0px;
}
.contactR:hover { background-position: 0 -47px; }

Última edición por PabloFerran; 13/12/2010 a las 16:02
  #4 (permalink)  
Antiguo 15/12/2010, 10:25
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema con el DOCTYPE

Mi problema sigue. He limpiado mi código según el modelo de W3C y he probado con los 3 tipos de DOCTYPES HTML -> Transitional, strict y frameset.
Alguien me puede dar una luz?
  #5 (permalink)  
Antiguo 15/12/2010, 12:24
Avatar de punk567  
Fecha de Ingreso: octubre-2006
Ubicación: Montevideo
Mensajes: 265
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: Problema con el DOCTYPE

Hola, te aconsejaría usar Transitional, que es más flexible

y en el css esto:

* {margin:0; padding:0} resetea el margen y el padding para todos los elementos

y a partir de eso modificar lo que ya tienes

saludos
  #6 (permalink)  
Antiguo 15/12/2010, 12:30
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema con el DOCTYPE

Cita:
Iniciado por punk567 Ver Mensaje
Hola, te aconsejaría usar Transitional, que es más flexible

y en el css esto:

* {margin:0; padding:0} resetea el margen y el padding para todos los elementos

y a partir de eso modificar lo que ya tienes

saludos
Probé con transitional y me sigue distorsionando la página. Ya ajusté en el CSS el padding border y margin a 0.

Ahora estoy pasando mi página por el W3C Validator. Estoy resolviendo todos los errores que me detecta, solo me queda uno. A ver si me podéis ayudar.
El error es el siguiente. Una parte de mi código es así:
Código:
<a href="....."><div class="xxx">Relleno</div></a>
Me dice que <a> no puede contener a <div>, pero quiero que al clicar en cualquier lugar del <div> te lleve al enlace. ¿Cómo lo podría hacer?
  #7 (permalink)  
Antiguo 15/12/2010, 12:45
Avatar de punk567  
Fecha de Ingreso: octubre-2006
Ubicación: Montevideo
Mensajes: 265
Antigüedad: 11 años, 2 meses
Puntos: 5
Respuesta: Problema con el DOCTYPE

intentá al revés

<div class="xxx"><a href=""></a><div>

el tag <a> es de tipo inline, pero si con css le aplicas la propiedad display: block , se comportaría como elemento de bloque, le puedes dar width:100% y height:100% para que abarque el ancho y el alto del div que lo contiene
  #8 (permalink)  
Antiguo 15/12/2010, 13:41
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema con el DOCTYPE

Cita:
Iniciado por punk567 Ver Mensaje
intentá al revés

<div class="xxx"><a href=""></a><div>

el tag <a> es de tipo inline, pero si con css le aplicas la propiedad display: block , se comportaría como elemento de bloque, le puedes dar width:100% y height:100% para que abarque el ancho y el alto del div que lo contiene
Muchas gracias por la ayuda, ya he solucionado el problema. Tanto el CSS como el HTML pasan el W3C Validator y ya se ve todo correctamente.

Etiquetas: doctype
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:01.