Mandarin Logo
MainBlogFAQsBox TipsText TricksColor ChartFree GalleryCSS Opacity
TWO CENTS CURRENT ISSUE 2006 WEST SACRAMENTO CALIFORNIA

Today is a Holiday in California

Cesar Chavez Still Inspires Marchers

Today is a holiday for California state workers, a day to honor Cesar Chavez who founded the National Farm Workers Association in 1962. He is credited with improving wages and working conditions for thousands of California Latinos. Chavez died in April of 1993. Our cousin, Al Rojas, is a former top aide to Cesar Chavez and speaks at commemorations of the life of the United Farm Workers leader. Along with Chavez he helped the Latino and immigrant people who work in the nation's fields and orchards. Today he is featured in the Sacramento Bee article Cesar Chavez Still Inspires Marchers


Tomato
To honor Cesar Chavez we are using the color Tomato and the nice, but not always rendered, Papyrus font.

YOUR TEXT HERE

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

It will look like this.

YOUR TEXT HERE

Is Cesar Chavez Day observed in your state? Do you have a holiday that is unique to your area?

Wednesday, March 31, 2004     Permalink   EMAIL  

Reusing Fabric: Images and Borders

I just came back from visiting Joel where he frames just about everything in the color named gold. And I'm beginning to think that even the piece of fabric will look good bordered in gold. Ha, and it does. But this post isn't really about gold or the fabric. It's about reusing images. One image (our scanned fabric) that is 11K is worth repeating. It only costs the first time we load it. Each display after the first costs little, nearly nothing in bandwidth. It's already in cache (pronounced the same as cash). A cache strategy for images still makes sense on the Web and in Blogworld where there are still folks on dialup. And we all want fast-loading pages.

Borders made with code are cheap - HTML and CSS takes very little time to load. Reusing images and applying borders is a way to make your page load faster.

If you plan a post for the first day of the month like Bryk does the image reuse starts making even more sense. Google tends to send visitors to archived pages. And since we archive monthly, reusing the same image during the month will make that full month page for March load even faster.

CSS Border: 1 pixel solid gold

A simple border only needs the style="border:1px solid gold;" added to the IMG tag.

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

It will look like this.

CSS Border: 5 pixel solid gold

A simple border only needs the style="border:5px solid gold;" added to the IMG tag.

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

It will look like this.

Dotted Border 2 pixel gold

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

It will look like this.

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

Dashed Border 1 pixel gold

It will look like this.

Matted Style Border gold

This image with a frame and matte is coded for floating an image to the left with padding of 10 pixels between the image and the text. You can copy the code (image included) and use it as it is. Or copy the code and then insert the name of your image and the width and height of your image. The rest of the code doesn't need to be changed.


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

It will look like this.

YOUR TEXT GOES HERE

There's more about CSS Borders and Mattes with copy and paste centered borders using white mattes and other colors. This example uses a span with padding to put the gold around the image and then a solid black border around the image.

Tuesday, March 30, 2004     Permalink   EMAIL  

Photo of Michelle Goodrich BY MICHELLE GOODRICH
(April 2004)
Is your PC running slow? It needs a little help sometimes. With routine preventive maintenance you can keep your machine running clean. Here's a step-by-step approach to keep your PC in tune - Maintaining Your Own PC.

