WordPress.org

Ready to get started?Download WordPress

Forums

overflow a child element outside a parent (7 posts)

  1. Gabe462
    Member
    Posted 5 years ago #

    I'm creating a theme where posts will be displayed in rows like this:
    ______________________________________________
    [image] [title] [content...(scrollable).................]
    ---------------------------------------
    ______________________________________________
    [image] [title] [content...(scrollable).................]
    ---------------------------------------

    The embedded image is (.entry p img), and .entry is set to overflow:auto so that long post content can be scrolled. But I need to get the <img> to be shown outside of the bounds of the (.entry p), around -110px to the left. Just moving the image to the left puts it outside of the visible area of .entry

    What do I do? Have I made my question clear?

    Gabe

  2. stvwlf
    Member
    Posted 5 years ago #

    set .entry p to position: relative

    set .entry p img to position: absolute and left: -110px

    you may need to add left padding to .entry p to account for the width of the image that insets into .entry p's space - try it and you will see what i mean

  3. Gabe462
    Member
    Posted 5 years ago #

    Awesome, that was what I was looking for.

    Part 2:

    Can I keep the img from scrolling with the .entry when it overflows?

  4. stvwlf
    Member
    Posted 5 years ago #

    I'm sorry, I can't picture what you mean. Do you have an example anywhere on line I could see that is overflowing?

  5. Gabe462
    Member
    Posted 5 years ago #

    Take a look at
    http://686.circuittree.net/wp/example.html

    I want the image to stay put while the text scrolls, but the image is within the element that is scrolling.

    thanks!

  6. stvwlf
    Member
    Posted 5 years ago #

    Hi

    Fixed background images won't work correctly in IE6 except when applied to the body tag. What I suggest is create the div that has the black background and white border as a container div - give it the height you want for the box. Within the container put a left div that is float: left and the width of the image, and next to it a right div that is float: right, whose width is (container div width minus image div width)

    Set overflow: auto on the right div to create the scrollbar when needed. Only the right side div actually scrolls. Left and right divs have black background with no margin/padding between them, thus display as if one solid black background. End result is the image stays put in the left div and the text scrolls in the right div.

  7. Gabe462
    Member
    Posted 5 years ago #

    What you're saying is pretty clear to me, except that the image is simply embedded into a WP post:

    <div class="entry">
    <p><img src="theimageinsertedintothepost" />Lorem post text ipsum whatever... </p>
    <p>next paragraph in post</p>
    </div>

    I think what I'm needing is a method of moving an element up in its genealogy tree. If I could just get the <img> out of its parent <p> I'd know what to do. Is this possible?

Topic Closed

This topic has been closed to new replies.

About this Topic