Lista komentarzy (jeden pod drugim) nie wyświetla się jako dobrze wyrównana
-
Otóż mam listę komentarzy:
http://i.imgur.com/Fg1kP.pngWidać 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.