Foros del Web » Creando para Internet » CSS »

Encajar imagen en DIV padre?

Estas en el tema de Encajar imagen en DIV padre? en el foro de CSS en Foros del Web. Buenas, Estoy haciendo una web, con el típico apartado de noticias, estructurado de la siguiente forma: <div #main> <div .noticia> <h1>titulo</h1> <p>Texto</p> </div> <div .noticia> ...
  #1 (permalink)  
Antiguo 17/11/2010, 11:59
 
Fecha de Ingreso: noviembre-2010
Mensajes: 113
Antigüedad: 7 años, 1 mes
Puntos: 10
Encajar imagen en DIV padre?

Buenas,
Estoy haciendo una web, con el típico apartado de noticias, estructurado de la siguiente forma:

<div #main>

<div .noticia>
<h1>titulo</h1>
<p>Texto</p>
</div>

<div .noticia>
<h1>titulo</h1>
<p>Texto</p>
</div>

...

</div>

Hasta aqui todo bien, el tamaño de bloque ".noticia" se ajusta al texto que contiene, pero el problema surge cuando inserto una imagen, ya que esta no se ajusta al bloque y pisa la siguiente notícia. Como lo hago para que el DIV .noticia se ajuste a su contenido, sea el que sea? Donde fallo?
GRACIAS!


Os adjunto un ejemplo del codigo HTML y CSS

Código HTML:
<div id="noticia">
<h1 class="noticia">
Titulo noticia
</h1>
<p class="noticia">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id diam vel dolor viverra volutpat.
Donec dui magna, viverra sit amet rhoncus at, imperdiet eget mauris. Aliquam eu est velit, dignissim laoreet tortor.
Donec tincidunt, ut bibendum rhoncus, odio tortor ultricies lorem, faucibus cursus metus lectus nec dolor.
In nibh odio, rhoncus nec ultricies sed, congue id dui. Sed quis laoreet neque. Donec elementum, nunc in convallis
pulvinar, mi velit bibendum lorem, ut auctor neque arcu at odio. Phasellus pharetra laoreet accumsan. Nulla eu sem tincidunt metus blandit accumsan. Nulla facilisi.
</p>
<p class="noticia">
<img src="http://stockimagesaustralia.com/wp/gallery/images/232/?750,500,,100,100,1398775372" alt="Imatge" />
Vivamus id diam vel dolor viverra volutpat.
Donec dui magna, viverra sit amet rhoncus at, imperdiet eget mauris. Aliquam eu est velit, dignissim laoreet tortor.
Donec tincidunt, felis ut bibendum rhoncus, odio tortor ultricies lorem, faucibus cursus metus lectus nec dolor.
In nibh odio, rhoncus nec ultricies sed, congue id dui. Sed quis laoreet neque. Donec elementum, nunc in convallis pulvinar, mi velit bibendum lorem, ut auctor neque arcu at odio. Phasellus pharetra laoreet accumsan. Nulla eu sem tincidunt metus blandit accumsan. Nulla facilisi.
</p>
</div> 
Código HTML:
body {
  background: black;
}
#noticia{
    border-bottom: 5px solid #fff;
    width: 90%;
    height:auto;
    margin: 5%;
    background-color:black;

}

p.noticia {
    color: #BDBDBD;
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    letter-spacing:0.1em;
    text-align:justify;
    line-height: 145%;
    font-size: 12pt;
}

h1.noticia {
    color: gray;
    font-family:  'Hoefler Text', Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 40px;
    letter-spacing: .2em;
    line-height: 1.1em;
    margin:0px;
    text-align: left;
    text-transform: uppercase;
}

.noticia img{
    margin:5px;
    float:right;
    width: 200px;
    display: block;

}
  #2 (permalink)  
Antiguo 18/11/2010, 01:58
 
Fecha de Ingreso: diciembre-2009
Mensajes: 53
Antigüedad: 8 años
Puntos: 4
Respuesta: Encajar imagen en DIV padre?

Prueba poniéndole un overflow: hidden a #noticia.
  #3 (permalink)  
Antiguo 18/11/2010, 03:25
 
Fecha de Ingreso: noviembre-2010
Mensajes: 113
Antigüedad: 7 años, 1 mes
Puntos: 10
Respuesta: Encajar imagen en DIV padre?

Gracias, lo probaré cuando llegue a casa.
Aunque, por lo que he leído, en algunos navegadores, la imagen se cortaría. Lo probaré de todos modos, gracias!
  #4 (permalink)  
Antiguo 18/11/2010, 08:58
 
Fecha de Ingreso: noviembre-2010
Mensajes: 113
Antigüedad: 7 años, 1 mes
Puntos: 10
Respuesta: Encajar imagen en DIV padre?

Vale, ya lo he probado y funciona perfecto con Chrome, Firefox y Explorer

GRACIAS!!!

...te daria karma de este pero no tengo... xD
  #5 (permalink)  
Antiguo 18/11/2010, 10:48
 
Fecha de Ingreso: diciembre-2009
Mensajes: 53
Antigüedad: 8 años
Puntos: 4
Respuesta: Encajar imagen en DIV padre?

Tranquilo! Me alegro de que te funcionase ;)

Etiquetas: encajar, padre
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 05:12.