Foros del Web » Creando para Internet » CSS »

problema con contenido e imagen

Estas en el tema de problema con contenido e imagen en el foro de CSS en Foros del Web. Hola nuevamente al foro y antes que nada agradecer mucho por la ayuda no sé qué haría si no existiera...renunciar noooooo El tema es que ...
  #1 (permalink)  
Antiguo 21/11/2010, 14:43
 
Fecha de Ingreso: junio-2010
Mensajes: 183
Antigüedad: 7 años, 5 meses
Puntos: 1
problema con contenido e imagen

Hola nuevamente al foro y antes que nada agradecer mucho por la ayuda no sé qué haría si no existiera...renunciar noooooo


El tema es que estoy haciendo esta web; la imagen de la foto la parte de abajo
y el degradado vertical que hace como espacio entre los dos bloques se sale por debajo o es que la foto no logra bajar del todo y si le pongo fondo blanco al div sobresale una parte blanca debajo


este es el codigo

Cita:
<!-- CONTENIDO-->






<div id="contenido" class="limpiar">
<div id="jofret">
<div id="izquierda">

<h1 class="bienvenida"><span class="titulo">Bienvenidos</span></h1>
<p class=bienvenida>Unimax Peru S.A. les da la bienvenida a nuestra página web. Aquí les presentamos el perfil de nuestra compañia y nuestros productos esperando que les sirva de ayuda y puedan encontar los requerimientos que soliciten. Esperamos que se pongan en contacto con nosotros. Inmediatamente responderemos sus inquietudes.
Contáctenos <a class="contactenosaqui" href="#">aquí</a>.
<span class="gerente"><strong>Unimax Perú S.A.</strong></span><span class="bloque">La Gerencia</span></p>



</div>
</div><!--final de backgroundleft-->
<div id="derecha">
<div id="contenidoderecha">
<p id="foto"><img src="http://grapsaco.com/jofret/imagenescabecera/fotoportada.jpg" width="662" height= "417" />
</p>
</div>




</div>


</div><!--cierre de contenido-->

estilos:
Cita:
/*AQUI CONTENIDO*/



div#jofret{
background:white;
width:230px;
border-right:2px solid #640077;
float:left;
}

div#izquierda{
background:#FFF repeat-x left top;


}

h1.bienvenida{
margin-top:20px;
background:#8F8166;
line-height:50px;
border-bottom:1px solid #666;
color:white;
padding:0 20px 0 60px;
font-size:22px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style:italic;
}

p.bienvenida{
background:url(../images/degradeparrafo.png) repeat-y top center;
margin:0px 0 5px 0 3px;
padding:15px 18px 39px 20px;
font-family: Georgia;
color: #444;
text-decoration: none;
word-spacing: normal;
letter-spacing: 0;
line-height: 1.2em;
font-size:0.7em;
text-align:center;
line-height:20px}


span.gerente{
display:block;
margin-top:20px;
line-height:14px;
}


span.bloque{
display:block;}

a.contactenosaqui{
color:#F00;
text-decoration:underline;}

a:hover.contactenosaqui{
color:#6CF;
text-decoration:none;}



/*HASTA AQUI DIV IZQUIERDA*/




/*DIV Foto*/

div#derecha{
float:left;/* background:#FFF;*/

}

div#contenidoderecha{
background: url(../images/degradadovertical.png) repeat-y left top;
padding-left:5px;
}


p#foto{ padding-bottom:0px;
}






/*******footer*************/

esto pasa cuando alejo la imagen en el navegador






otra cosa el div que es div#contenidoderecha de la foto esta en otro div dentro de div#derecha que es el div que tiene el float left bueno a la foto la meti dentro de un <p> para darle text-align:right pero no me funcionó solamente me funciona si le quito a div#derecha el float left.?
Bueno espero haya alguien con paciencia por ahi¿
  #2 (permalink)  
Antiguo 21/11/2010, 15:25
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: problema con contenido e imagen

Hola

El problema es sencillo, la sidebar, sobresale un poco más que la div de la imagen.

SOLUCIÓN 1: Un div que contenga ambos, tanto la sidebar como el div de la imagen han de tener height:100%;

SOLUCIÓN 2: Aplicar un padding-bottom al div de la imagen, de este modo alargas el div solo por la parte inferior.


Por cierto, las imágenes del final no se ven, usa un servidor como JackImages.tk


Saludos, alguna duda, comenta
  #3 (permalink)  
Antiguo 21/11/2010, 15:33
 
Fecha de Ingreso: junio-2010
Mensajes: 183
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: problema con contenido e imagen

ok
Paero la imagen y el degradado oscuro estan en el mismo div derecho

subire las imagenes nuevamente
  #4 (permalink)  
Antiguo 21/11/2010, 15:39
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: problema con contenido e imagen

Se me ocurre una nueva solución:

La imagen añade: Margin-top:Xpx cuantos sean necesarios:

<img src="http://grapsaco.com/jofret/imagenescabecera/fotoportada.jpg" width="662" height= "417" style="margin-top:00px" />

Si eso no te funciona, en la línea de css añade esto:

div#contenidoderecha{
background: url(../images/degradadovertical.png) repeat-y left top;
padding-left:5px;
padding-bottom:0px;
margin-bottom:0px;
}


Saludos
  #5 (permalink)  
Antiguo 22/11/2010, 16:29
 
Fecha de Ingreso: junio-2010
Mensajes: 183
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: problema con contenido e imagen

Hola en contre la solucion pero no fue para nada satisfactoria
Tal vez alguien me pueda dar una mano:

en el div#contenidoderecha puse el estilo:
background: url(../images/degradadovertical.png) repeat-y left top;

pero al poner este estilo sobresale una punta hacia abajo que desalinea a la fotoy me deja un espacio feo (la pueden ver en la primera foto parte baja de la foto) .
Bueno la solución por la que tuve que optar fue quitar finalmente el degradado vertical y ponerle un border de 2 px solido negro.
Alguien me puede decir que es lo que esta mal porque sale esa punta primera vez que me pasa. Anteriormente había hecho el efecto sin problema ahora no se que pasa por mas que intento no lo pude arreglar

Etiquetas: contenido
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 04:13.