Support » Themes and Templates » Alternitives to <li>

  • Resolved Staren

    (@staren)


    Hi all,

    I have what I think is a simple question. I am using the code below to add the comment information to the top of my posts. I want the number of comments and the add comment image on the same line, but I need the two different class attributes intact. How can I change this code to do those two things. I’m pretty new to php if you couldn’t tell.

    <div class="post-comments">
    						        <li class="post-comments-count" title="View all 21 Comments"><?php comments_popup_link('0', '1', '%'); ?></li>
    							<li class="post-comments-add"><a href="<?php the_permalink() ?>#respond" title="Add a Comment"><span></span>Add a Comment</a></li>
    </div>
Viewing 7 replies - 1 through 7 (of 7 total)
  • I think you can do this in CSS. Add in your style sheet the following:

    li.post-comments-count, li.post-comments-add{display:inline;}

    Try it and see if it will result in what you want. And, is the image set as a background for the list item with class “post-comments-add”?

    I think that will work, but this is a pretty complex theme. Here is the relevant CSS. Yes the add comment image is set as a background to the “post-comments-add” class. An example of what I want to change can be seen at http://www.morawski.us As you can see it wants to throw the add comment link to a new line obviously because of the use of the individual li tags.

    #content .post-comments {
    	float: right;
    	background: url("../images/post-comments-left.gif") no-repeat 0 0;
    }
    
    #content .post-comments ul {
    	float: left;
    	width: 100%;
    	margin: 0;
    	padding: 8px 0;
    	background: url("../images/post-comments-right.gif") no-repeat 100% 0;
    }
    
    #content .post-comments ul li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	background: none;
    }
    
    #content .post-comments li.post-comments-count {
    	margin: 0 10px 0 14px;
    }
    
    #content .post-comments-count a:link, #content .post-comments-count a:active, #content .post-comments-count a:visited {
    	color: #666;
    	font-weight: bold;
    	border-bottom: 0;
    	padding-right: 22px;
    	background: url("../images/post-comments-bubble.gif") no-repeat 100% 0;
    }
    
    #content .post-comments-count a:hover {
    	color: #333;
    }
    
    #content .post-comments li.post-comments-add {
    	position: relative;
    	display: block;
    	width: 16px;
    	height: 16px;
    	margin: 0 8px 0;
    	padding: 0;
    	overflow: hidden;
    }
    
    #content li.post-comments-add span {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	background: url("../images/post-comments-add.gif") no-repeat 0 0;
    }
    
    #content li.post-comments-add a {
    	text-decoration: none;
    }

    Try the following:

    1. Add display: inline; to:

    #content .post-comments li.post-comments-count {
    	margin: 0 10px 0 14px;
    }

    2.Change display: block; to display:inline; here:

    #content .post-comments li.post-comments-add {
    	position: relative;
    	display: block;
    	width: 16px;
    	height: 16px;
    	margin: 0 8px 0;
    	padding: 0;
    	overflow: hidden;
    }

    Not perfect, but better. Thanks alot. It fixed the problem with the add comment link being thrown to a new line. Now I just need to fix the error of the entire comment link set-up being thrown to a new line. What I want is the post date and time on one side of the content space and the comment links on the other. Not sure how to do that. I made the changes you posted and here is the code in the theme:

    <div class="post-comments">
    						<ul>
    							<li class="post-comments-count"><a href="#comments" title="View all <?php comments_number('0', '1', '%'); ?></a></li>
    							<li class="post-comments-add"><a href="<?php the_permalink() ?>#respond" title="Add a Comment"><span>&nbsp;</span>Add a Comment</a></li>
    						</ul>
    					</div>

    I trued removing just the ul tags, but that messes up the images. Thanks for all the help.

    In your style sheet, the post date and time are within the div with class post-author. This div has a width of 70%:

    .post-author {
    float: left;
    width: 70%;
    margin-bottom: 1.4em;
    }

    Remove width: 70%; and see what happens.

    That did the trick. I would not have even considered looking there. Thanks for going through this with me.

    You are welcome!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Alternitives to <li>’ is closed to new replies.