?

Log in

No account? Create an account

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.

Comments

Oh I lik that new code.. *impressed*

The avacado seed - I thought there had to be two seeds one of each "gender" to make it grow / fertilize.
If you want your avocado trees to bear fruit, you need to have at least two trees of different genders. But to just get a tree to grow, you can sprout the seed and then plant it in a pot or the yard.
AH! *goes to find out how to tell tree gender... *

Thanks! =)