Foros del Web » Creando para Internet » CSS »

Boton posicionado dentro de un div

Estas en el tema de Boton posicionado dentro de un div en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 10/04/2011, 13:39
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Boton posicionado dentro de un div

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.
  #2 (permalink)  
Antiguo 10/04/2011, 14:32
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Boton posicionado dentro de un div

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.
  #3 (permalink)  
Antiguo 10/04/2011, 14:34
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Boton posicionado dentro de un div

cambia a position: absolute también puedes usar fixed por si decides usar overflow:auto
  #4 (permalink)  
Antiguo 10/04/2011, 17:17
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Boton posicionado dentro de un div

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.
  #5 (permalink)  
Antiguo 10/04/2011, 17:31
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Boton posicionado dentro de un div

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.
  #6 (permalink)  
Antiguo 10/04/2011, 17:33
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Boton posicionado dentro de un div

Cita:
Iniciado por Ciel Ver Mensaje
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.
  #7 (permalink)  
Antiguo 11/04/2011, 06:14
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Boton posicionado dentro de un div

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>
  #8 (permalink)  
Antiguo 11/04/2011, 08:29
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Boton posicionado dentro de un div

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.
  #9 (permalink)  
Antiguo 11/04/2011, 08:49
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Boton posicionado dentro de un div

Cita:
Iniciado por cristian_cena Ver Mensaje
- 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 Ver Mensaje
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
  #10 (permalink)  
Antiguo 11/04/2011, 09:20
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Boton posicionado dentro de un div

Cita:
Iniciado por IsaBelM Ver Mensaje
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.

Etiquetas: Ninguno
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 08:12.