| Page Down to View All Tips and Tricks | ||
| CSS FLOAT LEFT CSS FLOAT RIGHT FANCY TEXT CLICKABLE SECTIONS | BOXES AND BORDERS LINK HANDLING More... | SPAN and DIV Reference Tables Stupid Web Tricks |
"Because she knows me like no one else in this world, she knew
that the silence had meaning. It took only a few seconds
before she answered with her own silence."
~Angie
Angie is famous for the "f" word but her writings are filled with gut emotion.
She's worth quoting and floating. Floating text or images is done with the float:left or float:right. We like the way the quote
looks floated to the left in what nearly looks like a box. Why does it look like a box? Because everything in CSS is a box. If we put borders around the simple paragraph that we are using to float the quote we could see the outline of the box. Some quotes look good in bold font and others in normal font.
We float the quote to the left by adding style to the paragraph tag float:left. We need to tell the browser how wide to make the quote
so we guess 150px (150 pixels wide). And we could stop there but instead we tweak the code to suit our style.
We don't have to justify the quoted text but we like the way it looks so we add text-align:justify to make the text align on both sides like a newspaper column. We added some padding to the right and the bottom for visual whitespace.
The float code looks long but it's one paragraph that floats to the left. The extra text in the copy-and-paste code for demonstration.
It's only one line of code that looks like this.
<p style="margin-top:0px;margin-bottom:5px;
width:150px;float:left;
color:saddlebrown;font-weight:normal;
padding-right:15px;text-align:justify;">
Copy and paste this in your Blog or Web page.
It will look like this.
"YOUR QUOTE GOES HERE. The text you want to float to the left goes here. We made ours brown. You can adjust the color. "
The rest of your text goes here. You can adjust the color, change the normal to bold and adjust the padding to suit your style. We used a width of 150 pixels on the quote but you can increase or decrease the width. Once you have the style in place you might want to try using a different font for the quote.
We've been blogging around Top 100 territory and found some good Blogs, but none were better than our regular reads. So here we sit with these coke bottles and thought it might be interesting to recycle them (again). We hardly ever align to the left and to the right at the same time. Let's try it. Here, have a Coke and try it at your place too.
The Coke code looks like this.
<img src="images/coke.gif" width="50"height="133" align="left" hspace="10"> <img src="images/coke.gif" width="50"height="133" align="right" hspace="0"> YOUR WORDS GO HERE.
YOUR WORDS GO HERE.
Copy and paste this in your Blog or Web page.
It will look like this.
YOUR WORDS GO HERE.
That was fun, eh? This one might be fun to try with squares or other images.
How do you do the layer effect on your front page? It didn't work when I tried it.
We used relative positioning with Inline CSS style. Here's the image with text floating over it.
Copy and paste this in your Blog or Web page.
It will look like this.
First we display our 316 x 330 image using the <IMG> tag.
To overlay the Web Site Design Studio text on top of the image we used CSS inline style.
The key when overlaying is the use the position:relative with top and margin-left. We had to tweak the relative positioning a bit to get the text to appear exactly
where we wanted it on top of the image. We used the div
tag and decided to start the text -300 pixels from the top (our image height is 330). We used a left margin of 10 pixels.
Copy and paste this in your Blog or Web page.
It will look like this.
Display the image. Our image is 200 x 159.
Define the position and style of the text.
Our image is 200 x 159. We want the text at the top of the image so we backup -159 pixels (our image height is exactly 159). The inline CSS will include
position:relative;
top:-159px;
color:white;
margin-left:5px;
font-weight:bold;
Copy and paste this in your Blog or Web page.
It will look like this.
Once a box has been laid out according to the normal flow, it may be shifted relative to this position. This is called relative positioning.
A relatively positioned box is generated when the 'position' property for an element has the value 'relative'. The offset is specified by the 'top', 'bottom', 'left', and 'right' properties.
w3.org Relative positioning
Positioning is done with boxes. The positioning is easy enough with one image and one line of text, especially if the text is limited to the width of the image. But, let's see what happens if we enter multiple lines of text.
Positioning is done with boxes (that's worth repeating).
The div creates a box and the p creates a box.
We are putting the
pink dotted border around the div so that we can see what the code does. We'll put the
yellow dotted border
around the paragraphs p that follow our overlay.
The text you are reading here is in a paragagraph that follows the code. It will be positioned downward, farther away from the image than desired.
There are more options. We can define the boundaries and the position of the following paragraph.
width:200px;div style="width:200px"
position:relative;top:-75px;
Where does text below begin? Where we tell it to begin.
The top of the paragraph can be calculated and then visually placed where we want it. We are estimating position:relative;top:-75px; (moving it up 75 pixels) from its normal flow.
This is the next paragraph. No positioning specified. It will follow its normal flow. Where does the natural flow place it? Here. Way down here.
Its normal flow is based on the orange text we just typed in. But, the browser doesn't know we used relative positioning for the text (the orange text over the box) so it starts in what would be the normal flow unless we help it by defining a position.
In Internet Explorer I put the name of the Web page in the URL bar like this
c:/routerconfig/index.html
That doesn't work in Mozilla Firefox. How do I enter the name of the HTML that I want to test in Mozilla?
file:///c:/routerconfig/index.html
| Command | Most Browsers and Applications |
|---|---|
| Add Bookmark | Ctrl+D |
| Close Window | Ctrl+W
Alt+F4 |
| Copy | Ctrl+C |
| Cut | Ctrl+X Ctrl+T |
| Delete | Del |
| Find on page | Ctrl+F |
| Full Screen | F11 |
| History | Ctrl+H |
| New Window | Ctrl+N |
| Open File | Ctrl+O |
| Paste | Ctrl+V |
| Ctrl+P | |
| Reload | F5
Ctrl+R |
| Reload (override cache) | Ctrl+F5 |
| Select All | Ctrl+A |
| Stop | Esc |
| Undo | Ctrl+Z |
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 this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HERE
In the comments of the last post
Doc Shazam suggested
that we could the do the same thing with only one span
by adding the margin.
JR mentioned that it could be done with just one span,
but without the margin added it broke in Mozilla.
That might be what he was trying to say "add a margin".
So here we added a margin to the first (and only) span.
Both methods work but this one uses only one span.
Copy and paste this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HERE
That is only one line of code. It's one long line of code but it is only one line. This method works in IE and Mozilla so you can save a few keystrokes by using this version of the matted border code. We put a margin of 15 around all sides for simplicity. You could specify margin-right and margin-left if you really want to tweak it.
Goodrich Wins
There is one difference between the Float Image Left code and this float. We added padding-left to the paragraph that floats to the right so that the text and the image have more space between them.
We are floating the picture to the right by adding style float:right 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 right. Since our image is 100 pixels wide we guess and make the paragraph 125 pixels wide so that we have some extra space.
The text that we are typing in after the first paragraph will automatically align to the left. 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 left of the image. You can type as much as you want. The more you type the better it looks.
Goodrich Wins
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 125 pixels wide so that we have some extra space.
We make the paragraph 125 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.
We use two methods for floating our boat, one method uses the span and another uses the img tag only.
If you are looking for the preferred method use the last one listed here (#4. SPAN with Padding). It works well and is probably the most popular method. It depends on how you want the image to display and where you want the text to wrap around the image.
We are using the SPAN tag with a padding of 15 pixels around the image here.
We want the text to appear above, around, and below the image so we
put the SPAN tag in the middle of our text. The placement of the SPAN
that contains the image is up to you. Try floating the image first
and then type in your text.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
We are using the SPAN tag with a padding of 15 pixels around the image here.
We want the text to appear above, around, and below the image so we
put the SPAN tag in the middle of our text. The placement of the SPAN
that contains the image is up to you. Try floating the image first
and then type in your text.
We don't like the text aligned next to the image.
But, we can float our boat image to the left of our text using
the SPAN tag. We have to type
in enough text so that we don't run into the next tag
and confuse the the browser.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
We don't like the text aligned next to the image.
But, we can float our boat image to the left of our text using
the span tag. We have to type
in enough text so that we don't run into the next tag
and confuse the the browser. Or, make sure that we close the end with a break clear.
We don't like the text aligned next to the image.
But, we can float our boat image to the left of our text by adding
the ALIGN="LEFT" in the IMG tag.
We are typing just enough here to get the text to wrap so that you can see the alignment in action.
Copy and paste (or type) this in your Blog or Web page.
We like padding next to the image.
We are using HSPACE="15" here. Most sites prefer 10. We increase the amount of padding depending upon the size of the image or what we think looks better. There is no rule.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
We like padding next to the image.
We are using the hspace here. Most postings use
a padding of about 10 pixels. We increase the
amount of padding depending upon the size of
the image or what we think looks better.
There is no rule.
We like padding next to the image.
We are using a 15px padding here. Most images look good with padding:10px.
We increase the amount of padding depending upon the size of the
image or what we think looks better. There is no rule.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
We like padding next to the image.
We are using a 15px padding here.
Most images look good with padding:10px.
We increase the amount of padding
depending upon the size of the
image or what we think looks better.
There is no rule.
If you want to float everyday you can add this to your style sheet.
.floatleft {
float:left;
padding:15px;
}
Then type this in your Blog or Web page.
It will look like this.
And then put your text here. You can type as much as you want, just type enough to clear the float.
You can add more to the float class definition; change the padding, or even add an image (the same image to display each time) and all kinds of spiffy stuff. It just depends on how you want it to display.
If you don't type in enough text to flow to the bottom of the picture you will want to clear the float. You can do that with a
clear:left
clear:right
clear:both
I type it in after the paragraph ends (rarely needed).
<div style="clear:both;"></div>
style="text-align:justify;" to your tag.
|
This is column in a small table where we are using the justify alignment within the table data. If you want a newspaper or article styled page you can use this technique. |
The next column begins on the right side and aligns the text defined as |
Copy and Paste this in your Blog or Web page.
It will look like this.
|
This is column in a small table where we are using the justify alignment within the table data. If you want a newspaper or article styled page you can use this technique. |
The next column begins on the right side and aligns the text defined as |
For the triple border to work the width and height of the image is
included in both the img tag and the div that surrounds the image 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.
We use the DIV tag to make a centered box.
Copy and paste this in your Blog or Web page.
It will look like this.
Code updated March 2004. Best practice is in Center Box Margin Auto
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.
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.
<div align="center">images go here...</div>
Another way, the more purist method I think, is to use <div style="margin:0px auto;">. But that doesn't work in every browser, particularly in one older browser that I use. Your mileage may vary.
<div style="margin:0px auto;">images go here...</div>
The HTML 4 keyword color names are black, green, silver, lime, gray, olive, white, yellow, maroon, navy, aqua, red, blue, purple, teal, fuchsia, and aqua. The color names are not case sensitive.
| 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 |
The Color Chart has a list of all named colors.
Click on each Chapter to see how it works.
Chapter1
Chapter2
Chapter3
The End
At the moment it's all just one great long post with new bits tacked on at the end each time. There are two problems, Blogger posts in reverse chronological order and I need a way to label each chapter so that it can be referenced. We can do the Blogger fake and click the Change Time & Date box to rearrange each post. Or, we can start marking the sections now so that when we figure out the final solution later each section will already be marked.
Insert this code at the beginning of a chapter.
<h2><a name="chapter2"></a>Chapter 1</h2>
The code to refer to Chapter 2 from inside this page looks like this.
<a href="faq.html#chapter2">Chapter 2</a>
To refer to Chapter 2 from an external page the code will look like this.
It will work like this.
Chapter 1Click on each Chapter to see how it works.
Chapter1
Chapter2
Chapter3
The End
So here I begin typing long areas of text as my aunt sends them to me. She will not send them in reverse chronological order, and maybe in no particular order. She is eighty years old and has a lot to tell us about growing up in Alabama, picking cotton, riding in the cart to church, and stories about making moonshine.
Aunt Clara is getting older and we would like to preserve some of her memories. When she describes the organdy dress she wore to impress her future husband her description makes us feel like we are there in Alabama, feeling the hot humid day as she ironed the dress, of course not using an electrical iron. She has a knack for telling stories and the time period comes alive with her words.
Her thoughts are disjointed and they will not be in reverse chronological order. Actually, they may not be in any order. Memories don't come to us in sequential order. They are fleeting moments, moments that we would like to capture.
The problem with blue borders around hyperlinked images is that we never see our own. By the time we see an image on our page we are looking at the visited link color.
To remove the blue border (or colored border) around images add
border="0" to the IMG tag.
The HTML code to hyperlink an image looks like this. The default is a blue border.
It will look like this.
border="0"
The code to hyperlink an image with no border looks like this.
It will look like this.
border="0" style="border:1px solid black;"
The code to hyperlink an image with CSS Style black border looks like this.
It will look like this.
To put a border around a picture we added three items to the standard IMG tag.
border-style:outset
border-color:orange
border-width:3px.
Copy and paste (or type) this code in your blog or Web page.
http://www.mandarindesign.com/images/front.gif to the name of your image. width and height to match your image. orange to any named color.Done!
This is our image with the outset style colored orange with a border width of 5px.
border-color
border-width:2px
If you don't have an image and want to try it real quick you can use the image in this example. Copy and paste (or type) this in your Blog or Web page exactly as shown below.
We used a small black and white image compressed to less than 1K. A small image with a colored border doesn't cost much in download time. It should load lightning fast.
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 |
The full color chart with hex codes and color names is here
Add some CSS STYLE, as in style=.
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.
Click the Thumbnail:
If you want your visitors to see your larger images use a clickable thumbnail.
The tutorial Grouping Images will help you with clickable thumbnails.
Here's is a fancy way to do it.
Small Image:
http://www.mandarindesign.com/images/pumpkinthumb.jpg to the name of your small thumbnail.125 x 126 to match the size of your image.
The size of the small image pumpkinthumb.jpg here is 125 x 126.
Big Image:
http://www.mandarindesign.com/images/pumkinbig.jpg to the name of your big image. 300 x 225 to match the size of your image.
The size of the big image window for pumpkinbig.jpg image is 300 x 225. Note: The tutorial Grouping Images will help you with clickable thumbnails.
Here's how to see how much RAM is installed on your computer.
Choose Start
Settings
Control Panel
and double-click System.
The amount of RAM is listed on the lower half of the General pane in the System Properties window.
There is an excellent article at Netmechanic by Larisa Thomason. Creating AOL-Friendly Email Links. The HTML code she shares shows you to format your AOL-clickable URL's. Here is the HTML.
For