Your IP Address
Goodrich Wins
Happy Birthday Tom.
FROM THE MANDARIN FAQ PAGE
Float Image and Caption Left
Using CSS Inline Style
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 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.
CSS FLOAT LEFT
- Drop Caps in Style
- Float Left with Less Code
- Float Image and Caption
- Float Boat Left
- CSS Float Left
- Float Quote Left
- Fancy Float Left
CSS FLOAT RIGHT
Meg, could one fit it into a space about 160 pixels wide?
roadapples
Banner Size to 160 pixels Wide
Let's try it. We'll limit the width to 160 pixels with a <div style="width:160px;"> to see how it looks at the smaller width. Then we can adjust the font size.
It doesn't look exactly like the original banner at the 160 pixel width but we made it work by taking the font size down to font-size:22px;
Copy and paste this in your Blog or Web page.
It will look something like this.
It will stretch or shrink to the width that you have available. Hover over the text to see the nice pink and link.
Make Your Own Logo or Banner with CSS
We still don't have access to any graphic software so we might make our own logo using CSS. We made this one using pure CSS with a mouseover. The hover color change links to another page. Hover and click to see it in action.
Copy and paste this in your Blog or Web page.
It will look like this.
Add a Background Image
We have an image on this page that we can use.
Let's see what it looks like when we add
a background. The code that we need to add for the image
wednesday.jpg looks like this.
Grab that Code
Let's grab the copy and paste code for the banner and
add the background code for an image. We will remove the
background:black; and replace it with the image.
Hover Over the Banner
It's not perfect but it's a good start. If we use a background image we can rotate
the image and we will not look like everyone else who uses this copy and paste code.
Width:100%
Using the width:100% makes this banner stretch or shrink to fit, so it's a one size fits all. More sizes are here.
Things We Can Change
We can change the text color and the background color of the
bar to a named color or
hex code color. The code we want to change looks like this.
color:silver;background:silver;color:silver;
Copy and paste this in your Blog or Web page.
It will look like this.
Free Logo and Banner Maker
Make your own Logo
We are playing with the
Free Banner Maker and quickly made this free logo. It comes with premade images to select from, flexible backgrounds, sizes, and colors. It's so much fun that we made a few.
The first time through we did a right-click to save the image. Wrong. We lost our work, all five minutes. Click Download to save your logo.
Show us your Logo
Click download to
save your creation. Otherwise, you think
that you grabbed the image but it's really
the sample you are grabbing, not the spiffy preview design.
Did you make a logo? A banner? Will you show us?
Update: Kim's banner is made with the Acme Labelmaker. Thanks Kim.
More free logo and banner makers without popups are here.
Opacity doesn't work in the Opera browser so he can't see what you see. Oops, we see the opacity applied, he can see it fully opaque in Opera. He doesn't see what you see unless he opens IE or Mozilla. He sees the words and the top image, he can not see the repeating image underneath. It's all smoke and mirrors. Just some spare images and words with opacity applied.
In this example, the Opera version that does not have Opacity applied looks better from here.
Copy and paste? Tomorrow. Unless you want to read about CSS Opacity and Transparency.
"Some days he annoys me, other days he just annoys me. "
~meg
And he was so vain he thought that post was about him. The worst part? It was about him.
No Graphic Software? No Problem
140 x 105 pixels
TypoGenerator lets us create a 400 x 300 pixel image online. No software required.
We don't have access to graphic software on this PC, but we need an image. TypoGenerator lets us enter a word or two then it creates a textual image. The 400 x 300 pixel image is too wide to display here.
Make it smaller
To make the image display smaller and constrain the image proportions we can define the width and height as smaller than the actual 400 x 300 pixel TypoGenerator image. We can display the image using these proportional dimentions.
- 300 x 225
- 200 x 150
- 140 x 105
That's the math for the TypoGenerator image.
300 x 225 Pixel Display Size
300 x 225 pixels
Copy and paste this in your Blog or Web page.
It will look like this.
300 x 225 pixels
200 x 150 Pixel Display Size
200 x 150 pixels
Copy and paste this in your Blog or Web page.
It will look like this.
200 x 150 pixels
140 x 105 Pixel Display Size
140 x 105 pixels
Copy and paste this in your Blog or Web page.
It will look like this.
140 x 105 pixels
We don't usually do it this way, but it works.
10 Questions with Christopher (Rageboy) Locke on Blogging
How can we educate the average user about blogging?
I don’t believe in average users any more than I believe in consumers. Averages, like popularity, is a numbers racket. But I’d tell anyone who isn’t blogging already and who’s the slightest bit intrigued by what it’s all about to just start doing it. The challenges of writing will present themselves immediately. And the challenges are great. Are you a fool? Are you naive? Are you saying too much? Too little? Are you bold enough to say THAT in public? Are you stupid enough? All sorts of gremlins sit on your shoulder whispering in your ear. Some are encouragements. Some are seductions. Some groundless fears. Some dangerous delusions. How a writer responds to these whisperings will determine what kind of writer he or she will become. It’s a very personal thing. My own approach is to listen carefully, then ignore all of it.
Christopher (Rageboy) Locke
10 Questions with Christopher Locke
David Newberger's Blog
