Duda con capas... seguro que es una chorrada

cokete · #1 (**permalink**) 16/10/2008, 09:06

Hola que tal, estoy empezando con esto de las css y estoy intentando maquetar una cosilla, me surje un problema que no tengo ni idea de por que es,

He creado una capa y dentro de esta he creado otra, dentro de la 2a capa quiero meter un texto pero no consigo hacerlo, la segunda capa me ocupa tan solo una pequeña parte de la primera capa pero al meter el texto no se me coloca dentro de la 2ª capa si no en la 1ª, ignorando la 2ª.

Este es el ejemplo grafico de como me queda, yo quiero que el texto este dentro de la capa que se ve en la esquina sup izq de la capa en la que está.

Mi codigo es este:

Código HTML:

<div id="apDiv1">
    <div id="Ficha1">El Club</div>
 </div>

Código HTML:

}
#apDiv1 {
	position:absolute;
	left:50%;
	top:120px;
	width:600px;
	height:70px;
	z-index:1;
	visibility: visible;
	overflow: visible;
	margin-left:-300px; /* la mitad de lo que mida de ancho */
}
#Ficha1 {
	width:82px;
	height:35px;
	z-index:2;
	font-family: Tahoma;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
}

Estoy seguro que es un error de principiante pero no consigo verlo, a ver si alguien me puede echar una mano, Gracias¡

DragonX · #2 (**permalink**) 16/10/2008, 09:13

a ver....probá con esto:

Cita:

#apDiv1 {
position:absolute;
left:50%;
top:120px;
width:600px;
height:70px;
z-index:1;
visibility: visible;
overflow: visible;
margin-left:-300px; /* la mitad de lo que mida de ancho */
}
#Ficha1 {
position:relative;
top:0;
left:0;
width:82px;
height:35px;
z-index:2;
font-family: Tahoma;
font-size: 12px;
text-align: center;
vertical-align: middle;
}

Espero te sirva

cokete · #3 (**permalink**) 16/10/2008, 09:25

Nada, ahora me queda de esta manera:

El texto sigue en el mismo sitio, y la capa ficha1 ahora parece que se ha hecho mas alta cuando la altura no ha cambiado....menudo jaleo, no me quiero imaginar cuando tenga que meter 3 o 4 capas dentro de 1 ...puede ser mortal jejeje.

A ver si alguien resuelve esto..un saludo¡¡

Mikmoro · #4 (**permalink**) 16/10/2008, 09:30

Yo al menos no entiendo qué es lo que quieres hacer.

cokete · #5 (**permalink**) 16/10/2008, 09:52

A ver si me explico mejor, tengo 1 capa grande, y dentro de esta quiero meter otra mas pequeña, que se situe en la esquina superior izq de esta, y dentro de esta capa mas pequeña quiero meter un texto... pero no lo consigo, es lo mas sencillo del mundo creo pero no lo consigo, el texto se me inserta en medio de la capa grande y nunca dentro de la pequeña.

En la imagen se ve una capa grande y una mas pequeña dentro de esta, en la esquina superior izquierda, con puntos suspendidos, yo quiero que el texto que pone "el club" este dentro de la capa pequeña, y no en la grande, el caso es que en el codigo tengo el texto metido en la capa pequeña:

<div id="apDiv1">
<div id="Ficha1">El Club</div>
</div>

Soy principiante con esto y seguro que es la mayor parida del mundo...

DragonX · #6 (**permalink**) 16/10/2008, 09:56

mira lo probé en FF3 y IE7 y anda perfectamente en los dos, probalo:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
#apDiv1 {
position:absolute;
left:50%;
top:120px;
width:600px;
height:70px;
z-index:1;
visibility: visible;
overflow: visible;
margin-left:-300px; /* la mitad de lo que mida de ancho */
border:1px solid #000;
}
#Ficha1 {
position:relative;
top:0;
left:0;
width:82px;
height:35px;
z-index:2;
font-family: Tahoma;
font-size: 12px;
text-align: center;
vertical-align: middle;
border:1px solid #f00;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="Ficha1">El Club</div>
</div>
</body>
</html>

cokete · #7 (**permalink**) 16/10/2008, 10:21

Si si, funciona perfectamente, el problema era que tenia estas dos capas dentro de otra capa sin especificar la position , en cuanto le he puesto relativa ha funcionado, sin position puesta en la capa que contenia a estas otras dos me hacia lo comentado anteriormente, lo dicho, error de no tener ni idea jejeje

Un Saludo y Gracias por la ayuda.

DragonX · #8 (**permalink**) 16/10/2008, 10:28

excelente!