I wrote this for my friend who bought his first PC a few months ago. He's technical but more so in the mainframe arena. His questions about how to make his PC run faster and better made me realize that some people don't know the basics (and if I've left anything out please let me know).

Our PC is more than three years old so I ordered a replacement yesterday. It gets pounded full time and the hard drive is beyond repair. The CD drive was clobbered when Sammy put a floppy disk in it and successfully shut it. It's humming with every start of Adobe. Overworked and tired. Or is that me? Either way, the new PC will be here this week (1 Gig of RAM!) and I took the week off work so we'll both get a rest.

Sunday, March 28, 2004     Permalink   EMAIL  

CSS BOXES and BORDERED IMAGES (Part 2)

From the Desk of Gary Williams

Today's Meg lesson is about using <DIV> frames for an image. Over at Mandarin Design, Meg shows us how and then comments that the image looks better with a white background, despite all the framing work.

I think the key is to lighten up the background. Here's the Mandarin original and then two with my suggestion:


Andy's Barn

We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.



Andy's Barn

We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.



Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.

If you right-click and look at the source, you can see that I've made the background the same tone, but lighter in color. Or you can go over to Mandarin and look at Meg's code,which is the same as what I used here and just replace the background colors with the ones I show here:

The original background is taken from the base of the picture:
#8BB4AE.

The middle one is lighter, by one tick:
#9BC4BE.

The lowest one is better, I think:
#BBE4DE.

Notice that I'm keeping the overall grey-tone the same by increasing all three parts of the RGB (red-green-blue):


8B to 9B to BB
B4 to C4 to E4
AE to BE to DE

This way you can see that the colors are related, but lighter, and that makes the image and the background relate (IMHO...).

End of Gary's Post

Making Hexadecimal Colors as Clear as Mud

This is #8BB4AE
This is #F8E78B
This is #D26347
This is #7E4F33
This is #FFC9B4
This is #C0D4AF

We can see that Gary went from the original #8BB4AE to lighter #9BC4BE and then even lighter #BBE4DE , increasing each hexadecimal RGB (red, green, blue) color column.


#8BB4AE
#9BC4BE
#BBE4DE

Colors are expessed in hexadecimal, a base-16 number system which means that it is made up of 16 unique symbols.


Hexadecimal Numbers
0
1
2
3
4
5
6
7
8
9
Hexadecimal Letters
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15

Hexadecimal F is equal to the decimal number 15 (FF is 255). So, when Gary is increasing the first column from 8B, to 9B, and then to BB he is increasing the value of the RED column. In HTML the color white is #FFFFFF while black is #000000 (see the full hexadecimal color chart).


#8BB4AE
#9BC4BE
#BBE4DE
#CBF4EE

In order to lighten the last color that Gary used ( BBE4DE ) we are increasing each color column. The result is #CBF4EE. We're calculating what the color #CBF4EE will look like. Let's see if this works.

Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.

OK. I can hang with that color. Thanks Gary. I'm not color intuitive so the math example works well for me. For everyone else, here's a color chart that uses color names.


CSS BOXES and BORDERED IMAGES

Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.

Sampling Colors

We used Adobe to sample colors in the fabric.

This is #8BB4AE
This is #F8E78B
This is #D26347
This is #7E4F33
This is #FFC9B4
This is #C0D4AF

Only you can hear the sound of one hand clapping. This is just spacer text. Some white space.

Centered Bordered Box
Background Color #C0D4AF

This is a centered bordered box. The background color is hexadecimal color C0D4AF. The box has a defined width of 300 pixels. The padding of 5 pixels is added so that the text doesn't flush up to the border. The border color is black.



The CSS Style code for a simple centered bordered box is made with a DIV. Copy and paste this in your Blog or Web page.

It will look like this.

This is a centered bordered box. The background color is hexadecimal color C0D4AF. The box has a defined width of 300 pixels. The padding of 5 pixels is added so that the text doesn't flush up to the border. The border color is black.

Only you can hear the sound of one hand clapping. This is just spacer text. Some white space.

Centered Bordered Box with Bordered Image

Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.

The CSS Style code for a centered bordered box with an image inside is made with a DIV and a nested SPAN for bordering and floating the image to the left of the text. Copy and paste this in your Blog or Web page.

It will look like this (image included).


Andy's Barn
We went back to Andy's barn and found this fabric. Andy went to a rest home a few months ago and the old farm house was abandoned. The developers are cleaning out generations of "trash". We found some fabric and a hand-made doll that was in the room where Andy's mother used to live.


You can replace our fabric image, change the border colors and the background colors. We had a hard time deciding on the right background color for the fabric. The walls where the fabric curtains were hanging were wood.


End of CSS Boxes and Bordered Images
Friday, March 26, 2004     Permalink   EMAIL  

CSS Grab Bag

Decorative images.Decorative images.Decorative images.

Change Background Color

Change the background color to yellow for a portion of the text.

Copy and paste this in your Blog or Web page.

It will look like this.

Change the background color to yellow for a portion of the text.

Note: Code corrected Thursday. There was a stray <. Thank you Daisy for spotting this one.

Decorative images.

Make the Background an Image

Change the background to an image. You can continue to type and see how it looks when your image repeats.

Copy and paste this in your Blog or Web page.

It will look like this.

Change the background to an image. You can continue to type and see how it looks when your image repeats.

Decorative images.

Border Around Text

Put a border around the text

Copy and paste this in your Blog or Web page.

It will look like this.

Put a border around the text
Decorative images.

Make Text Brown

Make the text Brown

Copy and paste this in your Blog or Web page.

It will look like this.

Make the text Brown
Decorative images.

Type in Italic Bold Font

Type in italic bold font

Copy and paste this in your Blog or Web page.

It will look like this.

Type in italic bold font
Decorative images.

Make Font Size Bigger

Make the font size bigger

Copy and paste this in your Blog or Web page.

It will look like this.

Make the font size bigger
Decorative images.

Change the Font Family

Change the font family

Copy and paste this in your Blog or Web page.

It will look like this.

Change the font family
Decorative images.

Type in Italic Font

Type in italic font

Copy and paste this in your Blog or Web page.

It will look like this.

Type in italic font
Decorative images.

Change Text to Small Caps

Type in small caps

Copy and paste this in your Blog or Web page.

It will look like this.

Type in small caps
Decorative images.

Make Text Bold

Make the text bold

Copy and paste this in your Blog or Web page.

It will look like this.

Make the text bold
Decorative images.

Overline on a Link or Plain Text

put an overline on a link or plain text

Copy and paste this in your Blog or Web page.

It will look like this.

put an overline on a link

Change the Letter Spacing

Change the letter spacing

Copy and paste this in your Blog or Web page.

It will look like this.

Change the letter spacing

More Style? See W3.ORG STYLES

Decorative images.Decorative images.Decorative images.
End of CSS Grab Bag
Wednesday, March 24, 2004     Permalink   EMAIL  

Referrer Script
Stephen Downes. He's not just a referrer script. Check out the articles. Easy to read technical treasures.

Good News Update:
If you haven't changed your Stephen Downe's referrer script code then you don't need to do so. The code will still work. Stephen set it up so that it automatically executes the version of his script running at TrueFresco.

The Stephen Downes's Referrer Script is done. Over and out. Thank you Stephen for letting all of us use your script and your server. Also, thank you for answering our questions.


Is there a Replacement?

BlogTricks has a Track Your Referrers with Link Feedback service. The BlogTricks version is "quick, easy and free" .

Script Monitoring
If we notice any problems with page load time or if any customizations outside of the script are needed we will put them on the Mandarin Design: Styling the Referrer Script page. The Blogtricks script appears to be fully customizable and took only a few minutes to install. There is a $10 fee to remove advertisments.

Truefresco.org works like the Stephen Downes's Referrer Script (because it is the old Stephen Downes's Referrer Script). Just copy and paste one line of code. The one line of code looks like this:

Colin is running the TrueFresco version.

letrascomgarfos.net appears to be letting folks run a script adapted from Stephen Downes.

Still, if you find another referrer-type script let us know. If we all use the same script we will put a heavy load on the server. Actually, TrueFresco appears to be down right now. It may already be overloaded.

Tuesday, March 23, 2004     Permalink   EMAIL  

Cheap Tricks

A machine is only as secure as the administrator is trustworthy.
~ Ken Camp IpAdventures
image from tack-o-rama

It's Sunday night and I'm dreading tomorrow. The application I'm working on is too secure even for an Intranet. It conveniently displays the configuration for our entire network that consists of well over 100,000 end-user devices. That's about all I can say without getting shot or having to shoot you.

So you want my job, eh?,

The last application I developed for the Internet was penetrated by our high-paid security staff and consultants. They pounded their chests, made copies of the password files distributing them throughout the department, and reported to the director that they had found a flaw.

How did they get in?

How did they gain access? Only two people had maximum authority on this sensitive system, me and one person in our Internet group. That person gave the security consultants the max authority userid and password. That gave them the name of a program that could be executed via the Internet if you had a valid max authority userid and password and had studied the system and learned the name of a particular program. Sitting at the server where the application ran they were able to penetrate.

Big whoop

Big whoop. Their job is to find holes and the hole here was a person, not the application. But, they were able to justify their existence by finding this security "problem".

So you want my job, eh?,

The impossible project that I"m working on right now will be completed in the next month or two. It will be released with a recommendation that it not be implemented due to security concerns. That's about all I can do at this point. We are literally surrounded by security staff. Only recently did I learn just how many people make up that group. No wonder they had to find an Internet application where they had to cheat to declare some success. There's no way I can protect the current application from them. They can look over the cubicle wall to watch me get in and then duplicate it. They can run software that I'm not detecting to pick up my keystrokes.

A machine is only as secure as the administrator is trustworthy.
~ Ken Camp IpAdventures
image from tack-o-rama

Security? I give up.


Steal this image! The image is from Tack-O-Rama where images are 100% free. We added a touch of color and made the image transparent so that we can apply the glow filter or shadow filter next time we use it.
Sunday, March 21, 2004     Permalink   EMAIL  

FORMULAS 1GRAND PRIX
du Canada 2005

The Red Car is Orange

The Red Car is orange. The red car we see on TV or in this photo is orange when you see it live. Very orange. Why? It's a camera cheat. The TV will pick it up as a vibrant red. The same is true on the Web. Colors vary on each computer screen and orange is one of those colors that may look nearly gold on one display and red on another. It depends on which orange you are trying to render.

CSS Text Overlay
The CSS Text Overlay on the image or on text can be a powerful technique. The Two-Color Headline uses the SPAN. The copy-and-paste code is here.

The Red Car is Orange

Saturday, March 20, 2004     Permalink   EMAIL  

where we blog
Family Bloggers

This is HARSA DIPTANALA, A STUDENT of 3rd GRADE at SD PEMBANGUNAN JAYA. The blog is written in Bahasa. Nice pictures and layout. Michael O'Connor Clarke. He blogs, dad blogs, son blogs. This is HARSA DIPTANALA, A STUDENT of 3rd GRADE at SD PEMBANGUNAN JAYA. The blog is written in Bahasa. Nice pictures and layout. Rieke blogs and her son Dipta blogs. Dipta blogs in Bahasa while Rieke blogs in English. Indonesia.ARJ  Andrea James blogs and her father Stephen James blogs. He's a great story teller. Why is this image named Wiggin? Am I using the correct icon here? Doh.This is HARSA DIPTANALA, A STUDENT of 3rd GRADE at SD PEMBANGUNAN JAYA. The blog is written in Bahasa. Nice pictures and layout. AKMA blogs. Son blogs.Susan of EasyBakeOven. A top blogger. A-list quality, C-list attitude.  A must read and view place. She posts melting pics and words of wisdom.next...next...next...Family Bloggers: Jeneane, George and Jenna blogGeorge Sessum, still worth quoting. Updates are getting more frequent. Leslie grlinabox who now has a face. She is getting her own dot.com name soon. next...next...

Three degrees of Blog
Michael O'Conner Clarke links to Joe Blog, his father's blog. He also links to Charlie's Den, a home for some of Michael's oldest son's first stories and drawings.

More family Blogs
Rieke's Blog from Indonesia is here and her son Dipta has a cool kid blog that we link to here. Rieke blogs in English while Dipta blogs in Bahasa.

"The most important thing a father can do for his children is to love their mother."
- from Rieke's writings

Andrea James (artist and geek) links to Lunchmoney, a blog by her father Steven James. On the eleventh day, of the eleventh month, Stephen James offered us the memory of a fallen soldier: Cleveland Jackson.

LA's son blogs at Threeks. He visits us now and then.

Otto blogs here while her mother Sherle blogs here.

The Sessums. Wow. We nearly forgot the Sessum family. We found George first (most find Jeneane first) and then Jeneane and sweet Jenna.

Susan's sister blogs at dobber.

There's more. Elaine of Kalilily and her son The One True b!X

More?
Friday, March 19, 2004     Permalink   EMAIL  

Easy CSS Pullquotes

I was reading Newsweek yesterday, an article about The Apprentice and the now infamous words "You're Fired!". There's not much to read in Orthopedics so I carried the magazine to x-ray, Ortho1, Ortho2, and then took it home. I'll take a stack of magazines in to replace that one on the next visit.

TRUMP ON HIS MOMENT
" This is the high point of my career. But I never viewed myself as having much of a low point "

The March 2004 issue has the finest pullquotes I've seen. The pullquotes pulled the reader in, pulled me in. Pullquotes highlight the best or most seductive part of the article and make us want to read it. We can't match the style the print magazine used without graphics but we can come close using CSS Styled text.

I'm starting the style using the background color gold but the color that looks more gold, or a classier gold is #CCCD94. It may not look gold in every browser but it's a good neutral color.

Define the Pullquote: CSS Style

1. Add this to your external style sheet or add it to the HEAD section of your page (in your template).


.pullquote 
{width: 145px;
background:gold;
color:black;
float: right;
border:1px solid maroon;
font-weight:bold;
line-height:140%;
padding:5px;
margin-left:5px}

2. Use the pullquote you defined in your Blog or Web page like this.

<p class="pullquote">
This is your pullquote. 
</p>

3. Copy and paste this in your Blog or Web page.

It will look like this.

Your post that contains way too much undecorated text goes here. The exact placement of the pullquote is up to you

TRUMP ON HIS MOMENT
" This is the high point of my career. But I never viewed myself as having much of a low point "

