WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image Alignment Problem (16 posts)

  1. miniimage
    Member
    Posted 5 years ago #

    I am having problems with image alignment and it's bothering me.

    For some reason it does not align in the div it is in which is the post div.

    And the problem is that the image itself is aligning in the whole content div.

    To see what I mean please see my blog.

    http://clubpenguinlounge.com/

  2. AdamJohnson
    Member
    Posted 5 years ago #

    What’s happening here is that browsers now treat images a floating elements by default, wrapping everything around them as they go along.

    To force the next part of the page to display below the image, you need to insert <br clear="both"> after the <img…> tag in your post, so that the whole line looks like this.

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Google_Appliance.jpg/140px-Google_Appliance.jpg" alt="" align="left" /><br clear="both">

    If you need more information, the Web Design Group has some great references. Here’s what you'll need about the <img> tag, and they also have some excellent references on HTML 4.0 in general and CSS (Cascading Style Sheets), in case you're interested in even more control of your web page.

    Hope that helps!

    —Adam Johnson INDEPENDENTgeek
    INDEPENDENTgeekTN.com

  3. miniimage
    Member
    Posted 5 years ago #

    Thank you so much! It worked great!

    How do I make it so it won't do it next. Can I put a code in my CSS that will stop it from doing it?

  4. miniimage
    Member
    Posted 5 years ago #

    I know I could put this in my style.css

    br { clear:both; }

    But still I have to keep putting <br /> on my posts every time I have to put an image.

    Hmmm... there must be some fault in my template.

  5. miniimage
    Member
    Posted 5 years ago #

    Also if you go all the way to the bottom, you can see that it's not centered. I think I have an OCD and I can't settle with this.

  6. AdamJohnson
    Member
    Posted 5 years ago #

    The part about your posts not being centered is to be expected. Your page is laid out like this:

    [logo                                      ]
    [                menu1, menu2, menu3, menu4]
    ____________________________________________
    [post                   ][ads              ]
    [                       ][                 ]
    _________________________[                 ]
    [post2                  ][                 ]
    [                       ]-------------------
    _________________________                  |
    [post3                  ]                  |
    [                       ]                  |
    -------------------------                  |
    [footer____________________________________]

    So you can see that it’s the column for your posts plus the column for your ads that are centered over the footer.

    I'm looking at the rest for you right now.

    —Adam Johnson INDEPENDENTgeek
    INDEPENDENTgeekTN.com

  7. AdamJohnson
    Member
    Posted 5 years ago #

    Okay, here's the fix:

    First, go get rid of those extra line breaks I told you about. Then go into your style.css file and change the post class so that it looks like this:

    .post {
    	margin: 25px 0 25px 0;
    	border-bottom: 2px solid #e3e3e3;
    	float: left;
    }

    Cheers!

    —Adam Johnson INDEPENDENTgeek
    INDEPENDENTgeekTN.com

  8. miniimage
    Member
    Posted 5 years ago #

    Thanks! Worked! Wow!

    Thank you so much, CSS Guru.

  9. miniimage
    Member
    Posted 5 years ago #

    Another issue. If you scroll down, you'll see.

    Your help is greatly appreciated.

  10. miniimage
    Member
    Posted 5 years ago #

    Wait. I just fixed it with:

    .post {
    	margin: 25px 0 0 0;
    	border-bottom: 2px solid #e3e3e3;
    	float: left;
            width: 100%;
    }
  11. AdamJohnson
    Member
    Posted 5 years ago #

    Ha! See, you're getting it!

    Are you using a Mac or PC? I might have a few suggestions for a great pair of apps that make editing this kind of thing a breeze.

    —Adam Johnson INDEPENDENTgeek
    INDEPENDENTgeekTN.com

  12. miniimage
    Member
    Posted 5 years ago #

    I switch between Macs and PCs but I use Notepad++ for my PC.

    And Thanks again for your help.

    *changes topic to "resolved"*

  13. AdamJohnson
    Member
    Posted 5 years ago #

    Cool.

    When you're on your Mac, you should check out a pair of apps (which I actually used to solve this little quandry of yours) called Taco HTML Edit and CSSEdit (both by different companies).

    Here’s how the workflow…works:

    1. Copy the published webpage’s entire source code to the clipboard.
    2. In Taco HTML Edit, create a new document containing only the code from the clipboard.
    3. Save the document to a local disk.
    4. In CSSEdit, open the locally-saved document in a preview window.
    5. In the preview window’s toolbar, click Style Sheets, then select the style sheet to edit.
    6. In the drop-down dialog sheet, click the Override and Edit button.

    Changes made to the page in CSSEdit instantly are reflected in the CSSEdit preview window. Changes made in Taco HTML Edit need to be saved (⌘S), and are automatically and instantly refreshed in the CSSEdit preview window.

  14. miniimage
    Member
    Posted 5 years ago #

    That's cool! But I think the Firebug Firefox Add-on does something similar where you can edit the HTML and CSS and shows the changes you have made in the browser. And it's actually really neat because it's integrated in the browser.

    =)

  15. miniimage
    Member
    Posted 5 years ago #

    That's cool! But I think the Firebug Firefox Add-on does something similar where you can edit the HTML and CSS and shows the changes you have made in the browser. And it's actually really neat because it's integrated in the browser.

    =)

  16. AdamJohnson
    Member
    Posted 5 years ago #

    Right, Firebug will let you edit HTML and CSS (nice find, btw—I'm not a “plugin guy,” usually), but it doesn’t edit the PHP files that run WordPress.

Topic Closed

This topic has been closed to new replies.

About this Topic