WordPress.org

Ready to get started?Download WordPress

Forums

Floating image problem (14 posts)

  1. manila
    Member
    Posted 9 years ago #

    My problem is the following:

    Please have a look at this first: http://www.fan-sites.org/audrey-tautou/?page_id=35

    I want the pictures to be one beneath the other and without this alignment to the right. The images are floating in a div, here's the code:

    .mediaimage {
    float: left;
    padding: 0 4px 0 4px;
    }

    What's wrong? Why doesn't the next picture follow normally, even if I put <br>-tags after the "Download"-link??!!!

    Thanks in advance!

  2. moshu
    Member
    Posted 9 years ago #

    <rant on>ugly popups... hate them </rant off>
    When you float something and it's not wide enough to take up all the place, the next floated element (in this case the next image) will get "glued" to the previous one.
    Instead of "float" you could try
    text-align: left;

  3. manila
    Member
    Posted 9 years ago #

    Yes, I tried that one out already. But look what happens: http://www.fan-sites.org/audrey-tautou/?page_id=35

  4. Beel
    Member
    Posted 9 years ago #

    Can't stand popups, either so this is my one and only suggestion - create a wrapper div for the image and associated text.

  5. Lorelle
    Member
    Posted 9 years ago #

    Ah, welcome to one of the fun bugs in browsers.

    I talk about how to solve this on my site as it plagued me until I found the fix.

    Basically, some browsers just can't "tell" the height of the container an image is in. So the float pushes other containers around. You need to fake it out and imply a right. The fix, by http://www.positioniseverything.net is called the "Clearfix" and it basically gives a second CSS reference to a container that instructs it to "clear" itself of the other wraps so it won't "stick" or push the other ones.

    I know it's hard to explain but I have pictures of what it looks like broken and fixed in the article.

  6. manila
    Member
    Posted 9 years ago #

    Thanks for the reply. I had a look at that Clearfix thing and put that clearfix-code into the stylesheet. But still... it doesn't work!

    The code used in the page is this:

    <div class="excerpt-post clearfix"><br />
    <img src="http://fan-sites.org/audrey-tautou/filmography/Poster-Venus.jpg" width="75"/><br /><strong>Venus Beauty Institute (Vénus Beauté)</strong><br />
    Uploaded: July 30th, 2005<br />
    Size: 1.25 MB<br />
    <a href="http://fan-sites.org/audrey-tautou/media/Trailer-Venus.zip"><strong>Download</strong></a></div>

    Is there something wrong?

  7. Lorelle
    Member
    Posted 9 years ago #

    Yes, is the section where you have your image information in the "excerpt-post" class?

    Change the class reference to excerpt-post to whatever was there in your original section. Keep the clearfix and make sure the clearfix CSS is in your style sheet in the theme you are using.

  8. manila
    Member
    Posted 9 years ago #

    Yes, I forgot the "excerpt-post" part. But now it's all there:

    The code used in the page is this:

    <div class="excerpt-post clearfix"><br />
    <img src="http://fan-sites.org/audrey-tautou/filmography/Poster-Venus.jpg" width="75"/><br /><strong>Venus Beauty Institute (Vénus Beauté)</strong><br />
    Uploaded: July 30th, 2005<br />
    Size: 1.25 MB<br />
    <a href="http://fan-sites.org/audrey-tautou/media/Trailer-Venus.zip"><strong>Download</strong></a></div>

    And the stylesheet contains the code:

    .clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}

    .clearfix {display: inline-table;}
    /* Hides from IE-mac */
    * HTML .clearfix {height: 1%;}
    /* End hide from IE-mac */
    /* End clearfix */

    But look, still not working: http://www.fan-sites.org/audrey-tautou/?page_id=35

    ???

  9. vkaryl
    Member
    Posted 9 years ago #

    So you're wanting the small pics in the trailer section directly under each other, right?

    I just loaded it in IE and it looks fine.... and fortunately, I have an ad blocker so whatever piece of crap the others got didn't get me too. You really should disable that sort of thing before you ask for help.

  10. manila
    Member
    Posted 9 years ago #

    I want the small pics under each other, yes, but I want the text next to it and not under the images as well.

    I'm sorry, but I cannot remore the pop-up as it is part of the hosting at fan-sites.org.

    Does anyone know how I can solve this problem? Is there something wrong with the code? Or...?

  11. vkaryl
    Member
    Posted 9 years ago #

    Hmm. For some reason I thought it was working the way you wanted it in FF, so when it looked just like that in IE.... well, anyway.... try putting a second div in there for the stuff you want to sit next to the photo, float that div right with text-align: left; and then clear: both; Mind you, I don't know that that will work, because right now I have a meeting and don't have the time to grab your code and mess with it offline, but give it a shot and report back I guess....

  12. manila
    Member
    Posted 9 years ago #

    Thanks... but it's not working, I tried it out already ;)

    Look at this: http://www.fan-sites.org/audrey-tautou/?page_id=35
    If I only have one picture, the whole floating-thing is working (I also use the "float" for my category image in the posts and that "Da Vinci Code" picture in the sidebar).

    However, if I want more pictures, it doesn't work and the pictures are next to each other.

  13. vkaryl
    Member
    Posted 9 years ago #

    While I don't think this is the underlying cause, you have an extraneous closing paragraph tag here: <a href="http://fan-sites.org/audrey-tautou/media/Trailer-Venus.zip">
    <strong>Download</strong></a>
    which you should remove for sure. And you have a bunch of validation problems, see this page: w3 validation page. Try cleaning up the errors, then we can take a look again.

  14. manila
    Member
    Posted 9 years ago #

    I found a solution, God, it's so easy that I can't believe I didn't think of it: TABLES!!

    Thanks for the help though, thank you! =)

Topic Closed

This topic has been closed to new replies.

About this Topic