Code for center image with right aligned caption

  • Author
    Posts
  • #208082

    eaesthete
    Member

    I use quite a bit of imagery on my blog, photos, illustrations, etc. For the most part, I prefer the image centered with a right aligned caption. The template I use is chaotic soul.

    For the last few months, an earnest young guy has been helping me with html and css coding, which, admittedly, is not my area of expertise. He has sent table codes, div class caption codes (forgive me — I know there are more appropriate names like one and two cell). He has concluded that Firefox is the problem. That he can render exactly what I requested — a center image with a right aligned caption in every browswer BUT Firefox. In the meantime, I have been centering captions under the centered images, but would prefer to have the caption right aligned under the centered image. Can anyone solve this for me?

    #208190

    deltafoxtrot
    Member

    Visual Editor tested:
    `<div style="padding: 0pt; width: 200px">
    <img src="xyz.jpg" height="300" width="200" />
    <div align="right">caption</div>
    </div>`

    Make sure that the width of the Image matches the div’s width. Otherwise the caption won’t align with the right side.

    #208191

    deltafoxtrot
    Member

    And please leave out the backticks () I’m still struggling with the proper method of posting code on the forums.

    #208285

    raincoaster
    Member

    What you might want to do is design a table with three columns, put the image in the center, and the caption in the right. Leave the left blank.

    #208325

    eaesthete
    Member

    deltafoxtrot:

    You’re a genius. And thank you for pointing out the width variable as being important. What I did was simply change the width variable following the div style to match the image I had and it worked perfectly.

    And Raincoaster,
    If I could design a table I would, but I’m not that sophisticated in coding.

    At the risk of alienating either of you, let me ask this. Maybe you can solve this for me: Here’s a test I just did with a table (that was done for me) that I used once before that worked.

    <table class=”caption_right”>
    <tr>
    <td><img src=”http://eaesthete.wordpress.com/files/2008/03/jack.jpg” alt=”jack.jpg” /></td>
    </tr>
    <tr>
    <td>ffffound </td>
    </tr>
    </table>
    <p align=”left”> </p>

    The specifics of this can be found at http://eaesthete.wordpress.com/wp-admin/post.php?action=edit&post=2690 Or Test 3 Under drafts. As you can see, the caption is fine, but the image is not centered.

    Yet in the original of this, which can be found at:
    http://theerrantaesthete.com/2008/03/14/2462/

    the image appears more centered. I’m trying to understand what throws it off in one case and not another. I like using tables since the caption is smaller and tucked under the image, and since I use this format most frequently, I’m trying to find something that I can use repeatedly with good results.

    #208326

    deltafoxtrot
    Member

    I can’t see your edit screen (for a good reason, it’s your blog not mine). So I cannot comment on that.

    And I’m not that much of a genius that I could hack my way into your blog. :)

    #208328

    deltafoxtrot
    Member

    Actually I believe raincoaster misunderstood your question (no offense intended) since his solution would result in the caption appearing right of the image not beneath.

    Sincere apologies if I got you wrong, RC.

    #208338

    eaesthete
    Member

    Deltafoxtrot,

    Thank you for trying to solve this for me and you could very well be right on raincoaster’s solution. And no, I don’t think you’re getting me wrong. Let me ask you this: I feel sure you can see the original, without hacking into my blog and demonstrating to the group at large, how effortless it might be. Right? So the link below is readily available to you.

    http://theerrantaesthete.com/2008/03/14/2462/

    If you were to recreate exactly what you see there in code, how would it look? Centered image, right aligned text, tucked tight and small under the image within the confines of the width.

    #208340

    deltafoxtrot
    Member

    You’re catching me right before bedtime (It’s 2AM for me) so I won’t dive into the code to crack this riddle tonight. I’ll get back to this thread tomorrow.

    Just one thing: I was apologizing to Raincoaster

    OK, two things: The a building on the pic, the Jewish Museum Berlin, is really impressive. I’ve been there several times.

    #208366

    raincoaster
    Member

    You’re right: that’s what I thought was being asked. I promise not to answer any more questions till I’ve had my coffee.

    #208461

    eaesthete
    Member

    Deltafoxtrot,

    Not only are you coming to my aid in trying to resolve this code issue for me, but it turns out you also identified something I could not – the location of the picture (which apparently is the Jewish Museum in Berlin) designed by Daniel Libeskind. Thank you! I’ve already noted it in my blog. Any further thoughts on cracking the “riddle” of my code dilemma?

    #208463

    isadora
    Member

    OK, if you want to work with tables, you can use this code:

    <table cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td align="center"><img src="mypicture.jpg" width="200px" height="100px" alt="mydescription" /></td>
    </tr>
    <tr>
    <td align="right">My caption</td>
    </tr>
    </table>

    Of course you have to insert the actual size of your picture

    #208464

    deltafoxtrot
    Member

    Thanks for weighing in isadora, I avoid at HTML tables as much as I can.

    #208465

    isadora
    Member

    Actually you can leave that align=”center” away :-)

    #208466

    isadora
    Member

    deltafoxtrot, I only suggested it because I understood that easthete wants to use tables for some reason. Of course I’d use divs, too – but it’s not my blog :-)

    #208480

    eaesthete
    Member

    Isadora,

    Thank you for picking up this thread. Trust me, I don’t know enough to know which is better. Tables or divs. The reason I preferred the table was due to the caption. It was smaller in size and tucked under the image very nicely. If I could achieve that with a div, all the better.

    In fact, here was a code that worked for me a couple of months back using div. The caption was small and tucked. The image centered.

    <div class=”caption”>
    <div><img src=”http://farm1.static.flickr.com/31/102463794_6db9a83ef9.jpg?v=0″ height=”500″ width=”500″ />
    Grand Central [
    Flickr]</div>
    </div>

    But when I tested it yesterday, it wiped out the sidebar. Here is the link:
    http://theerrantaesthete.com/2008/02/24/sunday/

    If you could make this work, that would be great.

    #208483

    ellaella
    Member

    @eaesthete – Isadora has forgotten more about code than I’ve learned and I suspect the same is true of deltafoxtrot. However, sometimes I need to use tables in my blogs so I take the path of least resistance: I create them in Windows LiveWriter and copy/paste the code.

    It’s effortless that way.

    #208511

    deltafoxtrot
    Member

    This one reduces the caption’s font size. You can adjust the size by changing the em value.

    <div style="padding: 0pt; width: 200px">
       <img src="xyz.jpg" height="300" width="200" style="margin: 0pt; padding: 0pt" alt="" />
       <div style="margin: 0pt; padding: 0pt; font-size: 0.7em" align="right">caption</div>
    </div>

    @ellaella: *blush*

    #208564

    isadora
    Member

    ellaella, you’re welcome to show us a code example and to correct my mistakes. I also don’t code tables by hand on my blog anymore: I use a bookmarklet which I wrote for this purpose.

    #208565

    ellaella
    Member

    Mistakes??? That was a compliment, Isadora! Read it again. :)

The topic ‘Code for center image with right aligned caption’ is closed to new replies.