Div hijo deforma div padre agrandandolo al tener palabras muy largas.

Citar

Escrito el 11 Mar 2012 09:45 pm

Buenas, cuando creí que todo andaba perfecto y había terminado mi trabajo me encontré con que algunos "post" del blog que estoy diseñando usaban esta forma para separar texto:

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
(Una linea continua de signos "-" )

Esta linea deforma todo mi diseño, prové con overflow:hidden y con word-wrap: break-word; pero nada...
El div que contiene el texto tiene un ancho de 100% igual que toda la web, pero no entiendo por que fuerza a crecer a los divs superiores. Segun tengo entendido este texto deberia acomodarse a las propiedades de los divs superiores y no al revez. ¿Que esta pasando, como puedo solucionarlo?
¿Como puedo obligar a un div a no crecer más de lo que sus divs padres son? (teniendo en cuenta que todos los anchos se trabajan en porcentaje.

Saludos! y gracias de ante mano!

Por JaLeRu

Claber

1913 de clabLevel

7 tutoriales

Genero:Masculino

Envíale un mensaje privado Email Web

Existo

@JaLeRu

Citar

Escrito el 12 Mar 2012 11:52 am

hay alguna forma de visualizarlo? o en sudefecto código, capturas etc...

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 12 Mar 2012 11:49 pm

Es esto:

<div id=contenedor>
<div id=div-odioso>
Aqui un texto muy largo
</div>
</div>

#contenedor tiene width:100% por lo tanto siempre toma el tamaño de la pantalla.
#div-odioso tambien tiene width 100% por lo que deberia ser siempre del mismo tamaño que su contenedor.
Pero por alguna horrible razon, si el texto que contiene el #div-odioso es muy largo obliga a #contenedor a aumentar su tamaño. (Por lo tanto ya no usa el 100% de la pagina, si no que un poco más quedando un scroll horizontal)

Por JaLeRu

Claber

1913 de clabLevel

7 tutoriales

Genero:Masculino

Envíale un mensaje privado Email Web

Existo

@JaLeRu

Citar

Escrito el 13 Mar 2012 03:22 pm

Pregunta: el texto que se desborda de #div-odioso ¿quieres que cree una nueva línea abajo o no te molesta que no sea visible con tal que #contenedor no se deforme?.

Si es lo segundo, a #div-odioso ponle overflow: hidden;

Si es lo segundo tendrás que cortar el texto insertando un <br /> mediante JavaScript o tal vez del lado del servidor.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 13 Mar 2012 05:21 pm

bien.... si usamos tal cual pones el códigono hay ningún problema.... ya que de forma automática se encuandra.

el problema surje cuando existe margin o padding, ya que que estos entre padre e hijo no se respetan... ya que se toman como referencia el lado izquierdo desbordandose por el derecho.

una solución sería no ponerlos margin/padding...

pero claro si quieres formatear... has de hacerlo de forma lógica... por ejemplo usando <p>

de esta manera:

Código HTML :


<style>
#contenedor{
   border:solid 1px red;
   width:100%;

}
#div-odioso{
   border:solid 1px red;
   width:100%;
}
p{
   padding:50px;
}
</style>
   </head><body ">

<div id=contenedor>
     <div id=div-odioso>
          <p>
               Al contra../  /...ea en la sección 1.10.32
          <p>
     </div>
</div>

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 13 Mar 2012 05:29 pm

...bueno igual que pongo <p> puede ser un <div>o usar itra forma "más moderna" .....(más que nada por los que replican).

...o si el "odioso" hace esa función eliminar el 100%, ya que asi de este modo se ajusta de forma auto... al100% restando los margin/padding.

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 13 Mar 2012 05:55 pm

Aquí un ejemplo del problema de diseño:
http://desarrollo.eldinamo.info/2012/02/17/los-usuarios-de-wemul-recomiendan-locales-en-penaflor/
(la idea es visitar desde un movil, pero igual funciona desde el navegador de tu pc)
Desde el navegador si achican la ventana podrán notar el problema. El Diseño se deforma pues en vez de ajustarse al tamaño de pantalla se ajusta a la cantidad de texto que tiene dentro, lo que esta destruyendo todo el diseño es esa linea ridícula de separación:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ahora queda mas claro?

Muchas gracias por los comentarios!

Por JaLeRu

Claber

1913 de clabLevel

7 tutoriales

Genero:Masculino

Envíale un mensaje privado Email Web

Existo

@JaLeRu

Citar

Escrito el 13 Mar 2012 06:09 pm

a ver... si los divs no les pones ninguna cortapisa es decir los dejas sin definir se ajustan de forma predeterminada al 100% de la pantalla.... es decir siempre.

bien, lo de la linea.... si puedes cambiarlo... sustituyela poir una tag muy antigua ...que sigue en funcionamiento es la de <hr> esta te trazará una linea por el ancho predeterninado al 100%, salvo que indiques un tamaño width.

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 13 Mar 2012 07:14 pm

Si es para movil recuerda que tienes que usar los media query para formatear tu sitio para que en los navegadores moviles se lea de diferente forma.

Tambien puedes usar el meta "Viewport" para formatear algunas cosas.

igual yo estoy peleando con un sitio que se ve diferente a lo que el cliente quiere en su movil.... y es un dolor de cabeza...

Por kasumaru

4 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 15 Mar 2012 06:20 pm

Um, es que no puedo cambiar esa linea. Como te explico, yo no manejo el contenido de la web...solo hago el diseño. Por lo tanto no puedo ir y borrar esa linea. OK de todos modos muchas gracias por la ayuda.

Por JaLeRu

Claber

1913 de clabLevel

7 tutoriales

Genero:Masculino

Envíale un mensaje privado Email Web

Existo

@JaLeRu

Div hijo deforma div padre agrandandolo al tener palabras muy largas.

Escribe una respuesta rapida