WordPress.org

Ready to get started?Download WordPress

Forums

CSS Float moved up inside loop (21 posts)

  1. Lorelle
    Member
    Posted 9 years ago #

    I want to put a container with a list of links from within the post up INTO the Loop area, specifically the content area. Because the Loop template tag that generates the content is the_content() I put the tag to generate the container with the list of links below it, but still in the parent container of the content tag.

    Using CSS, I want to move the container UP so that when the page is generated, the container of links is floated to the right INTO the lower part of the content.

    I've tried position:absolute, position:relative, bottom:-200px, top:500px, and different variations. Oh, I can move the container around, but it doesn't "float". In other words, the content goes right over the top of it.

    So how do I move a container up into the generated post content and make it float within the content?

  2. Root
    Member
    Posted 9 years ago #

    In the absence of a url here is a thought. When using position absolute the parent of the absolute container needs to be position relative. Just a thought. Otherwise put up the url and we can have a look :)

  3. Lorelle
    Member
    Posted 9 years ago #

    Didn't work. The concept can be cured without a link, but if you must have one. The container in question features the story links.

    The parent of the container is not absolute. I tried adding relative to the parent and it didn't work. I do not want to change the parent container to absolute.

  4. Joshua Sigar
    Member
    Posted 9 years ago #

    Edit: Misread your post

  5. Lorelle
    Member
    Posted 9 years ago #

    Thanks for the try. - Oh, noticed you changed your answer. Darn. I thought we were on the right track. I can't be the only one who wants to "shove" content up into the "content". This is really frustrating.

    .post {
    position: relative;
    }

    .rustAutoLinkoffsPost {
    position: absolute;
    top: 250px;
    right: 0;
    }

    Now try it and tell me it works. I might be crazy, but it isn't working with me.

  6. Joshua Sigar
    Member
    Posted 9 years ago #

    Yeah, your code just like mine works, meaning it will pull up that box to content but then I read that you want it to "make it float within the content?"

    Right now you have short sentences at the end of post. If you have long ones, then they will be hidden underneath the .rust box, instead wrapping around the box.

  7. Lorelle
    Member
    Posted 9 years ago #

    Bingo. I know there's a way to do this, but I can't find my notes on it. I hope someone can help.

  8. Root
    Member
    Posted 9 years ago #

    Well a floated element needs to go first in the source order. And it must have its width defined.

  9. stfox38
    Member
    Posted 9 years ago #

    If you mean like this, it's done by creating another sidebar in CSS and floating it right. Then, the content must be adjusted by padding. e.g.

    .content {padding: 0 20% 0 20%; }

    then the right sidebar can be width 20% and it works pretty well.

    I hope this will help.

  10. stfox38
    Member
    Posted 9 years ago #


  11. Lorelle
    Member
    Posted 9 years ago #

    stfox38,
    You've just created another column. I don't want a column. What I need is just like a photo when the content wraps around it.

    Root,
    So if the div is before the_content(), it could be "lowered" into the content itself with CSS and still float?

  12. Lorelle
    Member
    Posted 9 years ago #

    So anyone have an answer on how to move a float UP into the content when it is listed below the_content() tag?

  13. davidchait
    Member
    Posted 9 years ago #

    I don't have my coding box up, so doing this blind.

    I believe there's a "get_the_content" tag, so you can do something like (this is all faked...):

    $thecontent = get_the_content(...);
    $mylinks = parse_my_links($thecontent);
    echo '<div class="mylinks">'.$mylinks.'</div>';
    echo $thecontent;

    then
    .mylinks {float:right; }
    as a start.

    Again, this is off the top of my head.
    -d

  14. davidchait
    Member
    Posted 9 years ago #

    Just as another thought, this is also doable as a plugin that hooks the_content, parses the links, and builds the mylinks div and prepends it before returning the final content block up...

    I also noticed that you have some links with very long text/titles, that are going to really blow... they'll make the box TOO big, so you'll want to make sure you have a max width on the div.

    Also, I have a bunch of stylistic/approach comments to your site. You've got a lot of content, but the font choice/usage, IMHO, doesn't make it very, ummm, 'reader friendly'. Of course, it's always your choice at the end of the day, and I've just got minor quips. ;) If you ever want to discuss further, drop me a line directly at cgcode at chait dot net. Might be some of my plugins could be of help, but also something like the Headlines plugin (I'm also looking at the new image replacement methods myself) that might make for a cleaner look, less pixellated (give you are a photography site! ;) ).

    -d

  15. Lorelle
    Member
    Posted 9 years ago #

    Thanks for the look see, David. I want to "raise the box" with CSS, as I'm so plugin heavy I'm going bonkers as it is. I might blow this technique out as it really doesn't do what I want at all.

    The links that "show" are only the highlighted text and "about fred" isn't much information to "link" to. What I REALLY want, if this was a perfect world, is to have the category's posts show up in a box within the post or at the end of the post, at my choosing. But that isn't going to happen very soon, either, so I live with my dreams.

    Thanks for the evaluation of my site. I'll look again at the font issue. I spent months researching (and continue to do so) to find the most common font, since I have a high overseas readership with folks still using Win95 and 98 with language-enabled yuk. Trying to serve the masses. I'm due for another review, so I'll check again.

    The site is brand new version just up and I'm still tweaking. If you are emphatic about some of your critique comments, you can email me through my site. Thanks.

  16. davidchait
    Member
    Posted 9 years ago #

    floating a div is the only way to get text wrapped around it -- at least so far as I understand! ;)

    And, if you reposition a floated div, it leave a 'hole' where the div was supposed to be, and doesn't wrap anything where you move it to.

    One technique I've seen, if you know the size of the block, is to 'reserve' space with a blank float (nbsp or something) ahead, then position the block when it is ready (and I think you somehow 'hide' the space for the div itself...). I recently saw a wacky technique for having images span the center of a two-column text layout that did something like that. Can't remember what other tricks they needed to do, but that's the gist of it.

    The two-column thing is screaming for 'tricks' -- this isn't. Has an easy solution, via a simple plugin. Let me know if you need help if you want to go that way.

    The alternate approach is what I do for my articles, which is to have the left sidebar have 'tabbed sections' that look like they 'fit' with the article (look at one of my Reviews for a good example, with the multi-page table of contents and linked posts, etc.).

    -d

  17. Lorelle
    Member
    Posted 9 years ago #

    Anyone ever come up with a good CSS solution for this?

  18. Root
    Member
    Posted 9 years ago #

    I have been been really confused by this thread since it got started. By default if anything floats it leaves a gap behind it. If what follows next is less than the width of that gap it will float right up in there. Personally I always float both elements. It shouldnt be a big deal but we may have not understood the question correctly.

  19. dolmarit
    Member
    Posted 9 years ago #

    Hi Lorelle

    I downloaded the source from your index.php changed it in a html file and i also downloaded the css.file
    As far as I understand for the moment you want the menus downbelow the content above the content.
    Your CSS file I already started to change because for now it is unreadable.
    In the coming week I see what i can do but i do not promise anything if ready I will send you a message.

    If i can not find a solution I also let you know.

    If I understand you wrong let me know something.

  20. Lorelle
    Member
    Posted 9 years ago #

    Dolmarit: I appreciate this, but what you grabbed off my site doesn't even closely resemble anything that was on the site when this post started over a month ago. You can skip messing with my stuff and create a test file from any core Theme.

    Basically, the container had a plugin tag in it and must run outside of the link. It pulled links from within the post and displayed them. I didn't like the way the plugin worked, so I abandoned it, but it might work better in the future, so the idea is still good.

    If you look at this article on my site you will see boxes within the content. These are styled within the content and show up where they are.

    I want to put this container at the bottom of the loop but force it to move up into the text of the post like these other boxes.

    I've tried Root's ideas and the others, but they don't work. I've tried positioning absolute, and it won't work; float will but I can't get the "up" and "right" figured out with the wrap. This seems like an easy CSS thing, after all, we can get the sidebar and other parts to be positioned where we want them, why can't I get this container to move up into the content and have it wrap? And I KNOW what I'm doing, I just am missing some part of the puzzle.

    Thanks for taking this on. My brain is fried on it. I was even thinking about asking the folks at positioniseverything.net but I hadn't gotten that far when I restumbled on this post again.

  21. dolmarit
    Member
    Posted 9 years ago #

    Hi Lorelle

    Ok thanks for the quick response.
    Problem is clear now.

    I suggest you should work this out with php.
    Which forces the box inside the text and then a little bit CSS should do the rest.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags