Expandir capa a ambos lados

sk8 · #1 (**permalink**) 29/07/2008, 18:04

Hola a todos.

Me ocurre lo siguiente:

Tengo una capa contenedor de altura 90 px contorneada. Quiero crear dentro otra capa para poner el texo de tal forma que queda en la parte inferior alineado en el centro que y se siga viendo el contorno que no este ocupado por el texto.

Una imagen vale mas que mil palabras. Este es el resultado deseado.

Para ello e creado una clase que incluire dentro del contenedor de 90 px con un top de 85 para que queda a la altura deseada. Bien el problema viene ahora. Quiero que esta este centrada y que ocupe justo lo necesario. Por tanto le pongo un width="auto".
Y para centrarla respecto al contenedor left:50%. Ahora lo que me gustaria es que se vaya creciendo la capa en ambas direcciones para que se respete la posición centrada.

Código:

.individual
	{
	top:85px;
	left:50%;
	position:absolute;
	width:auto;
	margin-top:0px;
	padding-bottom: 4px;
	z-index:3;
	}

Probablemente este utilizando un camino equivocado, largo o complejo. Si es así indicarmelo y lo hago de otra forma. Y en caso de ser la forma correcta como concluyo con exito esta situación.

Saludos y Gracias.

Mikmoro · #2 (**permalink**) 30/07/2008, 02:08

Mira, yo lo haría así: una caja dentro de la principal, colocada con bottom y con el texto centrado dentro de ella y el fondo transparente. Dentro un bloque de texto con fondo blanco.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>sk8</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0;}
#contenedor {position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
border: solid 5px #ccc;
}
.individual {
bottom: -10px;
position:absolute;
width:100%;
background: transparent;
text-align: center;
}
.texto {background-color: #fff;padding: 0 6px;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="individual"><span class="texto">texto centrado</span></div>
</div>
</body>
</html>

sk8 · #3 (**permalink**) 31/07/2008, 14:05

Muchas gracias nuevamente. Esto era lo que queria.

Me estas ayudando mucho.

Un saludo.