Problema con capas en xhtml strict: no se ponen como un bloque

MadridVsBarsa · #1 (**permalink**) 15/12/2004, 11:39

Wenas.

Mi problema es que usaba html con hojas de estilo para hacer una pagina web. Ahora la estoy convirtiendo a xhtml strict.

La pagina tiene capas. Lo podeis ver en la siguiente imagen como queda.
(Hay una capa global, capa roja con la propiedad display:block, que tiene contenido a dos capas:
Una capa con el menu, que es la capa azul con display:inline, y otra capa con el contenido, que es la capa verde con display:inline):

Se supone que ya no hay que hacer mas cambios en la web para que cumpla los requisitos xhtml, salvo el insertar al principio del documento la linea:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Al insertar esta linea, las capas pierden su forma de bloque, y se convierten de la forma que muestra la siguiente imagen:

He hecho mil pruebas con las propiedades pero no consigo nada. Si pongo la capa azul y verde con "display:block" si que salen como bloque, pero claro, me sale una encima de otra, y si las pongo con "display:inline" sale como indica la segunda imagen

Asique nada, no consigo hacer que al incluir la cabecera de xhtml quede las capas de forma que indica la primera imagen.

... sabeis porque puede ser?

kemie · #2 (**permalink**) 15/12/2004, 11:47

como tienes posicionadas tus capas?

MadridVsBarsa · #3 (**permalink**) 15/12/2004, 11:57

no se si te refieres a la propiedad position, pero no he dado ningun valor, ni relative ni absulte. Hice pruebas poniendolas pero nada, tampoco salia.

Los estilos que aplico a las capas son:

.bloqueglobal {
width: 700px;
display: block;
text-align:left;
margin: 10px 10px;
padding: 0px;
background: red;
}

#menu {
width: 122px;
display: inline;
margin: 0px;
padding: 10px;
text-align: center;
background: blue;
}

#contenido {
background: green;
display: inline;
margin: 0px;
padding: 10px 10px 10px 0px;
width: 570px;
text-align: left;
vertical-align: top;
}

JavierB · #4 (**permalink**) 15/12/2004, 12:52

Hola MadridVsBarsa

Por probar, prueba esto:

#menu {
float:left;
width: 122px;

Espero que te sirva. Saludos,

KnowDemon · #5 (**permalink**) 15/12/2004, 13:09

Hola,

No soy de la idea de que uses capas con la propiedad display: inline para tu menu y contenidos. Podrías intentar colocar el menu posicionandolo de forma absoluta, y el contenido de forma "normal" con un margen izquierdo del mismo tamaño que el ancho del menu...

Puedes ver algo más o menos así aquí: http://mx.geocities.com/genesceptica/ (Solo que los lados estan invertidos - El sitio solo contiene la portada.. falta todo lo demás). La hoja de estilos base de esa página esta en: http://mx.geocities.com/genesceptica/base.css Checa el código de ambos...

¡Suerte!

MadridVsBarsa · #6 (**permalink**) 15/12/2004, 14:24

Muchas gracias a todos.

Ya esta arreglado el problema. Al final he usado la propiedad que dijo JavierB float:left para la capa del menu y float:right para la capa del contenido.

Tambien he estado haciendo pruebas con lo que me dijo KnowDemon. Pero es que de esa forma me tocaba estar dando posiciones absolutas y de momento queria evitarlo.

Por cierto KnowDemon, esta muy chula tu pagina. La visitare mas dias. Muy ocurrente lo de poder cambiar totalmente de aspecto de la pagina. Lo tendre en cuenta para poner algo parecido en mi pagina, pero con php en vez de con javascript.

Saludos y gracias por ayudarme.

MadridVsBarsa · #7 (**permalink**) 15/12/2004, 14:26

Ah, se me olvidaba KnowDemon, porque decias que no eras de la idea de usar la propiedad display: inline? no controlo demasiado esto y lo mismo tiene algun inconveniente que me sirva para el futuro

Saludos

KnowDemon · #8 (**permalink**) 15/12/2004, 23:42

Cita:

Iniciado por MadridVsBarsa

Ah, se me olvidaba KnowDemon, porque decias que no eras de la idea de usar la propiedad display: inline? no controlo demasiado esto y lo mismo tiene algun inconveniente que me sirva para el futuro

Saludos

Por mera cuestión de preferencia personal.

1. No es necesario.
2. Me parecería rara la existencia de elementos en bloque (párrafos) contenidos en elementos de línea (div's con display:inline).

Que yo sepa no tiene ningún inconveniente. De cualquier forma, la propiedad float convierte a todo en bloque...

MadridVsBarsa · #9 (**permalink**) 16/12/2004, 05:06

amm...la verdad es que si es algo contradictorio tener una etiqueta para formar un bloque y a la vez tener una propiedad en ella que quite ese bloque. Pos na, gracias.