Problema con contenido en 3 columnas

kahlito · #1 (**permalink**) 14/06/2005, 17:24

Buenas.

Estoy haciendo un diseño con un cabecero, tres columnas (izquierda, centro-contenido y derecha) y un pie de página. Todo bién hasta que al meterle en la zona del contenido unos parrafos me deplaza hacia arriba las capas de izquierda y derecha y a su vez el encabezado viene hacia abajo

, todo eso en Firefox y Opera.

Aquí dejo las muestras la primera sin meter los <p></p>

Sin parrafos

Y la segunda con los parrafos <p></p>, que como verán hace que se desplacen las capas.

Con parrafos

El código es el siguiente:

Código HTML:

<style type="text/css">
body{margin:0px;
padding:0px;
}
#cabecero{position:absolute;
left:0px;
background-color:#999900;
width:100%;
height:100px;}
#menu{position:absolute;
left:0px;
top:100px;
width:150px;
background-color:#006666;
}
#contenido{
	position:relative;
	top:100px;
	background:#666;
	margin-left: 149px;
	margin-right:129px;
	voice-family: "\"}\"";
	voice-family: inherit;
	margin-left: 151px;
	margin-right:131px;
	}
html>body #contenido {
margin-left: 151px;
margin-right:131px;
	}
	#lateralderecho{
position:absolute;
right:0px;
top:100px;
width:130px;
background-color:#ccc;
}
#pie{position:absolute;
bottom:0px;
width:100%;
background-color:#FFCC66;}
</style>
</head>
<body>
	<div id="cabecero">
		Cabecero
	</div>

	<div id="menu">
		<ul>
		<li>Apartamentos</li>
		<li>Pisos</li>
		<li>Estudios</li>
		<li>Adosados</li>
		<li>Casas</li>

		<li>Chalets</li>
		<li>Parcelas</li>
		</ul>
	</div>
	<div id="contenido">
		<p>Apartamento</p>
		<p>Localización	Urbaniz. Los Alamos</p>

		<p>Superficie	80 m2</p>
		<p>Dormitorios	3</p>
		<p>Baños	1</p>
		<p>Aseos	</p>
		<p>Patios</p>	
		<p>Garaje	comunitario</p>

		<p>Precio	150,00 €</p>
		</p>Características	Apartamento muy luminoso, totalmente amueblado, estilo rústico, 
		con zonas verdes, parking y piscina comunitaria, muy buena comunicación.
		Cercano al Parque comercial "Las Marismas"</p><img src="fotos/prueba1.jpg" />
	</div>
	<div id="lateralderecho">1
	</div>
	<div id="pie">Pie
	</div>
</body>

¿Estoy haciendo algo mal?

kemie · #2 (**permalink**) 15/06/2005, 01:09

si le das un padding o borde a #contenido se soluciona. la razon:

http://www.complexspiral.com/publica...psing-margins/

kahlito · #3 (**permalink**) 15/06/2005, 10:29

Hola kemie, la verdad es que me ha servido tu explicación y el arreglo, muchas gracias

Sin embargo ahora veo otros dos problemas

Ahora en Iexplorer el contenido de abajo no aparece, es decir que se cortan los dos o tres ultimos reglones y no se ven.

Por otro lado el pie de página se queda flotando por su cuenta y no baja hacia su posión bottom 0

Ejemplo

¿Sigue siendo error del contenido?

kemie · #4 (**permalink**) 15/06/2005, 11:03

creo que eso tiene que ver con como estas posicionando tu pie...

kahlito · #5 (**permalink**) 15/06/2005, 11:12

Bueno intentaré posicionar el pie de otra manera, sin embargo fijate que aún quitándolo en Iexplorer siguen sin aparacer las ultimas lineas...

Problema en Iexplorer

La ultima linea dice "Estas ultimas palabras no salen en Iexplore" y en Mozilla y Opera si salen

¿Quizás debo de fijarle una altura determinada?

kahlito · #6 (**permalink**) 15/06/2005, 21:00

Hola de nuevo, vuelvo a la carga.

Al final he decidido ir haciéndolo todo de nuevo, cambiando casi todo de nuevo en el css.

Código PHP:

  <style type="text/css"> 
            body{ 
            margin:0; 
            padding:0; 
            } 
    #todo{    margin: 0; 
            padding: 0;} 
    #cabecero{ 
            height:100px; 
            padding: 0; 
            margin-bottom: 0; 
            background-color:#009966;} 
    #menu{ 
            float: left; 
            width: 150px; 
            width: 150px; 
            width: 150px; 
            margin: 0; 
            margin-right: 0; 
            padding: 0; 
            background-color:#006666; 
} 
#contenido{ 
            padding: 1px; 
            margin-left: 150px; 
            margin-right: 135px; 
            background-color:#669900; 
    } 
#lateralderecho{ 
            float: right; 
            width: 135px; 
            width: 135px; 
            width: 135px; 
            margin: 0; 
            margin-left: 0; 
            padding: 0; 
            background-color:#FFFF99; 
} 
#pie{ width:100%;         
    clear: both; 
            padding: 0; 
            margin-top: 0; 
            background-color:#99CCFF;} 
</style> 
</head> 
<body> 
<div id="todo"> 
    <div id="cabecero"> 
    Cabecero    </div> 
    <div id="lateralderecho">Derecha 
    </div> 
    <div id="menu"> 
        <ul> 
        <li>Apartamentos</li> 
        <li>Pisos</li> 
        <li>Estudios</li> 
        <li>Adosados</li> 
        <li>Casas</li> 
        <li>Chalets</li> 
        <li>Parcelas</li> 
        </ul> 
    </div> 
    <div id="contenido"> 
        <p>Apartamento</p> 
        <p>Localización    Urbaniz. Los Alamos</p> 
        <p>Superficie    80 m2</p> 
        <p>Dormitorios    3</p> 
        <p>Baños    1</p> 
        <p>Aseos    </p> 
        <p>Patios</p>     
        <p>Garaje    comunitario</p> 
        <p>Precio    150,00 €</p> 
        </p>Características    Apartamento muy luminoso, totalmente amueblado, estilo rústico,  
        con zonas verdes, parking y piscina comunitaria, muy buena comunicación. 
        Cercano al Parque comercial "Las Marismas"</p><img src="fotos/prueba1.jpg" />asdfasd<br /> 
AsdfasdfaS<br /> 
DFasdfA<br /> 
SDfas 
DFas 
<p>dFAsd</p> 
f 
    </div> 
     
    <div id="pie">Pie 
    </div> 
</div>

Sin embargo el pie de página se adapta a todo segun se estira el resto, aunque me gustaria quedase siempre al final del todo, por si acaso ahí lo dejo por si hay otra posible alternativa.

Ejemplo

Saludosss

P.D: kemie investigando sobre el tema he encontrado y probado con un ejemplo que tenias en tu web:

http://disenorama.com/headerfooter_cols.htm

Y la verdad es que en Ieplorer y Opera 8.0 se va hacia arriba unos 40px ese pie. Para Iexplorer he probado con esto y me funciona:

Código PHP:

  #footer{ 
    position:absolute; 
    bottom:0; 
    background-color:#EFEFEF; 
    width:100%; 
    height:40px; 
} 
* html #footer{ 
bottom:-40px;}

Sin embargo para Opera no le he encontrado la solución ...

kemie · #7 (**permalink**) 16/06/2005, 01:01

hm, si. ese es un experimento no terminado. creo que no funciona muy bien si el contenido sobrepasa una pantalla...