Diseñar un portlet con DIV/CSS
Buenas, necesito diseñar portlets para una aplicación web, esto es después de todo crear un html que tenga 100% de ancho y alto, pero sin usar tablas.
Más o menos lo he conseguido así:
div#cuerpo-portlet {
display: block;
position: absolute;
background-color: orange;
width: 100%;
height: 100%;
}
Aún no he empezado a trabajar dentro de él y no sé si tendré problemas de posicionamiento con los elementos que haya dentro, que serán listas y quizás alguna tabla.
Pero el problema principal es que ese código que he puesto ahí lo leen bien todos los navegadores salvo IE6, que solo muestra el ancho y alto de los elementos de dentro, por ejemplo con un párrafo lo sitúa en el top y "pinta" el background-color solamente la altura de ¿alguna solución? ¿mejor hacerlo de otra manera?
¡¡¡¡Muchas gracias de antemano!!!!
zzyzx
@Alejandro Arco: Ya eso es tambien es otra cosa, me acuerdo que un cliente tenia un monitor mas pequeño de lo normal ahora y tuve que adaptarla para que el lo viera bien en fina es un caos algunas veces. Por que o haces una web buena y te pones en contra del cliente o pasas por el aro y cobras
alejandro_arco
@zzyzx: Yo también opino que deberiamos empezar de dejar de arreglar los fallos para el IE6... pero en la mayoría de los casos los clientes no lo entienden jeje
zzyzx
Te aconsejo que hagas un css aparte para corregir los fallos de Ie6 (usando los condicionales de html para los navegadores)
Aunque yo opino que ya deberiamos pasar de arreglar fallos de Internet explorer 6
Un saludo
alejandro_arco
@viroc: lo que tienes que hacer para poder abacar el 100% del alto y ancho de la página y que sea compatible con todos los navegadores es añadir a todas las etiquetas implicadas y por orden jerárquico el:
, con esto quiero decir que por mucho que pongas a la etiqueta html y body su 100%, si al div contenedor y dentro de este al div portlet no se lo pones, no te funcionará. Con esos conceptos claros, luego es ir jugando con los porcentajes en función de lo que necesites.
Puedes poner por defecto todos los valores al 100% y si necesitas modificar el valor de un div, pues te creas un div#id específico con otro valor:
Un saludo,
Alejandro Arco
viroc
Gracias tio, al mismo tiempo había encontrado en un foro la solución. Además vi también esto, se ve que arregla incompatibilidades de IE6 y anteriores:
Por otro lado, para que los portlets se separan entre sí, añadí un margin: 1%; restándole al contenedor para sumar 100% al total, supongo que en el html y body también tendré que hacerlo, no?
Un saludo y muchas gracias hartum!
hartum
Añade esto:
html,body{height:100%;
width:100%;
}