WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Alternitives to <li> (8 posts)

  1. Staren
    Member
    Posted 6 years ago #

    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>
  2. Furtoosh
    Member
    Posted 6 years ago #

    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"?

  3. Staren
    Member
    Posted 6 years ago #

    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;
    }
  4. Furtoosh
    Member
    Posted 6 years ago #

    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;
    }
  5. Staren
    Member
    Posted 6 years ago #

    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.

  6. Furtoosh
    Member
    Posted 6 years ago #

    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.

  7. Staren
    Member
    Posted 6 years ago #

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

  8. Furtoosh
    Member
    Posted 6 years ago #

    You are welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.