Boton posicionado dentro de un div

Ciel · #1 (**permalink**) 10/04/2011, 12:39

Hola a todos,

Tengo un inconveniente con algo que estoy armando... se trata de un div en el que va a ir una noticia dentro, y aparte le quiero agregar un boton de "Leer Mas" dentro de ese div, en la parte inferior izquierda... Les dejo un ejemplo en codigo:

Código:

<div class="notice">
<p>textoooooooooooo</p>
<a href="#" class="read-more">Leer Mas</a>
</div>

Y el CSS:

Código:

.notice {
    height: 250px;
    width: 250px;
    border: 1px solid black;
}

.read-more {
	position: relative;
	top: 150px;
	left: 15px;
}

Y ahi queda bien, sin embargo cuando le agrego mas texto al <p> el boton de Leer Mas se va para abajo... digamos que entiendo el porque pasa, ya que esta en position relative, pero no se me ocurre de que forma podria hacer para que no pase esto, a menos que use position absolute pero no me sirve en mi caso ya que tengo varios cuadros de noticias... aparte de que seguro se puede solucionar de una forma mas correcta.

Alguna solucion? Gracias de antemano.

Cualquier cosa si no se entiende el problema subo imagenes, pero creo que quedo bastante claro.

cristian_cena · #2 (**permalink**) 10/04/2011, 13:32

Hola Ciel

.notice { ... position:relative; ...}
.read-more {... position:absolute; display:block; ...}

Por las dudas aclaro que la posicion absoluta en una caja hará que esta se posicione tomando como referencia el eje de coordenadas 0,0 (esquina superior izquierda) de la caja relativa de su ancestro inmediato posicionado en relativo (en este ejemplo .notice) y si no encuentra ancestro relativo toma a <body> como referencia.

De este modo controlarás que tus links .read-more queden contenidos en las capas .notice

Ademas puedes usar display:block; para convertir el <a> en etiqueta de bloque y con ello poder trabajar cómodamente con las propiedades width y height.

No puedo profundizar más en la explicación ya que no tengo idea de como tienes tu diseño.
Si posteas una imagen de como lo tienes actualmente y a que quieres llegar te podría dar una respuesta mas precisa.

Saludos.

IsaBelM · #3 (**permalink**) 10/04/2011, 13:34

cambia a position: absolute también puedes usar fixed por si decides usar overflow:auto

cristian_cena · #4 (**permalink**) 10/04/2011, 16:17

IsaBelM, estimo que position fixed no le servirá, ya que tendrá un listado de noticias y la caja .read-more debería estar contenida por la caja .notice.
Además de que ¿porqué razon usaría una capa con position:fixed dentro de otra con overflow:auto?

Saludos.

Ciel · #5 (**permalink**) 10/04/2011, 16:31

Muchisimas gracias a los 2... no sabia que si padre tenia posicion relativa, al aplicarle posicion absoluta a hijo se tomaba como referencia al eje del padre y no del body. Me sirvio a la perfeccion.

cristian_cena · #6 (**permalink**) 10/04/2011, 16:33

Cita:

Iniciado por Ciel

no sabia que si padre tenia posicion relativa, al aplicarle posicion absoluta a hijo se tomaba como referencia al eje del padre y no del body.

Cosa que no sucede con position:fixed;

Me alegra que te haya servido, saludos.

IsaBelM · #7 (**permalink**) 11/04/2011, 05:14

un ejemplo para que entiendas a que me refería

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>
<meta content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
.notice {
height: 285px;
width: 250px;
border: 1px solid black;
}

.notice p {
overflow: auto;
height: 250px;
width: 250px;
margin-top: 35px;
}

.notice div {
position: fixed;
width: 250px;
background-color: yellow;
padding: 0 0 8px 0;
}

.notice div > a {
float: right;
padding: 7px 40px 0 0;

}
</style>
</head>

<body>
<div class="notice">
<div><a href="#">Leer Mas</a></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>

cristian_cena · #8 (**permalink**) 11/04/2011, 07:29

Hola isabel, he aprendido algo nuevo contigo,
- Ahora veo que puedes sacar una caja anidada del flujo de documento usando position:fixed; sin que se posicione de acuerdo a <body>.
- Noto que se posicionará siempre acorde al 0,0 de su caja ancestro, veo también que anda para ie6+.
- Eso si, donde pongas top-left-right-bottom a la caja fija dejará de funcionar pasando a depender del 0,0 de body. ¿como trabajas esto?
Yo hago esto usando un padre relativo y un hijo absoluto y dando top-left-right-bottom al hijo.

Un abrazo.

IsaBelM · #9 (**permalink**) 11/04/2011, 07:49

Cita:

Iniciado por cristian_cena

- Eso si, donde pongas top-left-right-bottom a la caja fija dejará de funcionar pasando a depender del 0,0 de body. ¿como trabajas esto?

la manera de hacerlo es aplicar margin. este margen se aplicará respecto al contenedor padre.

Cita:

Iniciado por cristian_cena

Yo hago esto usando un padre relativo y un hijo absoluto y dando top-left-right-bottom al hijo.

la manera en que lo haces, no la he probado, pero tiene bastante sentido

un saludo

cristian_cena · #10 (**permalink**) 11/04/2011, 08:20

Cita:

Iniciado por IsaBelM

la manera de hacerlo es aplicar margin.

Lo acabo de probar, y si, anda, aunque me llama la atención porque nunca había dado un margin a una capa fixed, se ve que al no usar top-left-bottom-right css permite que le asignemos margin.

Bueno, un gusto, hasta la próxima.