Foros del Web » Creando para Internet » CSS »

Problema CSS en los comentarios

Estas en el tema de Problema CSS en los comentarios en el foro de CSS en Foros del Web. Buenas! Estoy liado con unos comentarios y tengo un pequeño problemilla... El li de cada comentario no adquiere el tamaño de los elementos que tiene ...
  #1 (permalink)  
Antiguo 05/05/2013, 02:55
 
Fecha de Ingreso: febrero-2008
Mensajes: 12
Antigüedad: 16 años, 2 meses
Puntos: 0
Problema CSS en los comentarios

Buenas!

Estoy liado con unos comentarios y tengo un pequeño problemilla...

El li de cada comentario no adquiere el tamaño de los elementos que tiene dentro.

Es decir, el li toma el tamaño determinado por el "div author" pero en el interior de este li también existe un "commentlist p" y, cuando el comentario es de más de 3 líneas, el li no se adapta a este tamaño y, comprobando con Firebug, sigue quedándose con la altura de siempre, con el consiguiente problema que genera para poner un separador entre comentarios por ejemplo.

¿Teneis idea de cuál puede ser el problema?
  #2 (permalink)  
Antiguo 05/05/2013, 03:04
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Problema CSS en los comentarios

Cita:
Iniciado por rikype Ver Mensaje
¿Teneis idea de cuál puede ser el problema?
Alguna idea si que hay. Pero mejor pon algo de código, HTML/CSS (no PHP u otros), para ver exactamente el problema y no andar divagando sobre el asunto.
  #3 (permalink)  
Antiguo 05/05/2013, 05:20
 
Fecha de Ingreso: febrero-2008
Mensajes: 12
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: Problema CSS en los comentarios

Gracias!

A ver.. el problema viene también que me está tocando arreglar lo hecho por otro.. pero bueno...

En principio, los comentarios son una función dentro de functions.php, siendo el código el siguiente:

Código PHP:
Ver original
  1. function custom_comment($comment, $args, $depth) {
  2.   $GLOBALS['comment'] = $comment; ?>
  3.   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID()
  4.   ?>">    
  5.    <div id="author">
  6.     <?php
  7.     echo '<cite>';
  8.     if(get_comment_author_url())
  9.     {
  10.     echo '<a href="' . get_comment_author_url() .
  11.     '" target="_blank" title="Website of ' .
  12.     get_comment_author() . '">' . get_comment_author() . '</a>';
  13.     }
  14. else    { comment_author(); }
  15. echo '</cite>'; ?>
  16. </div>
  17.     <?php comment_text() ?>  
  18.    
  19.     <div class="coment-edit"><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
  20.     <div class="comment-author vcard"><div class="coment-fecha"><?php printf(get_comment_date()) ?></div>
  21.      
  22.      <?php if (current_user_can('administrator')) : ?><div class="reply">
  23.         <?php comment_reply_link(array ('reply_text' => '', 'depth' => $depth, 'max_depth' => $args['max_depth'])) ?>
  24.        
  25.       </div><?php endif; ?>
  26.     </div>
  27.    
  28.     <?php if ($comment->comment_approved == '0') : ?>
  29.        <em><?php _e('Your comment is awaiting moderation.') ?></em>
  30.        <br />
  31.     <?php endif; ?>

Luego, el CSS que entra en juego es el siguiente:

Código CSS:
Ver original
  1. .commentlist {
  2.     margin: 0px !important;
  3.     border:1px solid #c1987a;
  4.     max-height:220px;
  5.     overflow:hidden;
  6.     border-radius:5px;
  7.     padding: 5px 5px 5px !important;
  8.     line-height: 6px;
  9.         }
  10. .commentlist ol {
  11.     margin: 0px;
  12.     padding: 10px;
  13.     }
  14.  
  15. .commentlist li {
  16.     list-style: none;
  17.     margin:0px 0px 5px 0px !important;
  18.     padding: 0px 0px 8px 0px !important;
  19.     }
  20. .commentlist li ul li {
  21.     list-style:none;
  22.     }
  23. .nocomments {
  24.     text-align: center;
  25.     margin: 0px;
  26.     padding: 0px;
  27.     }
  28. .reply {
  29.     padding: 5px 0px 5px 0px;
  30.     margin: 0px;
  31.     float:right;
  32.     margin-top:-10px;
  33.     background: url('images/reply.png') no-repeat 0 0 !important;
  34.     }
  35. .reply a, .reply a:visited {
  36.     color: #999999;
  37.     font-family: Georgia, "Times New Roman", Times, serif;
  38.     font-size: 12px;
  39.     font-weight: normal;
  40.     font-style: italic;
  41.     text-decoration: none;
  42.     margin: 0px;
  43.     padding: 6px 8px 6px 8px;
  44.     }
  45. .reply a:hover {
  46.     color: #999999;
  47.     text-decoration: none;
  48.     }
  49. .thread-alt {
  50.     margin: 0px;
  51.     padding: 0px;
  52.     }
  53. .thread-even {
  54.     margin: 0px;
  55.     padding: 0px;
  56.     }
  57. .depth-1 {
  58.     margin: 0px;
  59.     padding: 0px;
  60.     border-bottom: 1px dotted #dfd6d1;
  61.     }
  62. .even, .alt {
  63.     margin-bottom: 5px;
  64.     padding-bottom: 5px;
  65.     }
  66.    
  67. .coment-fecha {
  68.     float:right;
  69.     position:relative;
  70.     font-size:9px;
  71.     margin-left:5px;
  72.     line-height:10px;
  73.     color:#be9874;
  74.     top:-9px;
  75. }
  76.  
  77. .coment-edit {
  78.     font-size:9px;
  79.     position:relative;
  80.     margin-left:5px !important;
  81.     line-height:10px;
  82.     color:#bb0046 !important;
  83.     top: -7px;
  84. }
  85.  
  86. .coment-edit a{
  87.     font-size:9px;
  88.     position:relative;
  89.     margin-left:5px !important;
  90.     line-height:10px;
  91.     color:#bb0046 !important;
  92. }


Creo que esto sería todo... la verdad que la hoja de estilos está totalmente revuelta porque los diseñadores que la han ido tomando con el tiempo han ido agregando cosas sin un orden y ahora vienen los problemas porque limpiarla me está costando la misma vida...

Un saludo y muchísimas gracias por adelantado!
  #4 (permalink)  
Antiguo 05/05/2013, 05:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Problema CSS en los comentarios

Como dije antes, ya que tu problema es de CSS, no vale que pongas el código PHP, sino sólo el HTML resultante, para ver la estructura.
  #5 (permalink)  
Antiguo 05/05/2013, 05:29
 
Fecha de Ingreso: febrero-2008
Mensajes: 12
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: Problema CSS en los comentarios

Disculpa!

Te pongo el HTML a ver que tal..

Código HTML:
Ver original
  1. <ol class="commentlist">
  2.     <li class="comment byuser comment-author-tonil even thread-even depth-1" id="li-comment-6">
  3.    
  4.      
  5.     <!-- <div id="comment-6" class="comment-body"> -->
  6.       <div id="author"><!--<a href="http://vintagefotografia.es" target="_blank"><cite class="fn"><a href='http://vintagefotografia.es' rel='external nofollow' class='url'>Tonil</a></cite></a>-->
  7.     <cite><a href="http://vintagefotografia.es" target="_blank" title="Website of Tonil">Tonil</a></cite>    
  8.     </div>
  9.     <!-- <div class="coment-fecha">mayo 5, 2013</div> -->
  10.     <p>Hola a todos, se me han desordenado las fotos, pero bueno, la idea es que si en alguna veis bien a alguien y queresis esa cara en una foto del mismo sitio podría hacer un montaje de una foto con varias caras distintas y hacer una en la que todos miren bien. No es muy complicado si la pose es mas o menos la misma, como por ejemplo la foto que están encima de los palos y Rebeca saltando.</p>
  11.    
  12.     <!-- </div> -->
  13.     <div class="coment-edit">  <a class="comment-edit-link" href="http://vintagefotografia.es/wp-admin/comment.php?action=editcomment&amp;c=6" title="Editar comentario">(Editar)</a></div>
  14.     <div class="comment-author vcard"><div class="coment-fecha">mayo 5, 2013</div>
  15.      
  16.      <div class="reply">
  17.         <a class='comment-reply-link' href='/los-gonzalez-fotografo-valencia/?replytocom=6#respond' onclick='return addComment.moveForm("comment-6", "6", "respond", "435")'></a>
  18.         <!-- <a class='comment-reply-link' href='/los-gonzalez-fotografo-valencia/?replytocom=6#respond' onclick='return addComment.moveForm("comment-6", "6", "respond", "435")'>Responder</a>-->
  19.       </div>    
  20.    
  21.         </li>
  22.   <li class="comment byuser comment-author-tonil odd alt thread-odd thread-alt depth-1" id="li-comment-8">
  23.    
  24.      
  25.     <!-- <div id="comment-8" class="comment-body"> -->
  26.       <div id="author"><!--<a href="http://vintagefotografia.es" target="_blank"><cite class="fn"><a href='http://vintagefotografia.es' rel='external nofollow' class='url'>Tonil</a></cite></a>-->
  27.     <cite><a href="http://vintagefotografia.es" target="_blank" title="Website of Tonil">Tonil</a></cite>    
  28.     </div>
  29.     <!-- <div class="coment-fecha">mayo 5, 2013</div> -->
  30.     <p>Para mi la mejor foto es la 02, puedo recortarla un poco para que se les vea a ellos mejor, pero aun asi dejare la otra para que la tengais tambien.</p>
  31.    
  32.     <!-- </div> -->
  33.     <div class="coment-edit">  <a class="comment-edit-link" href="http://vintagefotografia.es/wp-admin/comment.php?action=editcomment&amp;c=8" title="Editar comentario">(Editar)</a></div>
  34.     <div class="comment-author vcard"><div class="coment-fecha">mayo 5, 2013</div>
  35.      
  36.      <div class="reply">
  37.         <a class='comment-reply-link' href='/los-gonzalez-fotografo-valencia/?replytocom=8#respond' onclick='return addComment.moveForm("comment-8", "8", "respond", "435")'></a>
  38.         <!-- <a class='comment-reply-link' href='/los-gonzalez-fotografo-valencia/?replytocom=8#respond' onclick='return addComment.moveForm("comment-8", "8", "respond", "435")'>Responder</a>-->
  39.       </div>    
  40.    
  41.         </li>
  42.   </ol>

Te he dejado la parte del comentartio.. no se si te interesará más ver un HTML completo...
  #6 (permalink)  
Antiguo 05/05/2013, 05:35
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Problema CSS en los comentarios

Yo veo que el párrafo crece perfectamente. Lo que no crece es .commentlist porque tiene definido una altura máxima:

Código CSS:
Ver original
  1. max-height:220px;

Si quitas eso, tendrá el valor por defecto, que es auto, y a partir ahí crecerá según el contenido.
  #7 (permalink)  
Antiguo 05/05/2013, 05:51
 
Fecha de Ingreso: febrero-2008
Mensajes: 12
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: Problema CSS en los comentarios

Cita:
Iniciado por pzin Ver Mensaje
Yo veo que el párrafo crece perfectamente. Lo que no crece es .commentlist porque tiene definido una altura máxima:

Código CSS:
Ver original
  1. max-height:220px;

Si quitas eso, tendrá el valor por defecto, que es auto, y a partir ahí crecerá según el contenido.
Seguiría haciendo lo mismo.. porque esa línea lo que me hace es que salga un scroll una vez que se pasan los 220px en el commentlist, que es lo que quiere el dueño de la web...

Te enseño unas imagenes del problema, no puedo enseñarlo en vivo porque son páginas protegidas con contraseñas porque son zonas de clientes, es una putada para que lo veais pero no tengo permiso para hacerlo.

Aquí ves como quedan ahora mismo:



Aquí ves lo que ocupa el LI al inspeccionarlo en Firefox:



Y este es el commentlist p, que se supone está dentro del LI pero sin embargo, como se ve en la imagen anterior, el LI no lo toma como dentro de él...



Un saludo y muchísimas gracias!
  #8 (permalink)  
Antiguo 05/05/2013, 06:21
 
Fecha de Ingreso: febrero-2008
Mensajes: 12
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: Problema CSS en los comentarios

Arreglado!!!

Finalmente me faltaba añadir display:inline-block a commentlist li

Creo que así ya funciona perfectamente.

Saludos!

Etiquetas: comentarios, tamaño
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:27.