Magazine Style CSS
Click on the image. There's some fun stuff you can do with HTML and CSS. We fiddled with a Magazine Cover look using just two tags: the paragraph and span tag. Yep, that's what we did Saturday night. CSS can be fun, especially the Magazine Style CSS. Full instructions are here.

Can you think of anything to do on a Saturday night that's more entertaining?

Paging PaulKatcher.com

Reusing Images

Have you ever noticed how we're skimpy on the images, the image size? Two reasons. First we want the page to download fast enough so that we can read it. The other reason is that we do things so cheap that our hosting service limits us to 50 MB of storage space. We could increase the 50 MB, but that would mean giving up our original contract for $8.95 per month that includes unlimited file transfers. I don't think any hosting services include "unlimited" anything anymore.

We reuse images and use CSS for visuals. When we need a quality image fix we visit Sugar-n-Spicy where Ilana has full color images, including vintage posters. We spend about three hours a week following the links. Michelle Fierro has a similar style image blog.

We mentioned our flip-flops some time ago so folks are coming here looking for platform flip flops, pink flip-flops, and hey, do you think they have flip flops at cafepress? No, we checked. Darn. Flip flops would be fun. I would buy ebc flip flops. Susan is the flip-flop queen. She has handbags to match her flip flops.

Shirl posts flowers and deer. A peaceful place to visit, complete with honeysuckle that smells good. She has one of those new scratch-n-sniff blogs.

Brendyn is in Singapore staying with his uncle. Check out the pictures of his Uncle's house with a wrap-around pool. Can that really be a house?

Stu posted a photo of his birthday dog Wilma. Stu and Wilma look so much alike that I was tempted to post them side-by-side here. Check out the faces.

Letras Com Garfos (turn your sound down) is a visually pleasing place to visit and today it has sound. Do you ever play sounds or video clips? We do it here. I really don't remember where this image came from but we just used it four times. We changed the border color using this Matted Style Border Gold: Float Left copy-and-paste code.

Your browser only had to load the image one time.

Triple Framed
Bordered Image

Triple Border
Include the width and height of the image in both the img tag and the div that surrounds the image. Both are needed to make the matted frame look. A right-click on the image to view the properties tells us that this image is 110 x 160.

Copy and paste this in your Blog or Web page.

It will look like this.

Note: We centered the image for demonstration only. It will not be centered when you copy it. To center the image use the following code.

It will look like this.

They called him Little Man . . .

I just read a few blogs and saw pictures of fathers. Today is Father's Day. I miss him. We were at a conference nearly two years ago when the call came. Dad was in the hospital. I took the first plane out from California to Florida hoping I would arrive before he died.

"Dad, how are you? "
"Better now that you are here."

And so began nearly two months of sitting at my father's side holding his hand in the comfort of his living room. His last words were "Hi baby", spoken softly with a gentle smile.

During those two months I learned about who he was before he was my father. The jockey they called Little Man. Uncle Nap filled in the details that Dad left out.

It's hard when a parent is leaving to know when to leave their side. When to return to work. When to go home. And so I stayed at a little Motel on the beach visiting him every day all day until he was ready to go. There was nothing left unsaid. We held hands every day and talked. When I brought him some medicine he asked what it was.

"It's for the pain Dad"
"You take it baby, you need it more than I do"

The perfect patient, the perfect Dad. We had time for our goodbyes and time to revisit the past that is filled with precious memories. I miss my Dad, the jockey they called Little Man.

Easy Inline Pullquote
It's as simple as this . . .

<p style="float:right;width:30%;padding:8px; border:1px solid black;font-size:smaller;margin:10px; background-color:whitesmoke;"> Put your text here </p>

That's the code for the first pullquote here. Not much to it.

Inline Pull Quotes
You don't have to define the pullquotes in the style sheet. The code is short and doesn't take the many keystrokes. It's just another paragraph in CSS.

Pullquotes or sidebar style text blocks are easy to render with CSS Inline Style. You don't have to define the pull quotes in the style sheet. The code is short and doesn't take that many keystrokes. It's just another paragraph in CSS.

However, if you plan to use pullquotes repeatedly throughout your writings then defining your style of pullquotes in the External Style Sheet or in the HEAD section of your page may make sense. We don't mind typing the few extra keystrokes to get the pull-quote effect in CSS.

Background-color:whitesmoke is pleasant enough but being able to define the color on-the-fly is another reason to use Inline Style. We've changed the color of this particular pullquote several times by plugging in another color name.

Font-size:smaller; will always make our pullquote text a little smaller than our default text size. But sometimes we want the sidebar style or pullquote text to be larger. It depends on what we are highlighting or lowlighting.

...it depends on what we are highlighting or lowlighting...

Font-size:1.5em; will always make our pullquote text size proportionately larger than our default text size. And that might be what we want. Really big text. Again, it depends on what we are highlighting or lowlighting. Do you think lowlighting is a word? It makes sense. If it isn't a word then it should be a word. Actually, you can tell that we aren't sure whether to use the word pullquote or "pull quote" so we used both. The typing here is simply to fill up space to show off the use of a pullquote or sidebar style text.

First Pull Quote

Copy and paste this in your Blog or Web page.

Second Pull Quote

Copy and paste this in your Blog or Web page.

Where you insert the paragraph is up to you. Start by putting the pullquote code in as the first paragraph. Then adjust as needed.

How Do You
Center a Bordered Box?

Let the browser automatically calculate the left margin and the right margin with margin:0px auto;

Copy and paste this in your blog or Web page.

It will look like this.

There's more about centering boxes here.

What Did Dave Winer Do?

Would someone tell me why this old Mandarin page is getting a gazillion hits? They are coming in through Google probably from a link on a blog like this - about Dave Winer. I see a hint at Stu's place.

