Foros del Web » Creando para Internet » CSS »

Expandir capa a ambos lados

Estas en el tema de Expandir capa a ambos lados en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/07/2008, 19:04
Avatar de sk8
sk8
 
Fecha de Ingreso: enero-2008
Mensajes: 52
Antigüedad: 9 años, 10 meses
Puntos: 0
Expandir capa a ambos lados

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.
  #2 (permalink)  
Antiguo 30/07/2008, 03:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Expandir capa a ambos lados

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>
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 31/07/2008, 15:05
Avatar de sk8
sk8
 
Fecha de Ingreso: enero-2008
Mensajes: 52
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Expandir capa a ambos lados

Muchas gracias nuevamente. Esto era lo que queria.

Me estas ayudando mucho.

Un saludo.
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 23:33.