Foros del Web » Creando para Internet » CSS »

Problema con contenido en 3 columnas

Estas en el tema de Problema con contenido en 3 columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/06/2005, 18:24
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Problema con contenido en 3 columnas

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?
  #2 (permalink)  
Antiguo 15/06/2005, 02:09
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
si le das un padding o borde a #contenido se soluciona. la razon:

http://www.complexspiral.com/publica...psing-margins/
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 15/06/2005, 11:29
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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?
  #4 (permalink)  
Antiguo 15/06/2005, 12:03
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
creo que eso tiene que ver con como estas posicionando tu pie...
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #5 (permalink)  
Antiguo 15/06/2005, 12:12
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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?
  #6 (permalink)  
Antiguo 15/06/2005, 22:00
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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;
            
padding0;}
    
#cabecero{
            
height:100px;
            
padding0;
            
margin-bottom0;
            
background-color:#009966;}
    #menu{
            
floatleft;
            
width150px;
            
width150px;
            
width150px;
            
margin0;
            
margin-right0;
            
padding0;
            
background-color:#006666;
}
#contenido{
            
padding1px;
            
margin-left150px;
            
margin-right135px;
            
background-color:#669900;
    
}
#lateralderecho{
            
floatright;
            
width135px;
            
width135px;
            
width135px;
            
margin0;
            
margin-left0;
            
padding0;
            
background-color:#FFFF99;
}
#pie{ width:100%;        
    
clearboth;
            
padding0;
            
margin-top0;
            
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    UrbanizLos 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 luminosototalmente amuebladoestilo rústico
        
con zonas verdesparking y piscina comunitariamuy 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 ...
  #7 (permalink)  
Antiguo 16/06/2005, 02:01
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
hm, si. ese es un experimento no terminado. creo que no funciona muy bien si el contenido sobrepasa una pantalla...
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:01.