Foros del Web » Creando para Internet » CSS »

mi DIV se corta y la imagen sigue

Estas en el tema de mi DIV se corta y la imagen sigue en el foro de CSS en Foros del Web. Buenas paso el link para una mejor explicada w w w . peruforless.com/bosquejo/packages/special2-explore-the-path-of-the-inca.php Si se dan cuenta la imagen de las ninas a la derecha ...
  #1 (permalink)  
Antiguo 04/10/2006, 20:04
 
Fecha de Ingreso: abril-2005
Mensajes: 247
Antigüedad: 12 años, 8 meses
Puntos: 1
mi DIV se corta y la imagen sigue

Buenas paso el link para una mejor explicada

w w w . peruforless.com/bosquejo/packages/special2-explore-the-path-of-the-inca.php


Si se dan cuenta la imagen de las ninas a la derecha sobrepasa cuando el texto que lo acompana es corto (si es largo nomal se acomoda) la caja marron es un div

#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
}

.bor-img-link {
border-style: solid;
border-width: 1px;
border-color: #fff;
float: right;
margin-left: 10px;
margin-top: 7px;
margin-bottom: 7px;
}

y aca va el htm

<div id="cajalink1"><img src="../images/img-special1.jpg" alt="Ninas en Cuzco" class="bor-img-link" />
<p>The Inca Trail gives hiking a whole new
meaning and you do not have to be
an expert in order to enjoy this journey
to the lost city. Many hikers consider
this trail to be the most beautiful
in the world. If you ever felt like
hiking in a heavenly place, this is
your chance and your final destination
- Machu Picchu – is not only breathtaking but awe inspiring.</p>
</div>

Donde la imagen tiene la clase .bor-img-link para el borde fino blanco, queria saber que codigo me falta para que el texto se acomode en caso que sea corto como esta url, osea que el fondo marron siga 7px mas abajo de la imagen.

gracias.
  #2 (permalink)  
Antiguo 05/10/2006, 10:31
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Agregale el height = 150px y te saldra bien tanto en IE como en FF, pruebalo y dinos.

Cita:
#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
height: 150px;
}
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #3 (permalink)  
Antiguo 06/10/2006, 15:16
 
Fecha de Ingreso: abril-2005
Mensajes: 247
Antigüedad: 12 años, 8 meses
Puntos: 1
aun sigue

hola man gracias pror esponderme recien entro ver el mensaje jutos eso tb hice lo de poner una altura pero solo hace efecto en IE pero en Firefox se sigue cortando.

#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
height: 150px;
}

.bor-img-link {
border-style: solid;
border-width: 1px;
border-color: #fff;
float: right;
margin-left: 10px;
margin-top: 7px;
margin-bottom: 7px;
}

---------------------

<div id="cajalink1"><img src="../images/img-special1.jpg" alt="Ninas en Cuzco" class="bor-img-link" /><p>puro texto.</p></div>

Alli te mando el ejemplo

w w w . peruforless.com/bosquejo/packages/special1-heart-of-the-inca.php

en IE se ve bien pero en Firefox no, si nos damos cuenta abajo el texto de la caja se escapa.

Gracias nuevamente man.
  #4 (permalink)  
Antiguo 07/10/2006, 00:24
 
Fecha de Ingreso: abril-2005
Mensajes: 247
Antigüedad: 12 años, 8 meses
Puntos: 1
Nose olviden de mi, gracias
  #5 (permalink)  
Antiguo 08/10/2006, 22:51
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola angelseron, no veo la diferencia ¿has hecho los cambios? o quizás es que no se donde está el error
  #6 (permalink)  
Antiguo 09/10/2006, 22:01
 
Fecha de Ingreso: abril-2005
Mensajes: 247
Antigüedad: 12 años, 8 meses
Puntos: 1
Hola man gracias por repsonder, claro aumente el height: 150px; en al siguiente #cajalink1 { , funciona en IE pero en Firefox nada, te muestro el link w w w . peruforless.com/bosquejo/packages/special1-heart-of-the-inca.php, como veras en Firefox la parte de la caja derecha donde esta la imagen de las niñas, el texto de su costado se desborda, pero la idea noes poner una altura grande, porque hay textos en otras paginas de mi web donde es mas corto el texto entonces el height con altura en eso casos se veria muy alto, espero me puedan ayudar.

gracias.
  #7 (permalink)  
Antiguo 10/10/2006, 07:52
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola de nuevo angelseron.

Ahora si lo he visto , y creo que podrias arreglarlo de dos maneras dependiendo de lo que quieras hacer.

Si por ahora solo quieres arreglar ese desbordamiento para ese contenido en concreto metiendo solo un desbordamiento automatico (overflow:auto) en tu css te irá bien. Como verás tampoco hace falta darle altura.

Código:
#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
overflow:auto;
}
Luego si más adelante vas a modificar ese contenido, te podria dar problemas en Iexplorer al ser el texto más pequeño que la imagen, siendo ahora esta la que desbordaria y se quedaria fuera, y entonces tendrias que darle una altura para que Iexplorer la coja, como por ejemplo así:

Código:
#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
overflow:auto;
}
* html #cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
height:200px;
}
Pero por ahora este segundo ejemplo no te hace falta, con el primero te irá bien

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 00:09.