CSS Dotted Boxes and Borders
Centered Box
How can I make a centered dotted box? It didn't work in Netscape when I tried it.
To make the centered box copy and paste this code in your Blog or Web page.
It will look like this.
What does that code do?
<DIV align="center"> <div style="width:300px; text-align:left;padding:10px; background-color:#CC9999; border:2px dotted black;"> Your text goes here. </div> </DIV>
1. The <DIV align="center"> makes the box center in Mozilla.
2. The next <div"> says make the box 300 pixels wide.
The text inside the box is aligned to the left with a background
color of #CC9999 and a dotted border that is 2 pixels. The border color
is black.
Blogger and other tools sometimes insert a
line break <br> that you can't see.
The <div> tag should be on one line.
Use the delete key to get rid of any stray line breaks.
Psst. I'm typing and viewing this in IE, not Mozilla. It works, right? Opera anyone?
DO YOU WANT TO KNOW A SECRET?
Stu, the opinionated Bushwacker, emailed this morning.
"Hi, I've noticed that you often respond quickly when I mention you in my blog.What's your trick for noticing that? Certainly MY Technorati entries seem to only get updated very infrequently."
The secret? Drum roll...
We read your
blog,
Stu.
No tricks. We weren't noticing that you mentioned us. Since we read Shirl, Frank Paynter, Gary Williams, and Gary Turner we saw the links in to a recent post and followed one of them. We don't always agree with The Bushwacker, who insists on spelling it B-U-S-H-W-H-A-C-K-E-R, even though his Mandarin given name is Bushwacker (like the drink) , not Bushwhacker. But, we are still reading every post.
Technorati
Do you Ping Technorati?
Is your picture in Technorati?
It's free and easy to Sign Up for Technorati and add or update your photograph.
Unfortunately, Technorati is making improvements that make it not as useful for us anymore. Instead of browsing down a full page we have to click to individual pages. An odd change that requires a query for each page. They must have been having server problems.
So where is the replacement for Technorati? Do you know of another tool that generates useful information?
When...
Named Colors
What are the 16 named colors that work in all browsers?
| Black | 000000 | Green | 008000 | |||
| Silver | C0C0C0 | Lime | 00FF00 | |||
| Gray | 808080 | Olive | 808000 | |||
| White | FFFFFF | Yellow | FFFF00 | |||
| Maroon | 800000 | Navy | 000080 | |||
| Red | FF0000 | Blue | 0000FF | |||
| Purple | 800080 | Teal | 008080 | |||
| Fuchsia | FF00FF | Aqua | 00FFFF |
Colors don't always look the same in every browser but every color name renders a color. For a full list of color names that render a color all browsers see the Color Chart.
Have a colorful and happy Tuesday. We'll be looking for a nice light background color in the Color Chart today. Beige is good, but the name is so boring.
Free Image Optimization Tool
HOW TO SUCK THE LIFE OUT OF YOUR IMAGES
Netmechanic's Free Image Optimization Tool
is really free and easy to use. It lets you optimize your graphics online. Nothing to download. No spam later.
Right-click on the image to view the properties. You will see that the size is about 6K while the dimensions are 125 x 123. Left-click to enlarge the thumbnail.
It's a sunny day here in Sacramento. Cold, but sunny and time to get out in it.
A local Sacramento story about the fight for Nathaniel and how you say goodbye. The family who adopted Nathaniel and then lost him to his biological father have set up a site BabyNate.org to promote Nathaniel's Law.
Float Image Right
One line of SPAN code...
<span style="float:right;"><img src="v19.gif"></span>
"I looked into the deep and bottomless Perdido,
and beheld about it the thousand charms
which nature has spread to allure the unwary
traveler to it's brink."
-- George Catlin 1834
American artist and visitor to Perdido Key, Florida
PERDIDO WHAT? PERDIDO KEY? Oh.... Well, I remember when...By Baker Holman
One line of code
<span style="float:right;"><img src="v19.gif"></span>
It's easy to use the CSS inline style SPAN to float an image to the right.
All you need is one line of code. Insert the <span style="float:right;"> before the IMG tag and close it after the image with </span>. You can add more attributes to either the SPAN tag or the IMG tag. We added some padding to the left of the image.
More about SPAN
SPAN is inline style that you type directly in the BODY of your HTML of your Blog or Web page. For example, if you are blogging you would use the SPAN tag in your post. SPAN is not used in the HEAD section or in the External Style Sheet.
For a quick test copy and paste (or type) this in your Blog or Web page.
It will look like this.
This is inline style using the SPAN tag.
It should work fine in your blog.
Just change the image to your image
and your words. Ah, now didn't that
work easy? Now, just
insert your image and words.
You may need to enter more text
or spaces in the text area since it
needs to take up as much space as
the image.
Little Squares
Images add visual interest. We like the way some writers include a thumbnail sized image with every post. If you need an image we have plenty to share.
Brykmantra,
Gary, and
Leslie
contributed some new squares that add variety in the Gallery. See the images named c1 - c40.
Dimensions 50 X 50, Weight 1K The dimensions of the squares are 50 X 50 pixels and the weight is less than 1K for each image. The Gallery is full and overflowing now with little squares so the page load time is slowing down, but each image is relatively small and will load quickly when used alone or in small groupings.
Make a Square Squares are easy and fun to make. If you have a graphic tool you can cut a square out of a photo or your art. Then come back and lift the code for posting your squares. For an instant square try this.
Instant Square
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HERE
Just keep typing after the image code is inserted.
The text will automatically wrap around the image.
Change the image number 6 to any number between 1 and 40 for a surprise image from the contributors. Or, take any image from the Gallery. No link, no strings, just a bunch of free squares.
What does that code do?
1. Inserts an image named c6.gif2. Aligns the image to the left.
3. Makes your text wrap around the image.
4. Puts space between the text and the image.
The vertical space vspace is 0. The horizontal space hspace is 10. The horizontal space keeps the text from bumping up next to the image.
Blogger and other tools sometimes insert a line break <br> that you can't see. The code should be on one line. Use the delete key to get rid of any stray line breaks.
Mandarin Quija Board |
|
|
|
|
|
|
|
|
|
|
The Labelmaker lets you make your own text logo. It's free. No advertising. No popups. We made this one using their LokiCola font.
How to Create an RSS Feed With
Notepad, a Web Server, and a Beer
A one-page tutorial by Stephen Downes. If it works for you let us know.
Subtracting Design Techniques
"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
-Antoine de Saint-Exup'ery
Perceptions
A Southern Family
Mom was a Chemist
Occupation: Chemist
Mom was a Chemist, a Bio-Chemist to be more precise. Later she enjoyed being an educator, teaching Chemistry and English.
System Software Specialist
A fellow blogger at another blog (no link intentional) recently made the comment that as a Software Developer I was in a non-traditional occupation. For a female. That was his think, not mine. I've been doing this (programmer, systems analyst, software specialist, senior developer) for twenty years and it never occurred to me that anyone thought it was a non-traditional occupation (for a female). My first profession was Labor Market Analyst/Economist where the work is primarily occupational analysis so I am somewhat familiar with just about every occupation except the exotic occupations that are not statistically significant.
Grand Juror
One of those "exotic occupations" would be a Grand Juror. When I worked as a Grand Juror there were many who had stereotyped that position and would openly say that they thought Grand Jurors were all a bunch of old men. A Grand Juror is a non-traditional occupation for anyone (male or female).
Gender Perceptions
Maybe it is the family where gender perceptions are developed and nurtured. We started hunting and fishing at a young age and learned to clean our own shotgun. We were taught by example to be independent and no occupation was beyond our reach or reserved for males or females. I don't think any of my family or friends have ever thought that a Programmer or Software Specialist was a non-traditional occupation.
Truck Driver
Now my sister, an 18-wheel truck driver for twenty years, is in a non-traditional occupation. When she says she drives for UPS people think it's the package car. Nope. It's the big trucks. The long haul. Her occupational goal was to be a Physical Education teacher, but truck drivers make more money. My brother Gary was in a non-traditional occupation - a Ship Captain. You don't meet a lot of Captains (male or female).
What is your occupational title?
What do you do? Do you perceive your work to be non-traditional?
Slide Show
Fade Images JavaScript Slide Show
Photos: January 22, 2004
The fading image you see here is actually done with the outdated Fade Applet. But, the JavaScript slideshow looks identical.
Easy Instructions
The JavaScript Slideshow instructions are easy to follow copy-and-paste code. You can compare and select either slide show for your pictures. You will probably want to use the JavaScript Slideshow.
Three Pictures
We took three pictures today of the backyard birds feeding, then compressed the images (or sucked the life out of them as Brykmanta would say) for a faster loading slide show.
Steal these Squares
We cut little squares out of a graffiti art photograph at Punkclown. We borrowed from other folks too. See if you recognize the steal from you. They are in the Free Image Gallery.
Copy and paste this in your Blog or Web page.
It will look like this.
The image name is s2a.gif. Change the name to the image of your choice. Images are stored in the Gallery.
Multiple Images
For multiple images repeat the IMG tag. Copy and paste this in your Blog or Web page.
It will look like this.
STUPID QUESTION:
Why can�t I get to websites with underscores in the URLs?
The examples include
Any answers? Have you had this problem?
FROM THE COMMENTS
This one is too important to leave inside so we're turning the comments inside-out here.
ANSWER: Dude, underscores are not allowed...
Thank you QueenofCups for the link to Squid-cache.org. It appears that underscores are not standards compliant. Ouch.
11.8 DNS lookups for domain names with underscores (_) always fail.
The standards for naming hosts ( RFC 952, RFC 1101) do not allow underscores in domain names:
A "name" (Net, Host, Gateway, or Domain name) is a text string up to 24 characters drawn from the alphabet (A-Z), digits (0-9), minus sign (-), and period (.).
The resolver library that ships with recent versions of BIND enforces this restriction, returning an error for any host with underscore in the hostname. The best solution is to complain to the hostmaster of the offending site, and ask them to rename their host.
See also the comp.protocols.tcp-ip.domains FAQ.
Some people have noticed that RFC 1033 implies that underscores are allowed. However, this is an informational RFC with a poorly chosen example, and not a standard by any means...
Some DNS resolvers allow the underscore, so yes, the hostname might work fine when you don't use Squid.
CSS Instead of Graphics
Make Your Logo with Text
Shadow Filter in DIV
Text is free or cheap. The following is text, not a graphic.
The Just Julius is HTML text with the CSS Shadow filter applied. Copy and paste this in your Blog or Web page.
It will look like this.
"Don't ask yourself what the world needs;
ask yourself what makes you come alive.
And then go and do that.
Because what the world needs
is people who have come alive."
- Harold Whitman
Quote found at WhiskeyRiver.
"Humor is a funny thing"
BaloneyDude
Typographic Control: Leading and Kerning
Using CSS allows you to control Kerning and Leading by adjusting the line-height and the letter-spacing.
Leading
Leading is the spacing between lines. If you want to make your font more readable you can adjust the CSS default spacing between lines. The default is 120% of the type size. Let's see this in action.
Leading Example 1: Line-height: 120%
This is a small font with the line-height set to 120%. The default is 120% of the type size. So, the line height here will be the same as the default. This text is easy to read for those with perfect vision.
Leading Example 2: Line-height: 140%
This is a small font with the line-height set to 140%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
Leading Example 3: Line-height: 150%
This is a small font with the line-height set to 150%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
Copy and paste Example 2: Line-height: 140%
Copy and paste (or type) this in your blog or Web page.
It will look like this.
This is a small font with the line-height set to 140%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
Kerning
Kerning is the spacing between letters. Adjust your kerning for headlines, subheadings, or other special effects.Kerning Example: Letter-spacing 4px
The letter-spacing here is 4pxCopy and paste Kerning Example: Letter-spacing 4px
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HERECSS
The line-height and letter-spacing can be specified in your external style sheet, internal style, or inline as demonstrated.
A Centered Dotted Box for Netscape
Mozilla and Internet Explorer
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
The dottted border is inset in Mozilla, outset in IE. Here's a screenshot from Netscape.
Yard Art Image Dimensions
Sherle's place has a collection of Yard Art that inspired me to walk outside into the cold to get a snapshot of a flamingo. But, I only got a few feet from the door. This fairy was hiding under a plant.
Uploading Images
When we use Blogger to upload an image it uploads code that looks like this.
<img src="http://www.mandarindesign.com/yardart.jpg">
Image Attributes 250 x 187
The code works but you can give the browser a few more clues to speed up your page load time.
Right-click on the image and view the properties. We can see that the dimensions are 250 x 187 so we add that to the IMG tag like this.
<img src="http://www.mandarindesign.com/images/yardart.jpg"
width="250" height="187">
Tweak it more...
Then we remove the http://www.mandarindesign.com/
*so the browser doesn't have to do another HTTP request. The image is stored here so we only need to tell the browser this part images/yardart.jpg.
The final code to insert an image looks something like this.
<img src="images/yardart.jpg" width="250" height="187">
And the image still looks like this.
Yard Art Image Dimensions
Does size matter?
We try to keep our images at 10K or under. There are still many areas where DSL and Cable Modem are not available so page load time does matter to us. The 10K image here, combined with the other images, will result in a slow loading page on a dialup connection.
Are you on a dialup connection? Are we loading slow?
Liz reminds us that to process the image tag the browser initiates a second HTTP request to retrieve the image. Some Web instructors say the second use of the same image does not result in an HTTP request if the HTTP is not included.
Mr Picasso Head
Describe yourself in ten lines or less. We used the interactive Mr Picasso Head that we found at WindSpirit while passing through Farrago.
Fiddle with Your Image or Picture
A Shadow Filter Border
1. Put a Border Around the Picture
We added style="border:1px solid black" to the IMG tag to put a 1 pixel border around the image.
Now it looks like this.
2. Add a Shadow to the Picture
The picture is 200 pixels wide. To make a shadow around the picture we can add a DIV to contain the image. The DIV needs to be a little bigger than the image.
We added the DIV with the filter:shadow(color:gray) like this.
Now it looks like this.
