ayuda - se sale [BOX]

Hola amigos de foro cristalab, pues hoy le vengo a pedir de su ayuda , lo que sucede esque me arme un sistema de comentarios todo y diseño.

el problema esque si escribo:

adsfadfadfa
adsfadfadfa
adsfadfadfa
adsfadfadfa

se sale del box, y desordena los demas comentarios. ese es mi problema, espero que tenga solucion, me suicido si no anda !!
imagen:


ok, ya lo vieron, ahora si todo los coments tiene una linea algo como:
adfdfsfsd

pero si coloco 1 un párrafo con 10 lineas ejemplo, tambien se sale

imagen de como esta todo sin salida del box:



espero que tenga solucion, porque me estoy desesperando, ya probe de todo, ayudenme porfavor, se los agradesco, espero sus respuesta y ayuda saludos.

Muéstranos los estilos del contenedor de los textos incluidos los in-line. El problema va a estar en que no tienes bien limitadas sus medidas o bien configurados los overflows. Muéstranos el código que te comento y te ayudamos a encontrar el error.

Un saludo.

Código :

#lista-comentarios {
    display: block;
    margin-top: 20px;
    padding: 0 18px;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios li {
    border-top: 1px solid #EEEEEE;
    padding: 12px 5px 19px;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios li.autor {
    background: none repeat scroll 0 0 #FAFDFE;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios li.destacado {
    background: none repeat scroll 0 0 #FFF8EA;
    border-top-color: #FFE09F;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios li .avatar {
    display: block;
    float: left;
}
#lista-comentarios ul#contenedor-comentarios li .avatar img {
    box-shadow: 0 1px 2px #333333;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario {
    display: block;
    float: left;
    margin-left: 12px;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap {
    display: block;
   height:auto;
    width: 655px;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap h4 {
    color: #C8C8C8;
    display: block;
    margin-top: 1px;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap h4 a {
    font-size: 14px;
    text-decoration: none;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap h4 a:hover {
    text-decoration: underline;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap h4 small {
    background: url("/temas/default/images/fecha_min.png") no-repeat scroll right center transparent;
    color: #DFDFDF;
    float: right;
    font-size: 11px;
    font-weight: lighter;
    padding-right: 17px;
}
#lista-comentarios ul#contenedor-comentarios li:hover .cont_comentario .wrap h4 small {
    color: #999999;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap .msj {
    font-size: 13px;
    margin-top: 3px;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios .no-comentarios {
    border: 3px dashed #D1D8DE;
    color: #C8C8C8;
    font-size: 18px;
    padding: 12px;
    text-align: center;
}

codigo html - php para mostrar

Código PHP :

 <div>

  <div id="lista-comentarios">
<div style="margin-bottom:15px;">
<ul id="contenedor-comentarios">
 <li class="autor" id="comentario-<?php echo $c;?>">
<a name="comentario-<?php echo $c;?>"></a>
<div class="avatar">
<img src="http://www.wakaala.com/imagen.php?w=52&amp;h=52&amp;img=avatares/wk_img613327_806378_8825.png&amp;c=1" alt="">
</div>
<div class="cont_comentario">
<div class="wrap">
<h4><a href="#"><?php echo $row[2] ?></a> dijo <small>#<?php echo $c;?> @ <?php echo $row[5]?></small><div class="limp"></div></h4>
<div class="msj">
<?php echo censura(BBparse($row[6])); ?></div>
</div><!--wrap-->
</div>
<div class="limp"></div>
</li><!--COMENTARIO-->
</ul>
</div>
 </div>
 </div>
 <br>

espero que se solucione gracias.

Ok, El primer div que tienes declarado "<div>" que clases tiene o hereda?, si me dices la url donde pueda ver un ejemplo, mejor que mejor, así también puedo revisar el contenedor de esos divs.

ese div no sirve, perdon, pero lo puse por joder, y demo no puedo, estoy en localhost, y bueno quiero dar una sorpresa con el mi script, solo se debe de arreglar ese error :E.

Prueba agregando esta clase:

Código :

#lista-comentarios div {float: left}

Y coméntame el resultado please.

Un saludo

ok voy a ver

Si ahora si, se agranda cuando agregar el texto con enter,

pero ahora tira esto:



espero que me ayudes, gracias maestro, almenos ya anda los espacios

No veo que le pasa ahora, explícame please.

ahora se sale de contenedor web lo de blanco, se pasa, y se sale los comentarios demas.

debe de estar dentro del contenedor web

Incorpora

Código :

overflow: scroll;

a la clase

Código :

#lista-comentarios {
    display: block;
    margin-top: 20px;
    padding: 0 18px;
   height:auto;
}

Coméntame el resultado please.

y cámbiale

Código :

height: auto

por la medida en pixels exacta, por ejemplo

Código :

height: 360px;

gracias maestro, funciona, ya no se sale del contenedor, pero ahora aparcen scroll, y no lo quiero , espero que haya una solucion img:



Muchas gracias por tu ayuda

cambia

Código :

overflow: sroll;

por

Código :

overflow: hidden;

Un saludo

SIMPLE Y SINCERAMENTE, TOTALMENTE GRACIAS!!!, Usted es un profesional, Gracias por su ayuda. Saludos.

Algo estamos haciendo mal, por que el scroll te está saliendo en todas las casillas y no en su contenedor que es donde debería salir. Si quieres pégame una muestra del trozo de html donde esta toda la conversación con su contenedor incluido y lo arreglamos.

No hay problema, ahora ya no muestra nada del scroll, aparace si eso, ahora solo aparece el box . no se si esta bien, sino, corrigeme. porfavor.

Captura que si funciona:

El que tiene que saber si está bien eres tú, que sabes como quieres que se vea.
Vuelve a hacer pruebas de muchas lineas y de textos largos y si ves algo raro o que te falla nos comentas.

Pero yo creo que algo de lo que te he dicho va a estar mal y creo que es el overflow, me da a mi que va colocado en otra clase, pero bueno, ya nos comentas si ves algo.

Un saludo.

ok te paso el html-php que hace que muestre el comentario, ya que me quiero asegurar de no tener problemas futuros.

Código PHP :

<div>

  <div id="lista-comentarios">
<div style="margin-bottom:15px;">
<ul id="contenedor-comentarios">
 <li class="autor" id="comentario-<?php echo $c;?>">
<a name="comentario-<?php echo $c;?>"></a>
<div class="avatar">
<img src="http://www.wakaala.com/imagen.php?w=52&amp;h=52&amp;img=avatares/wk_img613327_806378_8825.png&amp;c=1" alt="">
</div>
<div class="cont_comentario">
<div class="wrap">
<h4><a href="#"><?php echo $row[2] ?></a> dijo: <small>#<?php echo $c;?> @ <?php echo $row[5]?></small><div class="limp"></div></h4>
<div class="msj">
<?php echo censura(BBparse($row[6])); ?></div>
</div><!--wrap-->
</div>
</li><!--COMENTARIO-->
</ul>
</div>
 </div>
 </div>

y el css:

Código :

#lista-comentarios div {float: left}
#lista-comentarios {
    display: block;
    margin-top: 20px;
    padding: 0 18px;
   overflow: hidden;
}
#lista-comentarios ul#contenedor-comentarios li {
    border-top: 1px solid #EEEEEE;
    padding: 12px 5px 19px;
   
}
#lista-comentarios ul#contenedor-comentarios li.autor {
    background: none repeat scroll 0 0 #FAFDFE;
   
}
#lista-comentarios ul#contenedor-comentarios li.destacado {
    background: none repeat scroll 0 0 #FFF8EA;
    border-top-color: #FFE09F;
   
}
#lista-comentarios ul#contenedor-comentarios li .avatar {
    display: block;
    float: left;
}
#lista-comentarios ul#contenedor-comentarios li .avatar img {
    box-shadow: 0 1px 2px #333333;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario {
    display: block;
    float: left;
    margin-left: 12px;
   
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap {
    display: block;
   height:auto;
    width: 655px;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap h4 {
    color: #C8C8C8;
    display: block;
    margin-top: 1px;
   
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap h4 a {
    font-size: 14px;
    text-decoration: none;
   
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap h4 a:hover {
    text-decoration: underline;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap h4 small {
    background: url("/temas/default/images/fecha_min.png") no-repeat scroll right center transparent;
    color: #DFDFDF;
    float: right;
    font-size: 11px;
    font-weight: lighter;
    padding-right: 17px;
}
#lista-comentarios ul#contenedor-comentarios li:hover .cont_comentario .wrap h4 small {
    color: #999999;
}
#lista-comentarios ul#contenedor-comentarios li .cont_comentario .wrap .msj {
    font-size: 13px;
    margin-top: 3px;
   height:auto;
}
#lista-comentarios ul#contenedor-comentarios .no-comentarios {
    border: 3px dashed #D1D8DE;
    color: #C8C8C8;
    font-size: 18px;
    padding: 12px;
    text-align: center;
}

Aclárame una cosa, cada bloque de comentario completo, empieza en

Código :

<div id="lista-comentarios">

O empieza en

Código :

<div style="margin-bottom:15px;">

y lista-comentarios es el contenedor de los comentarios.

Si es el primer caso, está mal, si es el segundo, está todo bien. Aunque ahora mirándolo mejor, creo que es el segundo y que está todo bien.

Un saludo.

si es es el segundo

Bueno me tengo que ir, ya es tarde, mañana contestare a tus respuestas, te lo digo para estar informado , Saludos, y gracias por tu ayuda. Cuidate.

Saludos, si tienes más problemas nos comentas.

ok, gracias.