Problema con el DOCTYPE

PabloFerran · #1 (**permalink**) 13/12/2010, 11:33

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.

chicohot20 · #2 (**permalink**) 13/12/2010, 15:45

Encontre esto: http://cesarv.com/blog/?p=21 talvez te ayude a entender algo.

PabloFerran · #3 (**permalink**) 13/12/2010, 15:56

Cita:

Iniciado por chicohot20

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; }

PabloFerran · #4 (**permalink**) 15/12/2010, 10:25

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?

punk567 · #5 (**permalink**) 15/12/2010, 12:24

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

PabloFerran · #6 (**permalink**) 15/12/2010, 12:30

Cita:

Iniciado por punk567

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?

punk567 · #7 (**permalink**) 15/12/2010, 12:45

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

PabloFerran · #8 (**permalink**) 15/12/2010, 13:41

Cita:

Iniciado por punk567

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.