Ayuda con posicionar capas.

llnitoll · #1 (**permalink**) 20/08/2009, 00:41

Tengo un bloque donde hay una capa superior con el titulo y una capa al final con un fondo, y en medio una capa en la que hay 3 capas dentro, La primera es para poner un background a la izquierda, la segunda para poner el texto y la tercera para un background a la derecha.

El problema viene porque he de poner las 3 capas del medio una al lado de otra para que quede bien con el diseño, pero las capas con los backgrounds laterales no salen, solo salen con Position: absolute y salen por fuera. Tambien he probado con position:absolute en el box central pero nada, con floats, sin ellos nada...

He probado de todo, estoy mirandome la pagina de W3 school, pero no consigo nada.

<div class="block">

<div class="background_titulo"><div class="box_title">Titulo</div></div>

<div class="background_izquierda_box"></div>

<div class="box">

<div class="contenido">Texto</div>

</div>

<div class="background_derecha_box"></div>

<div class="background_final"></div>

</div>

Código:

.dbo
{
	background-image: url("fondo_titulo.png");
	background-repeat:no-repeat;
	width: 969px;
	height:33px; 
}

.background_izquierda_box
{
	
	position:relative;  
            float:left;
	height:100%;
	width: 5px;
	background-image: url("izquierda_box.png");
	background-repeat:repeat-y;	
}

.background_derecha_box
{
	position:relative;  
            float:right;
	width: 5px;
	height:100%;
	background-image: url("derecha_box");
	background-repeat:repeat-y;
}

.box    
{
	position:relative;    
	width:100%;
	border:0px;
	padding:0px;
	background-color: #f7f7f7;

}

.bbo
{
	background-image: url("fondo_final.png");
	background-repeat:no-repeat;
	width: 969px;
	height:10px; 
}

Gracias por el interes!

kseso? · #2 (**permalink**) 20/08/2009, 05:45

Hola llnitoll
¿buscas una estructura de tres columnas en el cuerpo central?
¿el '.background_izquierda_box' y el 'background_derecha_box' contendrán sólo las fotos o meterás algo más sobre ellas?
¿o las imágenes sólo son decorativas para flanquear el texto?

Como ves, no he comprendido lo que quieres hacer.
Si nos lo aclaras posiblemente surgirá alguna idea

Un saludo

llnitoll · #3 (**permalink**) 20/08/2009, 06:04

Si el cuepo central tendra tres columnas, como ves en el css las laterales solo tienen un grosor de 5px , son simplemente para poner una imagen de fondo para delimitar de forma grafica el contenido central.

Basicamente es poner 3 capas una al lado de la otra, pero siempre me acabo peleando con el css en esas cosas...

kseso? · #4 (**permalink**) 20/08/2009, 07:04

Bueno, pues siendo así, mira a ver si esto te sirve como inspiración.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>kseso? jugando con css</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
body {background: #fff;} 
#izquierda {background: transparent url(http://img508.imageshack.us/img508/5843/izquierda.jpg) repeat-y left 0;
width: 70%;
margin: 20px auto 0;
}
#centro { background: url(http://img508.imageshack.us/img508/3259/derecha.jpg) repeat-y right 0;
padding: 0 6px;}
p {margin: 10px 20px; text-align: justify;}
a {text-decoration: none; padding: 10px 0;}
a span.mas {display: none;}
a:focus, a:active {display: block;}
a:focus span.mas, a:active span.mas {display: block;color: #000;}
</style>
</head>
<body>
<div id="izquierda">
<div id="centro">
<p>Lorem ipsum dolor sit amet consectetuer Cras tempus semper est quam. Fusce quis nibh nunc leo interdum consectetuer condimentum nibh vestibulum magna. Magna Sed nunc sagittis lorem hac consequat euismod feugiat adipiscing Nulla. At Aenean ullamcorper Nunc auctor Phasellus pede felis Pellentesque pretium eros. Neque scelerisque dui metus Ut sit quis ligula Nulla Sed mollis. Auctor at ut orci nisl fringilla egestas Curabitur tristique consectetuer id. Enim et et nisl euismod ipsum Sed metus est Suspendisse ligula. Aliquam justo ac interdum interdum justo sem ac Pellentesque eros tempus. Eu sociis condimentum justo pede Aliquam pretium at non lacus Mauris. Sociis elit et leo Curabitur tellus elit tempus pharetra eu laoreet. Leo enim et Integer nec orci accumsan Vestibulum non sed pede. Lorem elit mi Sed auctor at sed diam Sed elit vitae. Tortor Pellentesque.</p>
<p>Molestie pellentesque arcu lacus pellentesque eu Morbi feugiat amet lacus urna. Sed Nullam amet at hac orci habitasse a et at.
<br />
<a href="#">Pulsar para que crezca el texto y los bordes laterales -->
<span class="mas">
Nunc auctor Phasellus pede felis Pellentesque pretium eros. Neque scelerisque dui metus Ut sit quis ligula Nulla Sed mollis. Auctor at ut orci nisl fringilla egestas Curabitur tristique consectetuer id. Enim et et nisl euismod ipsum Sed metus est Suspendisse ligula. Aliquam justo ac interdum interdum justo sem ac Pellentesque eros tempus. Eu sociis condimentum justo pede Aliquam pretium at non lacus Mauris. Sociis elit et leo Curabitur tellus elit tempus pharetra eu laoreet. Leo enim et Integer nec orci accumsan Vestibulum non sed pede.
</span>
</a>
</p>
</div>
</div>
</body>
</html>

Creditos: el texto que se expande de www.araudi.net (para que inventar la rueda otra vez?

)

Un saludo