Foros del web, para los que viven de bits

kayetano · 30-nov-2005, 10:56

Hola a todos

Tengo el siguiente problema, he creado el siguiente css:

Código:

html, body {height:100%;}

div#tablaprincipal {
    position:relative;
    height:100%;
    background-color:#FFFFFF;
    width:770px;
    margin-left: auto;
    margin-right: auto;
}

div#tablaprincipal div#menu {
	position:relative;
	background-color:#FFFFFF;
	width:770px;
	border: 0px;
}
div#tablaprincipal div#lateral {
	position:relative;
	float:left;
	width:203px;
}
div#tablaprincipal div#contenido {
	position:relative; 
	float:left;
	width:567px;
}

div#tablaprincipal div#pie {
	position:relative; 
	float: right;
	width:567px;
}

En IE funciona correctamente, pero en FF la "tablaprincipal" con fondo blanco solo ocupa el tamaño de la ventana y si mi texto suepera ese tamaño queda fuera del recuadro con fondo blanco que esta con height a 100%.

He probado a poner

Código:

<div style="clear: both">

al final de todas las capas, pero nada, para FF el 100% es el tamaño de la ventana.

Alguien tiene una solucion a este problema.

baccxus · 30-nov-2005, 12:49

Lo edito todo el post:

Todo tu código se reduce a esto:

Código:

#tablaprincipal {
	position:relative;
	background-color:#FFFFFF;
	width:770px;
	margin: 0 auto;
}

#menu {
	width:100%;
}
#lateral {
	float:left;
	width:25%;
}
#contenido {
	float:left;
	width:75%;
	/margin-right: -1px;/*Internet explorer */
}

#pie {
	clear: both;
	width:100%;
}

Por último, "heigth: 100%" se usa dentro de una división con tamaño previamente establecido.

Tu HTML

Código HTML:

<body>
<div id="tablaprincipal">
  <div id="menu">...</div>
  <div id="lateral">...</div>
  <div id="contenido">...</div>
  <div id="pie">...</div></div>
</body>

Saludos,

kayetano · 01-dic-2005, 02:39

Hola

Gracias por tu respuesta, por lo visto el problema era el height:100% en "tablaprincipal", a sido quitarselo y todo ok. MUCHAS GRACIAS.

Una duda, cuando pones

Código:

/margin-right: -1px;/*Internet explorer */

la primera barra "/" es una errata?? y esto que hace en IE ??, he probado a ponerlo y quitarlo y en IE no veo ningún cambio.

baccxus · 01-dic-2005, 07:26

/ es solo para explorer, porque en este la división "contenido" hacia un salto de linea, entonces para evitarlo se lo puse, aparte de que lo probé en varios monitores a distintas resoluciones y en 2 de ellos me pasó el salto de linea.

Saludos

30-nov-2005, 10:56	#1 (permalink)
kayetano Fecha de Ingreso: marzo-2005 Mensajes: 72	height 100% y firefox Hola a todos Tengo el siguiente problema, he creado el siguiente css: Código: html, body {height:100%;} div#tablaprincipal { position:relative; height:100%; background-color:#FFFFFF; width:770px; margin-left: auto; margin-right: auto; } div#tablaprincipal div#menu { position:relative; background-color:#FFFFFF; width:770px; border: 0px; } div#tablaprincipal div#lateral { position:relative; float:left; width:203px; } div#tablaprincipal div#contenido { position:relative; float:left; width:567px; } div#tablaprincipal div#pie { position:relative; float: right; width:567px; } En IE funciona correctamente, pero en FF la "tablaprincipal" con fondo blanco solo ocupa el tamaño de la ventana y si mi texto suepera ese tamaño queda fuera del recuadro con fondo blanco que esta con height a 100%. He probado a poner Código: <div style="clear: both"> al final de todas las capas, pero nada, para FF el 100% es el tamaño de la ventana. Alguien tiene una solucion a este problema. __________________ Salu2 KAYETANO

30-nov-2005, 12:49	#2 (permalink)
baccxus Fecha de Ingreso: mayo-2005 Ubicación: Panamá Mensajes: 750	Lo edito todo el post: Todo tu código se reduce a esto: Código: #tablaprincipal { position:relative; background-color:#FFFFFF; width:770px; margin: 0 auto; } #menu { width:100%; } #lateral { float:left; width:25%; } #contenido { float:left; width:75%; /margin-right: -1px;/Internet explorer / } #pie { clear: both; width:100%; } Por último, "heigth: 100%" se usa dentro de una división con tamaño previamente establecido. Tu HTML Código HTML: <body> <div id="tablaprincipal"> <div id="menu">...</div> <div id="lateral">...</div> <div id="contenido">...</div> <div id="pie">...</div></div> </body> Saludos, __________________ En la caja decía "Instalar Windows XP o superior", pues le instalé Ubuntu! In a world without frontiers, why you need Gates and Windows? Última edición por baccxus; 30-nov-2005 a las 13:18.

01-dic-2005, 02:39	#3 (permalink)
kayetano Fecha de Ingreso: marzo-2005 Mensajes: 72	Hola Gracias por tu respuesta, por lo visto el problema era el height:100% en "tablaprincipal", a sido quitarselo y todo ok. MUCHAS GRACIAS. Una duda, cuando pones Código: /margin-right: -1px;/Internet explorer / la primera barra "/" es una errata?? y esto que hace en IE ??, he probado a ponerlo y quitarlo y en IE no veo ningún cambio. __________________ Salu2 KAYETANO

01-dic-2005, 07:26	#4 (permalink)
baccxus Fecha de Ingreso: mayo-2005 Ubicación: Panamá Mensajes: 750	/ es solo para explorer, porque en este la división "contenido" hacia un salto de linea, entonces para evitarlo se lo puse, aparte de que lo probé en varios monitores a distintas resoluciones y en 2 de ellos me pasó el salto de linea. Saludos __________________ En la caja decía "Instalar Windows XP o superior", pues le instalé Ubuntu! In a world without frontiers, why you need Gates and Windows?

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado