WordPress.org

Ready to get started?Download WordPress

Forums

Align the Comment Counts to the Far Right Side of the Page (23 posts)

  1. misty9
    Member
    Posted 6 years ago #

    Hi,
    I am trying to put the Comment counts to the far right hand side of the page.

    Thus I thought that using a table such as the following would solve the issue. But it doesn't. Because of the <td> tag is outside of fonts, there is no cells, if I put <td> tags inside of <font>, there is no font style. I must be doing something wrong here. Can someone give me a few pointers? Thanks.

    ==================================
    <table>
    <tr>
    <td align="left><font color="#3399CC" size="2px">
    <?php comment_author_link() ?></font></td>

    <td align="center"><font color="#999" size="1px">
    (<?php comment_date('M d Y') ?>
    <?php comment_time() ?>)</font></td>

    <td align="right"><font color="#3399CC" size="4px"
    <?php echo $count; ?></font></td>

    </tr>
    </table>

  2. Adam Brown
    Member
    Posted 6 years ago #

    font tags are deprecated. You should use CSS instead. Give that third TD tag a class, then align the class right. e.g.

    <td class="alignRight">

    then in your stylesheet,

    .alignRight{ text-align:right; }

    Google a quick CSS tutorial for more. Suggested: w3schools

  3. misty9
    Member
    Posted 6 years ago #

    Thanks for the reply. I will define different fonts for Author's name, Dates in the style.css in different classes. I've done exact what you had suggested, but it didn't resolve the problem. Try the following and Cell B is not aligned to the far right of the page. Why is that? Anyone? Thx.

    Style.css:

    .alignRight{ text-align:right; }

    Comments.php:
    <table>
    <tr>
    <td>Cell A</td>
    <td class="alignRight">Cell B</td>
    </tr>
    </table>

    Please take a look at this WordPress support site http://liberta.reminiscelane.com/visitors/tutorials/wordpress-helpdesk/ which has a few very good features that currently WordPress doesn't have. For example, the descending comments counting and etc.

    I've already made my blog having the desending comments count. Now I wish to have the comments counts to the far right of the page like what she has on her blog.

  4. Adam Brown
    Member
    Posted 6 years ago #

    Those aren't actually tables she's using. The comment numbers are in <div class="commentnumber">, and .commentnumber is floated right:

    .commentnumber{float:right;}

    As for your issue with the table, if you gave a URL it would help.

  5. misty9
    Member
    Posted 6 years ago #

    I will use any method that works if table tag doesn't in this case.

    Here is the testing page, see "Chris (Nov 06 2007 10:37 pm) 3" when 3 is the latest comment count.

    http://koreancelebrities.skybluedot.com/wp4_koreancelebrities/?page_id=3

    Thanks.

  6. Adam Brown
    Member
    Posted 6 years ago #

    You don't have any tables in there as far as I see.

    You've got validation problems out the wazoo. If you tried the table method earlier, validation problems might be why it didn't work (even if the validation errors were elsewhere on the page). Start here:

    validate

    Biggest problem is that you're using outdated (deprecated) markup. <font> tags don't exist in XHTML, nor does the align property in <div align=right>.

    Anyway, I've suggested two different methods. Either put the number in a table cell or in a div. Looks like you don't have either one. You need to start there. Probably easiest to put a <div class="alignRight"> type thing around the number, with appropriate CSS in the stylesheet (per my last post).

  7. misty9
    Member
    Posted 6 years ago #

    Damrbrown, Thanks so much for your time. I will work on clean up the validation errors first.

  8. misty9
    Member
    Posted 6 years ago #

    "Either put the number in a table cell or in a div. Looks like you don't have either one."

    Uh, I had removed the table tag test as soon as it did not work for me in the Comments.php. I will try it again after cleaning up the validation errors.

  9. misty9
    Member
    Posted 6 years ago #

    By the way, I've done a simple test without errors(see link below). The Cell B is not placed to the far right of the page.

    http://koreancelebrities.skybluedot.com/table_test.html

  10. misty9
    Member
    Posted 6 years ago #

    While I am cleaning up my validation errors, it would be great if anyone could show me a simple test in a simple HTML file that puts the second element to the far right side of the page. Thanks.

  11. Adam Brown
    Member
    Posted 6 years ago #

    Re: your table test. You need to use CSS to give the table 100% width first.

    Here's the demo you requested. It's on a test site, so I'll be deleting it later today. Since I don't want to attract spambots to the test site, I'm not going to give the URL. Instead, I'll say this: Go to my personal website:

    http://adambrown.info/

    Add this to the URL:

    b/betablog/2007/11/07/tables-demo/

    (Please keep comments here rather than posting a comment to the test site.)

  12. misty9
    Member
    Posted 6 years ago #

    Thanks so much Adam for the test demo. I will work on fixing issues at my comment page later.

    I have a slightly different inquiry now. I have been searching online for a simple free spiral photo album cover image for a day, but I still haven't found one. All I need is a little frame that I will place my images inside of it. Any suggestion in where I should try next? Thanks.

  13. Adam Brown
    Member
    Posted 6 years ago #

    Not sure what you mean exactly with the photos question, but check out the plugins repository for photo plugins.

  14. misty9
    Member
    Posted 6 years ago #

    I am looking for a JPG or any other type of image file. The jpg has a nice spiral photo album that I can merge my image into it. i.e I would manually combine them into one JPG file.

    This new jpg will be the cover of one of my photo albums and is also a link to another page full of pictures.

    In case you run into any nice images like that, please forward me the URL. Thanks.

  15. misty9
    Member
    Posted 6 years ago #

    Here is an example of image file that I am interested in. The spirals are bit large than what I'd like, but it's hard to find anything like it. I will have to cut out the window frame and reside it if I can't find any other frames.

    http://www.filebuzz.com/software_screenshot/full/5815-Diji_Album.jpg

  16. Adam Brown
    Member
    Posted 6 years ago #

    If this were a wordpress support question, you might have better luck here. As it is, all I can suggest is google images or photoshop.

  17. misty9
    Member
    Posted 6 years ago #

    It is not a wordpress specific question.

    I've finally found a site that uses such a technique.
    I have sent email to ask them how to achieve such a frame of the yellow flower image(P1010085_highlight) on the left hand side of their page. I may have better search results if I know the name of such photo frame technique.

    http://www.lookatalyssaspictures.myphotoalbum.com/

  18. misty9
    Member
    Posted 6 years ago #

    Oh, I see, the three tiers frame is done in the table with some image files. See source code at their web site.

    <!--- Begin Frame Style Table --->
    <table>
    </table>
    <!--- End Frame Style Table --->

  19. misty9
    Member
    Posted 6 years ago #

    Hi Adam,

    I was trying to send you a message at your web site, but I couldn't find a way there.

    I didn't have the time to work on the comments counter issue till today. I've tested with the DIV alignment and it works instantly. Will clean up the validation errors later. Thanks again.

  20. Adam Brown
    Member
    Posted 6 years ago #

    No problem. My blog is buried in my site a bit, which probably explains why you couldn't find the commenting form.

  21. Adam Brown
    Member
    Posted 6 years ago #

    In response to the question you posted on my site:

    I need to have different font styles for Author’s Name, Date Posted and Comment Counter. How should I go about them after defining three different classes in the Style.css? Thanks.

    You'd want to use span tags for that. Something like this in the HTML source:

    <p>Posted by <span class="theAuthor">Misty</span> on <span class="theDate">November 15th, 2007</span>. <span class="commentCount">5 comments</span></p>

    Then in your CSS, here's some examples:

    .theAuthor{font-weight:bold;color:#a00;}
    .theDate{font-style:italic;color:#00f;}
    .commentCount{font-size:300%;text-decoration:underline;}

    Not sure how much CSS you know, but here's a good reference.

  22. misty9
    Member
    Posted 6 years ago #

    Thanks Adam. I will follow up on that after resolving the following issue.

    I was so excited yesterday about the DIV tag worked instantly. I've realized that my code only worked in Safari on Mac after doing some in depth testing. The Comment Counter goes on to the next line where the actual comment is in FireFox, Netscape and IE for Mac and Windows.

    Here is my code:

    <div class="cmtinfo1">
    <?php comment_author_link() ?>
    (<?php comment_date('M d Y') ?> <?php comment_time() ?>)
    <div style="float:right;"><?php echo $count;?></div>
    </div>

  23. misty9
    Member
    Posted 6 years ago #

    Okay Adam, My error, It works in all browsers when using DIV tags if putting the right-floated div before the left div(like what you said on the test demo page). Thank you so much and I am so happy about it.

Topic Closed

This topic has been closed to new replies.

About this Topic