Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Floating/Clearing image collisions

Bottom of Page

1 to 8 of 8

  1.  
  1.  permalink
    I'm styling some post-excerpts in Wordpress that need to look like this:



    The "Read More" button is a block element, and depending on the browser, it keeps sliding under the image. If the content wasn't coming out of Wordpress, I'd have an easy time floating the photo left and floating the text/button right, but since the photo is within the <p> tag, the code outputs like this:

    <p><img src='/uploads/2008/01/photo.jpg' alt="" />Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
    erat volutpat.<a class="more-link" href="/?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Read More</a></p>


    Any ideas how to make this work like the illustration?
    • CommentAuthorjriddle
    • CommentTimeJan 21st 2008
     permalink
    Could you possibly Make the image description and the read more an unordered list, also maybe start a new paragraph with just the read more. Sorry I won't be of much help since I never have actually messed with WordPress.
    • CommentAuthorjriddle
    • CommentTimeJan 21st 2008
     permalink
    Got another thought...In word press is the HTML generated and thats why the < p > tag is wrapping the image? I was going to say if it wasn't just apply a class to that paragraph, but otherwise I am still kind of clueless on helping you...
  4.  permalink
    I played with this for a little while and had similar issues. The only solution I could come up with (aside from placing the anchor tag into it's own p tag) deals with absolutely positioning the anchor tag within the p tag (relatively positioned), but the image width would have to remain constant which is probably unrealistic.
  5.  permalink
    Thanks guys. Yeah, unfortunately not only will the image width be changing with each post, but the folks running the blog won't want to (or know how to) add extra code or CSS classes each time.

    I think I'll just encourage them to include longer excerpts, thus letting the text and "Read More" button flow below the photo.
    • CommentAuthorthedotmack
    • CommentTimeJan 28th 2008
     permalink
    wrap the text and readmore button in a div, set that div's width to the "total of the box - the width of the img" using JS. so give the image an ID and the text an ID based on the post number variable in the wordpress template, then do

    document.getElementByID('textID').width = document.getElementById('imageID').width - widthOfBox

    should work if you can understand my awkward thought process.
  7.  permalink
    div id=post
    img bluebox /
    text and lorem ipsum stuff and yeah
    img link /
    /div

    you can img bluebox float:left in css

    or you can have 3 div

    div post
    div left /div
    div right /div
    /div

    div left css would be #left float:left

    but if this stuff via php/mysql... multiple instance of an id cant happen so youd have to use class

    div .left float:left

    i think maybe
  8.  permalink
    Thanks guys. The client ended up using much longer excerpts than I would have thought, so the "More" button wraps under just fine. I may try the javascript solution next time just for fun.
    Thankful People: thedotmack

1 to 8 of 8

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page