But, you will want to make sure that you have typed in a long enough post that actually needs some pullquotes to make it more interesting. So I'm just typing here so that you can see about where you might want to put the pullquote. To position the pullquote in the right place is up to you. You may have to fiddle with it and see how it looks. Or, you might want to define your pullquote to be a different width. It does need to be prefaced with a lot of text and followed by enough text that it looks good. Ours was overlapping without enough text so we are just rambling here.

You need a lot of text before and after the pullquote. Try our example for testing. It works here. Our style sheet looks like this style1.css.

The Apprentice has a poll that asks "What is your favorite Apprentice moment so far?". Our answer was the most popular.


CSS Tip: Styling Lists With CSS

We like the way Larisa colors the code (not the use of the font tag in displaying the CSS code, but the way it displays).

<style type="text/css">
.colorList
 {
  border-style:solid;
  border-width:2px;
  border-color:maroon;
  background-color:yellow;
  color:navy;
  font-weight:bold;
 }
</style>

This one is for Joel, it took me a few days to finish it (wink).

Thursday, March 18, 2004     Permalink   EMAIL  

Photograph of author Gary WilliamsBY GARY WILLIAMS AND MICHELLE GOODRICH
(March 2004)
In this rip, Gary of TFS Reluctant sets us straight on Shadows.

You don't want to miss this tutorial Stolen Shadows. Gary ripped it from us, we stole it back from him, and together our take on how to shadow your images just might make sense.

Tuesday, March 16, 2004     Permalink   EMAIL  

100 Most Often Mispronounced
Words and Phrases in English


Weather Forecast for Today: 84�

© ° ®

Symbols ° and ©

Susan makes the degree symbol � using ALT + 0176.
Gary types in &deg; to make °.

ALT + 0176
To make the � degree the way that Susan does, hold down the ALT key on your keyboard while pressing the number 0176 on the number pad.

©
To make the copyright © symbol we type in &copy;.

Full character sets are listed at W3.ORG. Let us know if you find a keeper.

What named colors work in all browsers?

Named Colors

aliceblue
#F0F8FF
aqua
#00FFFF
aquamarine
#7FFFD4
azure
#F0FFFF
beige
#F5F5DC
bisque
#FFE4C4
black
#000000
blue
#0000FF
blueviolet
#8A2BE2
brown
#A52A2A
burlywood
#DEB887
cadetblue
#5F9EA0
chartreuse
#7FFF00
chocolate
#D2691E
coral
#FF7F50
cornsilk
#FFF8DC
crimson
#DC143C
cyan
#00FFFF
darkblue
#00008B
darkcyan
#008B8B
darkgray
#A9A9A9
darkgreen
#006400
darkkhaki
#BDB76B
darkmagenta
#8B008B
darkorange
#FF8C00
darkorchid
#9932CC
darkred
#8B0000
darksalmon
#E9967A
dimgray
#696969
dodgerblue
#1E90FF
firebrick
#B22222
floralwhite
#FFFAF0
forestgreen
#228B22
fuchsia
#FF00FF
gainsboro
#DCDCDC
ghostwhite
#F8F8FF
gold
#FFD700
goldenrod
#DAA520
gray
#808080
green
#008000
greenyellow
#ADFF2F
honeydew
#F0FFF0
hotpink
#FF69B4
indianred
#CD5C5C
indigo
#4B0082
ivory
#FFFFF0
khaki
#F0E68C
lavender
#E6E6FA
lavenderblush
#FFF0F5
lawngreen
#7CFC00
lemonchiffon
#FFFACD
lightblue
#ADD8E6
lightcoral
#F08080
lightcyan
#E0FFFF
deepskyblue
#00BFFF
lightgreen
#90EE90
lightgrey
#D3D3D3
lightpink
#FFB6C1
lightsalmon
#FFA07A
lime
#00FF00
limegreen
#32CD32
linen
#FAF0E6
magenta
#FF00FF
maroon
#800000
mintcream
#F5FFFA
mistyrose
#FFE4E1
moccasin
#FFE4B5
navajowhite
#FFDEAD
navy
#000080
oldlace
#FDF5E6
olive
#808000
olivedrab
#6B8E23
orange
#FFA500
orangered
#FF4500
orchid
#DA70D6
midnightblue
#191970
palegreen
#98FB98
peru
#CD853F
pink
#FFC0CB
plum
#DDA0DD
powderblue
#B0E0E6
purple
#800080
red
#FF0000
rosybrown
#BC8F8F
royalblue
#4169E1
saddlebrown
#8B4513
salmon
#FA8072
sandybrown
#F4A460
seagreen
#2E8B57
seashell
#FFF5EE
sienna
#A0522D
silver
#C0C0C0
skyblue
#87CEEB
slateblue
#6A5ACD
slategray
#708090
snow
#FFFAFA
springgreen
#00FF7F
steelblue
#4682B4
tan
#D2B48C
teal
#008080
thistle
#D8BFD8
tomato
#FF6347
turquoise
#40E0D0
violet
#EE82EE
wheat
#F5DEB3
white
#FFFFFF
whitesmoke
#F5F5F5
yellow
#FFFF00

Mandarin Color Charting

We tested the named colors in a few browsers including IE, Mozilla, and Netscape. They all work fine. Now when we make a box we can use the color name.

An IVORY BOX

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

It will look like this.

An IVORY BOX

See the updated Mandarin Color Charts for more tested named colors, the browser-safe hexadecimal color codes, and the 16 named colors that are guaranteed to work in all browsers. The corresponding hex code is included for serious developers who work in shops that require using the hex code rather than the color name.

More box copy-and-paste code is here.


Monday, March 15, 2004     Permalink   EMAIL  


unknown juvenile

80 degrees in West Sacramento today (record-breaking highs)
We'll share the backyard with the birds. This guy landed in the feeder. A few days old just learning how to fly he's bigger than a baby Jay and smaller than an Eagle. I think.

Swimming to Norah Jones and planting more seeds. Moonflowers today. The instructions say

PLANT YOUR THOUGHTS IN THE GARDEN

and so we will. What if they grow?


Gary found the degree symbol for the 80° above. It's &deg;. Thanks Gary. The forecast for tomorrow is 84°.
Sunday, March 14, 2004     Permalink   EMAIL  

Blog d�moli par Mandarin
SPAN or DIV?

YOUR TEXT GOES HERE

Inline Style: <SPAN>

SPAN can be used to change the style of one word in a sentence or an entire paragraph. For blocks of data use the DIV tag.

Inline style works well when you don't use an external style sheet. Also, we don't want our style sheet to grow when we are making a colored box that we will never use again.

SPAN Dotted Box
YOUR TEXT GOES HERE

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

It will look like this.

YOUR TEXT GOES HERE


SPAN or DIV?

Inline Style: <DIV>

DIV is used to change the style for blocks of data that can include multiple paragraphs, line breaks, images, and more.

DIV Dotted Box
YOUR TEXT GOES HERE

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

It will look like this.

YOUR TEXT GOES HERE

SPAN or DIV?
Use the DIV if you are going to use more than one line of text inside the box or if you are using paragraphs. The SPAN and the DIV look the same here but once you type your text or add an image the SPAN box will start overlapping.

Update: If in doubt, use the DIV.

A special thank you to DianneMaire. She knows the meaning of Blog d�moli par Mandarin

Friday, March 12, 2004     Permalink   EMAIL  

Decorative images.Decorative images.Decorative images.

Strikethrough Strikethrough

The DoeNetwork is the "International Center for Unidentified & Missing Persons" covering the US, Canada, Australia and Europe .
"There is no time limit to solving a mystery"

Dana of StolenInnocence (turn your volume down) and DoeNetwork.org was wondering how to do that "cross out a word"   thing on a blog.

Strikethrough Strikethrough

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

This is  <s>crossed out</s> and this is not. 

It will look like this.

This is crossed out and this is not.

It's called a strikethrough.

<s> or <strike> or <del> ?
Daisy would probably like for us to add that <s> and <strike> are both deprecated. W3C recommends doing it in the style sheet. Daisy uses the <del> tag, the <ins> companion. Using the <del> tag a strikethrough looks like this. And I'll bet there's one more way to skin this cat. Anyone?

Two Degrees of Blog
Anita Rowland who we link to through the Quija Board links to StevenBerlinJohnson, an interesting writer whose book is selling well. He probably never has to use the strikethrough.

Thursday, March 11, 2004     Permalink   EMAIL  

Decorative images.Decorative images.Decorative images.

Styling Blockquotes

Do you use the BLOCKQUOTE tag? It automatically indents and centers without coding extra padding and looks nice without styling. But we've been meaning to define our BLOCKQUOTE in the External Style Sheet.


1. Blockquote without CSS STYLE

The unstyled BLOCKQUOTE looks like this.

This is my blockquote and will always be styled like this. We just use the blockquote tag.

