Estoy haciendo una pagina web y lo que quiero es crear la estructura con divs, que sea mas o menos compatible con IE y FireFox y que sea compatible con varias resoluciones.
Os cuento cual es la estructura de la pagina con div.
-tengo 6 div { .general -dentro de general tengo - .header
- .cuerpo -dentro tengo - .menu
- .contenido
- .footer
Para darle formato utilizo una hoja de estilo externa (estilo.css).
Para que sea compatible con varias resoluciones estoy poniendo los width en "%" y los height en
"em".
Problemas:
-mi pagina web se ve casi perfetamente en IE es decir todos los div estan en su sitio pero en FireFox tengo un espacio (como un salto de linea) entra capas es decir entre las capas header y cuerpo hay como un salto de linea.
-cuando cambio la resolucion de 1024x768 a 800x600 los div se adaptan a la nueva resolucion pero en cambio el texto no. El texto sobresale de la caja se que igual que en la resolucion 1024x768. Lo que yo queria es que la linea de texto se reduzca y se crean mas lineas (no se si me explico bien).
-tambien me gustaria definir un ancho minimo es decir la capa x tiene width=100% pero debido a que dentro tengo texto y quiero que quede mas o menos bien en una ventana reducida, me gustaria limiar el ancho minimo a por ejemplo: 600px o a 40% (algo parecido).
Yo creo que el problema esta en las propiedades puestas para cada div. Podria estar en la propiedad display para el texto. Y otra cosa ... todos mis div tiene posicion relativa.
Mi codigo HTML es:
------------------------------------------------------------------------------
Cita:
------------------------------------------------------------------------------</head>
<body>
<div class="general">
<div class="header">
<p>Encabezado</p>
</div>
<div class="cuerpo">
<div class="menu">
<p>Menu</p>
</div>
<div class="contenido">
<p>Aqui pondre el contenido de mi pagina web</p>
</div>
</div>
<div class="footer">
<p>Pie de Pagina</p>
</div>
</div>
</body>
</html>
<body>
<div class="general">
<div class="header">
<p>Encabezado</p>
</div>
<div class="cuerpo">
<div class="menu">
<p>Menu</p>
</div>
<div class="contenido">
<p>Aqui pondre el contenido de mi pagina web</p>
</div>
</div>
<div class="footer">
<p>Pie de Pagina</p>
</div>
</div>
</body>
</html>
Mi codigo CSS es
------------------------------------------------------------------------------
Cita:
------------------------------------------------------------------------------body {background-color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14pt;
margin:0px;
padding:0px;}
p {text-align:center;}
div.general {position:relative;
border-style:solid;
border-color:#990000;
border-width:thin;
width:auto;
height:auto;}
div.header {background-color:#CCCCCC;
position:relative;
width:100%;
height:4em;}
div.cuerpo {position:relative;
width:100%;
height:auto;}
div.menu {background-color:#0066CC;
position:relative;
float:left;
width:200px;
height:auto;}
div.contenido{background-color:#99CC00;
position:relative;
margin-left:200px;
width:auto;
height:auto;}
div.footer {background-color:#CCCCCC;
position:relative;
width:100%;
height:3em;}
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14pt;
margin:0px;
padding:0px;}
p {text-align:center;}
div.general {position:relative;
border-style:solid;
border-color:#990000;
border-width:thin;
width:auto;
height:auto;}
div.header {background-color:#CCCCCC;
position:relative;
width:100%;
height:4em;}
div.cuerpo {position:relative;
width:100%;
height:auto;}
div.menu {background-color:#0066CC;
position:relative;
float:left;
width:200px;
height:auto;}
div.contenido{background-color:#99CC00;
position:relative;
margin-left:200px;
width:auto;
height:auto;}
div.footer {background-color:#CCCCCC;
position:relative;
width:100%;
height:3em;}
Gracias y espero que este post sirva para muchos porque es una cosa que todos buscamos y hay poca informacion.
Saludos
