Hurricane News
While the Gulf Coast braces for Hurricane Katrina we look around the Web for the best news site. Yahoo has this hurricane tracker map.
The use of a centered image with wrapping text is common in magazine layout so why not put it in a Blog or Web page? Our image is 160 pixels wide. We defined our leftpic as half of the width - 80 pixels wide. The rightpic is 80 pixels wide. The image is 239 pixels high so we type in enough text to make the text wrap around the bottom of the photograph.
Katrina hit the Mississippi Gulf Coast at 160 Mph. Katrina is still a hurricane and ripping through the Gulf Coast including the Panhandle of Florida. Fort Walton Beach is getting gusts and erosion causing the Gulf to wash on to the highway. One good source for Hurricane news is is Weather.com. Katrina is throwing wind and rain throughout Florida with flooding expected. Actually, I just made that part up because we need more text here and hurricanes always cause flooding. News is still sketchy.
For this post we included the CSS style in the post itself. Why? The style sheet is getting full. It's big enough now that it can slow down the load time significantly. We went to the copy-and-paste code in the February Archive to copy our code and replaced the picture with another picture that is the samd width and height.
There's a little trick in the CSS here that helps when composing a new layout. We defined a class named showme that allows us to turn the borders on. It's helpful with position sensitive code to display the borders while testing. To turn the borders on we change the color of showme to any color that will display. To turn the borders off we change the color back to either transparent or the color of the background.
Copy and paste this in your Blog or Web page.
It will look like this.
Hurricane News
While the Gulf Coast braces for Hurricane Katrina we look around the Web for the best news site. Yahoo has this hurricane tracker map.
The use of a centered image with wrapping text is common in magazine layout so why not put it in a Blog or Web page? Our image is 160 pixels wide. We defined our leftpic as half of the width - 80 pixels wide. The rightpic is 80 pixels wide. The image is 239 pixels high so we type in enough text to make the text wrap around the bottom of the photograph.
Katrina hit the Mississippi Gulf Coast at 160 Mph. Katrina is still a hurricane and ripping through the Gulf Coast including the Panhandle of Florida. Fort Walton Beach is getting gusts and erosion causing the Gulf to wash on to the highway. One good source for Hurricane news is is Weather.com. Katrina is throwing wind and rain throughout Florida with flooding expected. Actually, I just made that part up because we need more text here and hurricanes always cause flooding. News is still sketchy.
For this post we included the CSS style in the post itself. Why? The style sheet is getting full. It's big enough now that it can slow down the load time significantly. We went to the copy-and-paste code in the February Archive to copy our code and replaced the picture with another picture that is the samd width and height.
There's a little trick in the CSS here that helps when composing a new layout. We defined a class named showme that allows us to turn the borders on. It's helpful with position sensitive code to display the borders while testing. To turn the borders on we change the color of showme to any color that will display. To turn the borders off we change the color back to either transparent or the color of the background.
Hurricane Katrina Updates:
160 x 239 Pixel Images
We made these if you don't have any spare 160 x 239 size images.
Copy and paste the code above and replace katrina.jpg
with any image that is 160x239. Hover over the image to see the
name or right-click to save the picture. Let us see what you do with it.
Keb' Mo'
Lullaby Baby Blues
Goodnight baby blue
close your eyes baby blue
the moonlit sky watches over you so close your eyes baby blue...
Lullaby baby blues
Time to kick off your walkin' shoes
And hug the pillow on your bed
And lay down your sleepy head
Hush now no need to talk
Hear the ticking of the clock
Stars that twinkle, stars that shine
Dream and you'll have wings to fly
Goodnight baby blue
Close your eyes baby blue
The moonlit sky watches over you
So close your eyes baby blue
Copy and paste this in your Blog or Web page.
It will look something like this.
Keb' Mo'
Lullaby Baby Blues
Goodnight baby blue
close your eyes babyblue
The moonlit sky watches over you so close your eyes baby blue...
Lullaby baby blues
Time to kick off your walkin' shoes
And hug the pillow on your bed
And lay down your sleepy head
Hush now no need to talk
Hear the ticking of the clock
Stars that twinkle, stars that shine
Dream and you'll have wings to fly
Goodnight baby blue
Close your eyes baby blue
The moonlit sky watches over you
So close your eyes baby blue
Polaroid Picture Borders
Copy and paste this in your Blog or Web page.
It will look like this.
Inline Polaroid Border with Caption
Noded posts photographs with a Polaroid style border. We used a square image sized the same as a Polaroid picture but any size will work.
CSS Polaroid Border with Caption
For one-time or occasional use the copy and paste inline CSS works fine.
If you want to reuse the Polaroid effect you can add a style
to your external style sheet or in the HEAD section
of your page.
We used an image that is the same size as a Polaroid, but if you look at Noded you will see that the borders work well on varying image sizes. The trick is to use negative spacing to move the text Saturday in the Garden up inside the border.
Where do you put the CSS?
If you are using a template look for the <style type="text/css"> and put the code below it. We added a class named polaroid to the style sheet for easy reference. The style looks something like this.
CSS Style
To reference polaroid and polaroidtext type this in your Blog or Web page.
Copy and paste this in your Blog or Web page.
It will look like this.
Now we're going out into the garden to lounge on this sunny Saturday afternoon.
Mandarin Quiji Board