Well, it doesn't exactly look like that. It will be rendered in your default font and will automatically indent on the left and the right, centering the block but not the text within. Our BLOCKQUOTE already has a STYLE applied.


2. Blockquote with CSS STYLE

We can add the following to our style sheet.

blockquote
{
font-family: courier new, courier; 
}

Now when we type a BLOCKQUOTE in our blog like this -


<blockquote>
This is my blockquote and 
will always be styled like this. 
We just use the blockquote tag. 
</blockquote>

It will look like this.


This is my blockquote and will always be styled like this. We just use the blockquote tag.

3. Blockquote with More CSS STYLE

Or, we could add more precise style to our External Style Sheet.


blockquote 
{
border: 1px dashed black; 
background:gold; 
font-size: 10px; 
color:#666;
font-family:verdana, arial, sans-serif;
padding:8px;
}

Now when we type a BLOCKQUOTE in our Blog or Web page.

<blockquote>
This is my blockquote and 
will always be styled like this. 
We just use the blockquote tag. 
</blockquote>

It will look like this.

This is my blockquote and will be styled like this. We just use the blockquote tag.


But, we were waiting to steal Gary Turner's blockquote. It's a nice brown colored font. Decisions, decisions.

Wednesday, March 10, 2004     Permalink   EMAIL  

Change the Look of Your Tag Board
Add CSS Style to Your HTML Form

You can change the look of a Tag Board by adding some STYLE, as in CSS style=. Tag Boards come with copy-and-paste code that includes a form inside of a table. You can change the TABLE or the FORM, or both.

Add CSS Style to Your Form

Style Fonts and Colors

CSS style is not complicated. You just have to know where to add it. Here is the code for the simple form above. Notice that fonts and colors are defined using the style=.

The form code will look like this.

We use the Tag-Board flavored Tag Board just because it was free at the time. Do you know of another board like Tag Board? Free?

Tuesday, March 09, 2004     Permalink   EMAIL  

CSS Borders and Mattes
A Gold Matte Picture Border
with a 1px Black Border

CSS Gold Matte Around Pictures

For this image we want to provide contrast between the picture and the frame with a gold matte 3 pixels wide around the picture. The black border will frame the picture.

First we put a gold border around the image by adding style="border: 3px solid gold" to the IMG tag.

We add a div with a black border that looks like a picture frame. And just because we wanted to, we added another div to center the image on the page. We worked from the inside out.

Copy and paste this in your Blog or Web page.

It will look like this.

Our image is 300 pixels wide. We used a width of 306 for the black outside border.

More...

There's more about CSS Boxes and Borders in the CSS Boxes and Borders page.

Change the size and color of the matte and the border to match your picture. String the code together on one line so that you don't get an extra space between the picture and the matte.

Monday, March 08, 2004     Permalink   EMAIL  

CSS Borders and Mattes

CSS 1px Black Border

With CSS you can put a border around just about anything including (but not limited to) paragraphs, divs, spans, links, and tables. We usually add a 1 pixel black border around images like this.

a banner blank

CSS White Matte Around Pictures

For this image we want a white matte 3 pixels wide around the picture, and then a black border that looks like a picture frame.

First we put a white border around the image by adding style="border: 3px solid white" to the IMG tag. We can't actually see the white border yet since our background is white.

We add a div with a black border that looks like a picture frame. And just because we wanted to we added another div to center the image on the page. We worked from the inside out.

Copy and paste this in your Blog or Web page.

It will look like this.

Our image is 300 pixels wide. We used a width of 306 for the black outside border.

More...

There's more about CSS Boxes and Borders in the CSS Boxes and Borders page.

Change the size and color of the matte and the border to match your picture.

Two degrees of Blog
Frank Paynter who we link to in the Quija Board links to Strathlachlan who we like to visit during the F1 Racing season. We're looking at this page while watching the race. The race is on right now and my Schumacher (Michael) is doing well. Rob's Jenson Button is currently running third. I just asked Rob "where's Michael?". He had to say "he's winning". Oh, how we miss the races. Rob is not a Schumacher fan, to me he is the ballerina of Formula One. Maybe we can make Montreal this year. It was supposed to be Monte Carlo for the Monaco Grand Prix. We'll see.

Saturday, March 06, 2004     Permalink   EMAIL  

Life in the IT Trenches with a Rogue Developer

a banner blank

It's Friday, my day off and I'm not checking the email. I missed a meeting yesterday and don't really want to know the outcome. It's the same old song about our Network data. How is the data used, who owns it, and what is the solution to the imaginary problem?

So you want my job, eh?

I'm working on a secure Web-based application that will allow our customers to view their router configurations via our Intranet. There are more than a thousand routers for about twenty customers and for each router I build an HTML page using funky .bat files to download the configuration for each router, Perl for some manipulating, FoxPro to remove secure data and to format the thousand plus individual HTML files, and ColdFusion for the final presentation of the data.

photo of Andys barn

There are a couple of requirements that make this task difficult.

  • No CGI (Perl) is allowed on the production server.
  • No database software is currently running on the server.
  • No local copy of ColdFusion software.
  • ColdFusion is the only software allowed on the server.
  • Development PC is not in place.
  • Data sources are changing.
  • Sensitivity of data requires high security.
  • Security requires encryption of all data (in addition to the SSL certificate).
  • Passwords may not be stored in a database.
  • Shared routers can't be displayed.
So you want my job, eh?

And so I code ColdFusion in Notepad and resort to an old Visual Studio 6 version of FoxPro for lack of other tools and time. There's some SAS on the mainframe where the initial data is gathered but that is already in place. I'll run most of it in batch jobs on the Development PC and will FTP the .HTML files to the Internet server each night.

a banner blank

Once it is prototyped I'll show it to internal Network and Security staff and recommend that the application not be put in place due to security issues. They will agree and the application will never be used.

So you want my job, eh?

And at that point, some would wonder why I don't just tell them now that it is not feasible. Because they have to see it . It's the nature of the beast. They think it is what they want. Once we filter out what each individual determines to be too secure to display there will be nothing left. I will have created a monster that will die before ever living. Or so I hope.

a banner blank

And that's why I take the long road to work where the river runs fast and the fields of mustard are blooming. That's probably why I plant Nasturtium seeds every few weeks. They grow or they don't. It doesn't matter either way. But today there are Nasturtiums blooming in every color and the mustard grows wild.


Make an Instant Logo or Banner Online

Banner Creator

a banner blank

We made that image as a banner blank (or banner background). It's 300 x 50 pixels. You can make your banner a size that suits you, or use any photograph. The Banner Creator lets you select from about 30 backgrounds and offers a number of fonts and colors for putting YOUR WORDS ON A BANNER.

You enter the background URL and then add text. We have a few banner blanks that you can use at the Banner page if you don't have readily available images.

Copy the the full name of the image you want to use before you go to the Instant Online Banner Creator or use one they supply. It's not fancy but it works. You can try it using our banner blank. Here's the URL to copy before you go to the Instant Online Banner Creator.

Friday, March 05, 2004     Permalink   EMAIL  



photo of Andys barn
Andy's Barn in West Sacramento, California

This is the morning drive to work on South River Road from West Sacramento to Sacramento. It's March and the wild Mustard is in full bloom.

Thursday, March 04, 2004     Permalink   EMAIL  

Google Blogger Blues

Does Blogger ever truncate your template? It just truncated our main template again so we notified Blogger of the problem but we couldn't find "truncating template" in the knowledge base. Do you report problems to Blogger?

Google

There's a new Blogger interface still in the development phase. We took it for a test drive with Google and provided feedback during a thirty minute session where we shared screens. It has more images in the layout, which for us was bad news since we were driving with large fonts on. The first thing I noticed was "where's the template?". It dropped us directly into posts.

Google

For those of us who use Blogger I think we like the simplicity of the interface. There are problems like truncating templates and screens that you have to refresh by changing the current blog to another blog to see the full screen. Little things we've learned to work around. Overall we're satisfied with Blogger. But, it would be nice to see some work on the current Blogger. Get it fixed and then do the new rollout.

But you really came here to
see how to type Google in Color?

You can type Google in color.

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

String the code all on one line. It will look like this.

You can type Google in color.

Or, were you searching for Goodle Good News?

No-Sword says "Well, today is the 3rd of the 3rd, and Chinese and Chinese-derived calendars don't generally let those matching-number days get away without some kind of formalities. So welcome to Hina Matsuri. "

Stephen Downes who kindly provides the free Stephen Downe's referral script that requires only one line of JavaScipt code in your page has modified the script to remove the bad guys. Click here to get the one line of code and here to customize it.

We saw the Top Ten in Google First Names image at Stephen's place. We'll steal the image later. Ouch, we're Top Ten in Google First Names for Mandarin and for Meg. Not sure that's how it should be.

Wednesday, March 03, 2004     Permalink   EMAIL  

CSS Drop Shadow