gee_elsi (gee_elsi) wrote,

CSS Lesson Learned

screen shot from yesterday's original postWhen I got up this morning and took a look at yesterday's post, I was struck by how awkward it looked with the text lined up around the square edge of the image. Yes, in reality, the image being displayed on the web page was a square, but the eyes only see the colored part. In print layout, they'd manage to slip the text over the transparent parts of the image, but in basic HTML, there it sat all lined up instead.

I was pretty sure that it was possible to convince text to flow more fluidly around the perceived edges of an image, but didn't know exactly what to do to get it to work that way. So, I turned to Google, searching on “css text around picture”—realizing already that the only way to push things around on the page was to use Cascading Style Sheets or CSS. The fourth result in the hit list was for CSS Image Text Wrap Tutorial and it was a terrific resource. I had to modify the “formula” that the tutorial used since I needed for my solution to fit within the full-page framework provided by LiveJournal's blogging engine.

screen shot from yesterday's modified post If you don't want to scroll back to yesterday's post, here's a quick screen shot of the modified layout.

This tutorial places the image as a background in a div. It took me a couple of tries to get my markup (HTML plus in-line CSS style commands) to position the image, the “sandbag” divs, and the text into a common block layering one on top of the other. I also had to hunt around for the color code for the background that appears beneath each post. But, I finally found everything I needed and figured it out. I think it turned out very well.

Avocado sprouts

On another topic ...

While preparing lunch today, hubby and I split a small avocado. I sliced my half and spread it over my salad while he ate his slices alongside the left-over chicken fajita and rice that we brought home from Ernesto's last night. As I was gathering up the rind and seed, he announced that he'd like to try to grow an avocado tree. So, after lunch we put toothpicks into the sides of the avocado seed, placed it into a small glass of water, and set the glass in the kitchen window. While looking up information on sprouting and transplanting the seed into the yard, I realized that I had put the seed into the water upside down. So I quickly went back into the kitchen and flipped the avocado seed over so that the broad end was sitting in the water. Now it's supposed to be just a matter of time—up to 2 or 3 weeks—until the seed sprouts out roots at the bottom and a stem/shoot out the top. If the thing survives and doesn't rot, I'll even post a picture or two in a couple of weeks.


  • My tweets

    Thu, 10:32: Twitter tells me that I signed up 13 years ago. I don’t post often, but I certainly read various posts. #MyTwitterAnniversary

  • My tweets

    Mon, 09:43: And I’m waiting until kids return to schools.

  • My tweets

    Mon, 15:14: I'm starting this book tomorrow. The blurb is appealing and I'm looking forward to hearing other peoples' opinions……

  • Post a new comment


    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.