WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Only first paragraph of text wraps around pic (5 posts)

  1. mpjohnso
    Member
    Posted 6 years ago #

    When I attempt to wrap text around a picture here, only the first paragraph of text wraps around the picture with the following paragraphs coming below the picture. I've set the alignment to "left" for the picture. If anyone can help here, I'm completely stumped!

    Thanks!

  2. StrangeAttractor
    Member
    Posted 6 years ago #

    You need to float the image to the left. That's something governed by the CSS file, although you can also use embedded styles (hardcoded into a particular entry) if you are only planning to use this effect once.

    Google CSS and float. Be warned that a float can have unexpected results -- what it does is take the element (image in this case) out of the normal left-to-right "flow" and pushes it all the way to the right or left. But that's how people make text wrap around images.

  3. mpjohnso
    Member
    Posted 6 years ago #

    Strange,

    I'm a little bit of a noob here so could you explain a little further? Do I need to edit something then in the main css stylesheet editor under "edit theme?" I want this to wrap anytime i enter a pic in any post on the site.

  4. StrangeAttractor
    Member
    Posted 6 years ago #

    Actually, taking another look at your site, it looks like the image is already set to float left inside of a paragraph. So if the paragraph is short, like the one you currently have (1 line), you will only seen one line floating there and the next paragraph below it. Try making a longer first paragraph and you should see that it wraps.

    The reason why the next paragraph stays below the image instead of wrapping is because your stylesheet (~line 161) has this:

    .entry p {clear:both}

    Which tells the paragraph to clear floats. If you were to change that line to

    .entry p {
    clear: none;
    }

    then all the paragraphs would wrap around the float. But this may have some unintended consequences on layout on other pages -- not sure without experimenting. (You can also just stick the above snippet at the very end of your stylesheet -- it will override the earlier specification, and you will then be able to find it easily if you want to remove it.)

    That's as far as I can go without spending a lot of time of this. If you edit your stylesheet, make sure to make a backup first. The safer approach is to comment out the old code (wrap old code with /* [...OLD CODE HERE...] */ ) and put your new code underneath, so that you can see what you changed.

    It sounds like you are new to CSS. So here's my advice on learning how to modify and tweak the CSS of your theme:

    1) get a decent HTML/CSS editor. There are lots of free ones out there. Personally I like Dreamweaver (expensive), but that's because I'm used to it and like certain features of the editor. Do NOT use Frontpage. Also, I don't recommend using the WP-admin panel to directly edit files.

    2) backup your whole theme, so that you can experiment without worrying.

    3) get a free FTP client (Filezilla recommended) and use that to upload and download files to your server.

    4) Get the free Firefox plugin "Web Developer" which has many tools that are useful for testing and analyzing CSS layout and styling.

    5) start learning basic CSS. A great place to start is the Westciv complete css guide -- the free online tutorials will give you a thorough grounding.

    CSS has a bit of a learning curve, esp. with regard to layout ("positioning"), but tweaking an existing theme is a great way to learn as you go.

  5. mpjohnso
    Member
    Posted 6 years ago #

    Wow Strange! Thanks for all of your help! It looks like it has worked, if you want, check the original link to see it now fixed. Thank you for all of your suggestions on helping me learn more about CSS. I have basic html knowledge and am learning more from kind people like YOU every day!

    Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic