• Otóż mam listę komentarzy:
    http://i.imgur.com/Fg1kP.png

    Widać wyraźnie, że im kolejny komentarz ma większe wcięcie z lewej (celowo, żeby było wiadomo do jakiego poprzedniego posta, obecny post jest odpowiedzią), tym jest przesuwany bliżej prawej strony.

    Tutaj zamieszczam kod HTML i CSS szablonu komentarzy:

    .comments_template
    {
      position: relative;
      float: left;
      width: 99%;
      margin: 0;
      padding: 0;
    }
    
    .comments_template a
    {
      color: #FFF !important;
    }
    
    .commentlist
    {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .commentlist li
    {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .commentlist li.depth-1
    {
      list-style-type: none;
    }
    
    .commentlist li.depth-2
    {
      list-style-type: none;
      margin: 0 0 0 30px;
    }
    
    .commentlist li.depth-3
    {
      list-style-type: none;
      margin: 0 0 0 60px;
    }
    
    .commentlist li.depth-4
    {
      list-style-type: none;
      margin: 0 0 0 90px;
    }
    
    .commentlist li.depth-5
    {
      list-style-type: none;
      margin: 0 0 0 120px;
    }
    
    .comment-body
    {
      position: static;
      float: left;
      padding: 15px;
      margin: 0 0 10px 0;
      border: 3px solid #111111;
      border-radius: 15px;
      width: 95%;
    }
    
    .byuser .comment-body
    {
      color: #000 !important;
      border: 3px solid #6699FF !important;
      background: #F1F2F4 url(images/trans_white.png) repeat !important;
    }
    
    .byguest .comment-body
    {
      color: #FFF !important;
      border: 3px solid #6699FF !important;
      background: #111111 url(images/pattern1.png) repeat !important;
    }
    
    .vcard
    {
      float: left;
      width: 58px;
      height: 100%;
      margin-right: 15px;
    }
    
    .byuser .vcard
    {
      color: #FFF;
      background: #6699FF;
      border-right: 1px solid #6699FF;
      border-radius: 5px;
    }
    
    .fn
    {
      padding-top: 5px;
      display: block;
      text-align: center;
    }
    
    .comment-body .comment-meta
    {
      position: relative;
      margin: -12px 0 10px 0;
      padding: 0;
    }
    
    .comment-body .comment-meta .comm_date
    {
      margin: 0;
      padding: 3px;
      border-radius: 0 0 15px 15px;
    }
    
    .byuser .comment-body .comm_date, .byguest .comment-body .comm_date
    {
      border: 1px solid #6699FF;
      background-color: #6699FF;
    }
    
    .comment-body .org_comment
    {
      float: left;
      width: 85%;
      height: auto;
      margin: 5px 0 0 0;
      padding: 0;
    }
    
    .comment-body em
    {
      float: right;
      margin: -29px -16px 0 0;
      padding: 5px 3px 3px 3px;
      border: 1px solid #6699FF;
      font-weight: bold;
      background: #6699FF url(images/pattern1.png) repeat;
      border-radius: 0 15px 0 15px;
    }
    
    .byuser .comment-body .org_comment p
    {
      background: #F1F2F4;
      margin: 5px 0;
      padding: 2px;
    }
    
    .byguest .comment-body .org_comment p
    {
      background: #111111;
      margin: 5px 0;
      padding: 2px;
    }
    
    .comment-body .comm_meta_reply
    {
      position: relative;
      float: right;
      right: 0;
      width: 150px !important;
      margin: 0;
      bottom: -19px;
      font-family: Arial,Helvetica,sans-serif !important;
      font-size: 14px !important;
      font-weight: bold !important;
    }
    
    .comment-body .comm_meta_reply .comm_reply
    {
      float: right;
      margin: 0;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
    
    .comment-body .comm_meta_reply .comm_reply a, .comment-body  .comm_meta_reply .comm_reply a:hover
    {
      padding: 5px;
      display: block;
      text-decoration: none;
    }
    
    .byuser .comment-body .comm_meta_reply .comm_reply, .byguest .comment-body .comm_reply
    {
      border: 1px solid #6699FF;
      background-color: #6699FF;
    }
    
    .depth-5 .comment-body .comm_meta_reply .comm_reply
    {
      visibility: hidden;
    }
    function scl_comment($comment, $args, $depth) {
       $GLOBALS['comment'] = $comment; ?>
       <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    		<div class="comment-body-top"></div>
    		<?php
    		//Sprawdzam jakiego poziomu jest user, który napisał comment
    		//Jeśli większy lub równy 1, to jest zarejestrowany, wtedy
    		//jego komentarze mają inny styl kolorów - taki jak dla admina
    		//Jeśli mniejszy od 1 (czyli równy 0), wtedy jest gościem
    		//i ma styl kolorów dla gości bloga
    		$user_info = get_userdata($comment->user_id);
    		$user_lvl = $user_info->user_level;
    		if ( $user_lvl >= 1 ) {
    		echo '<div class="byuser">';
    		} else {
    		echo '<div class="byguest">';
    		}?>
    			<div id="comment-<?php comment_ID(); ?>" class="comment-body">
    				<div class="comment-author vcard">
    					<div class="avatar"><?php echo get_avatar($comment,$size='58' ); ?></div>
    					<?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?>
    				</div>
    				<div class="comment-meta commentmetadata">
    					<a class="comm_date">
    						<?php echo get_comment_date().' | godzina '.get_comment_time(); ?>
    					</a>
    				</div>
    				<?php if ($comment->comment_approved == '0') : ?>
    					<em><?php _e('Twój komentarz oczekuje moderacji') ?></em>
    					<br />
    				<?php endif; ?>
    				<div class="org_comment">
    					<?php comment_text(); ?>
    				</div>
    				<div class="comm_meta_reply">
    					<div class="comm_reply">
    						<?php
    							comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth'])));
    						?>
    					</div>
    					<div class="comm_edit">
    						<?php
    						//Sprawdzam czy user jest zalogowany
    						//Jeśli jest, to ma prawo na edycję komentarzy
    						//Jeśli nie jest, to nie ma prawa
    						if ( is_user_logged_in() ) {
    							edit_comment_link(__('Edytuj'),'  ','');
    							echo '<style type="text/css">
    								.comment-body .comm_meta_reply .comm_edit
    								{
    									float: left;
    									margin: 0 5px 0 0 !important;
    									border-top-left-radius: 15px;
    									border-top-right-radius: 15px;
    								}
    
    								.comment-body .comm_meta_reply .comm_edit a, .comment-body .comm_meta_reply .comm_edit a:hover
    								{
    									padding: 5px;
    									display: block;
    									text-decoration: none;
    								}
    
    								.byuser .comment-body .comm_meta_reply .comm_edit, .byguest .comment-body .comm_meta_reply .comm_edit
    								{
    									border: 1px solid #6699FF;
    									background-color: #6699FF;
    								}
    
    								.depth-5 .comment-body .comm_meta_reply .comm_edit
    								{
    									float: right;
    									margin: 0 !important;
    									right: 0;
    								}
    								</style>';
    						} else {
    							echo '<style type="text/css">
    								.comm_edit
    								{
    									visibility: hidden !important;
    								}
    								</style>';
    						}?>
    					</div>
    				</div>
    			</div>
    	</li>
    
    <?php }

    .byguest dotyczy komentarzy gości (czarne tło) a .byuser komentarzy zarejestrowanych użytkowników (szare tło).

    Moje pytanie dot. tego kodu: Dlaczego kolejne komentarze-odpowiedzi są wyświetlane bliżej prawej ramki, choć powinni być równo każdy pod każdym i wcięte jedynie z lewej strony? Co w moim kodzie może powodować ten błąd?

  • Temat ‘Lista komentarzy (jeden pod drugim) nie wyświetla się jako dobrze wyrównana’ jest zamknięty na nowe odpowiedzi.