Whilst 3142 bloggers are left with the trauma of having the rug suddenly pulled from right under their feet (courtesy Dave Winer)...
Stu

Get FireFox Now

Firefox 0.9 is the award winning preview of Mozilla's next generation browser.

Gary Turner and Susan orinally convinced us to try Mozilla Firefox and j-mo reminded us yesterday to install the latest version.

It's the Tabbed Browsing that sells you right away. The tabbing feature creates an illusion of speed where you can view more than one web page in a single window. Press CTRL when you click on a link and it opens a new tab. The other pages you are viewing are still there, each under its own tab. Great for browsing multiple blogs at the same time. And instead of selecting the option to open one page as a default home page when you fire up your browser, you can open all of the pages (tabs) that you want to automatically load and the then select the Tools option "use Current Pages".

Mozilla Firefox is free, installs in seconds, and has a popup blocker.

Portrait Illustration Maker

We found this link to the Portrait Illustration Maker at ClothedInJoy. Make your own portrait then right-click and save the .gif file when you are done.

Best of the Blogs

post deleted due to major mistake here

"All the world's a stage, And all the men and women merely players; They have their exits and their entrances, And one man in his time plays many parts, ..."

As You Like It, II.vii.

Time Magazine Template
The Quick Cheat

The Time Magazine Template is a fun one to play with. Copy and paste the code then change the title and insert your own image. Or, keep the image that is automatically included. You can probably improve it.

The dimensions of the image we used here are 50 x 50. There are more squares in the Gallery of Squares and More Squares.

Copy and Paste this code in your Blog or Web Page.

It will look like this.

TIME YOUR TITLE Your Subtitle MORE HERE ......... .....

Monday, Again

Skip down to the short version copy-and-paste

Copy and paste this in your Blog or Web page.

That's the code in its entirity.

If your page already has a background color you would remove the first div that gives this example a background color. The copy-and-paste code above with the beige background will look like this.

The Short Version

Short Version
The example uses green for text and white for the background of the pullquote. This is all you need for the full effect on your page with your background color. There's no need to change either color, especially the white. Note that you will not actually see the color white, it is the color that we are using for the blend. The text color can be changed from green to any other color but try leaving the background white and let us know how it works for you.

Copy and paste this in your Blog or Web page.

<div style="width:350px;"> <div style="color:green;width:150px;background:white;float:right;filter:alpha(opacity=20);-moz-opacity:.2;opacity:.2;margin:10px;font-family:Verdana, Arial, Helvetica;font-size: 28px;line-height:26px;text-align:right;"> ...if our page <small> is beige then the </small> <strong> pullquote area that is beige</strong> will be blended with<strong>20% white...</strong> <br> </div> </div> <!-- now enter the text for the left side --> YOUR TEXT GOES HERE

It will look something like this.

YOUR TEXT GOES HERE

Nigritude Ultramarine

Nigritude ultramarine is a search engine contest. One of those games people play.

Want to increase your traffic? If you want to increase the traffic to your site it's easy. You are guaranteed to get 100,000 - 850,000 hits per day if you host a referrer script. The code is open source and available at Stephen Downes Page. He had to turn it off once it hit 850,000 per day. Ouch.

The problem is, can you handle the traffic? Do you really want traffic? If you aren't selling anything the answer is probably "no".

Google
Now, is there anyone out there who needs a mention to get Googled up a bit? We'll play along. Leave a note in the comments.

Note: Daisy wasn't looking for a link, she posted her comment before we finished this post. Sorry about that Daisy

Flip Flop Friday
What Color are Your Flip Flops?

Q: I just also took note from your May 30 'Little Squares' post, that you put the IMGs in their own DIV. What does that buy you? I want to understand more of this stuff.

A:The div is a container for the three images. I used it to center the images. That's all. I just did it again with the flipflops. One could use the paragraph tag or other block level tags to center the three squares but I like the way the <div align="center"> behaves. There's more detail here.

<div align="center">images go here...</div>

So the three images (I do things in odd numbers, three is good) are centered now but I couldn't find a color I liked for the other images so I used a transparent .gif and put a border around it.

Do you ever use the transparent gif as a spacer, a shim? It's an old cheat but works when you need it. We call ours spacer.gif (right click to download). It's inside of the border.

It's usually a 1 pixel x 1 pixel little transparent .gif that you can use to put in some whitespace (or whatever color your background is). We defined it with a width and height the same as the image but it's used more often for that little space you need and just can't get with code. Is that cheating? Yes. It's cheating to use a cookbook to cook too but let's not go there.

This is an Alexa and Amazon thing I just clicked on (no, we don't sell anything). But, is this how they do that? Hmmm.

I like the symbol in the Netster ® site coming in on the referrer script. The title tag in the head section looks like this <title>Netster ®</title>

So what color are your flip flops?

CSS Float Left
Using CSS Inline Style
Float Image and Text Caption Left

Goodrich Wins

Float Image and Text Left
We are floating the picture to the left by adding style float:left to the paragraph tag . We need to tell the browser how wide to make the paragraph that will contain the image and the text caption on the left. Since our image is 100 pixels wide we guess and make the paragraph 135 pixels wide so that we have some extra space.

Whitespace We make the paragraph 130 pixels wide to give us some whitespace between the image and the text that we floated. The text that we are typing in after the first paragraph will automatically align to the right. This technique is simple, just some style added to the paragraph tag. We added extra words here so that the full effect displays.

Copy and paste (or type) this in your Blog or Web page.

It will look like this (image included).

Goodrich Wins

YOUR TEXT GOES HERE The text that you type here will automatically align to the right. You can type as much as you want. The more you type the better it looks.