Home » Squidoo Community » Lensmaking Tips » HTML on a lens

ZEE CODE SCRATCHPAD

Ranked #2,112 in Squidoo Community, #175,434 overall

BEHOLD MY FRANKENCODE...IT'S ALIVE!!!!!

Ack! Sorry. This lens is my testing zone so I don't screw up one of my real lenses with my weird code experiments.  Please stop by one of my finished lenses or my CSS Codes Tutorial!

Or, even better, check out my lensography ALL my Squidoo Tutorials, Tips, and Help Pages! They are for you. Use 'em!

Table of MalContents

  1. DAMMIT SQUIDOO STOP EATING MY ENTITIES
  2. Creative Commons Credits
  3. Graphics Tutorial Suite Navbar
  4. Drop Cap.
  5. Fancy <I>Numbered</i> List
  6. Yummy Purple Prose (And Poetry)
  8. StickyNote
  9. Javascript Query Test
  10. Build a Better StickyNote
  11. WE ALL LIVE IN
  12. Zazzle affiliates graphic & 3 columns for images
  13. Amazon Spotlight Module
  14. Background-Image
  15. A Knock at the Door

DAMMIT SQUIDOO STOP EATING MY ENTITIES

#8226; = •
#9829; = ♥
#9830; = ♦
#8657; = ⇑
#9674; = ◊
#38; = &

HTML ENTITIES TABLE

Creative Commons Credits

Photo by Adam Smith Creative Commons Some Rights Reserved



<p style="font-size: 90%; float: right; font-style: italic;">Photo by <a href="http://www.flickr.com/photos/gingerblokey/2004212238/">Adam Smith</a> <a href="http://creativecommons.org/licenses/by/3.0/"><img src="http://www.istad.org/lenses/cc.jpg" alt="Creative Commons" style="vertical-align: text-top;" /></a> <a href="http://creativecommons.org/licenses/by/3.0/">Some Rights Reserved</a></p>


Creative Commons LicenseAll California Sea Hare photos on this page by Ellen Brundige © 2009. Some Rights Reserved.


<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/" rel="license"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc-sa/3.0/us/88x31.png" style="float: right; margin-left: 20px;" /></a><i>All California Sea Hare photos on this page by Ellen Brundige © 2009. Some Rights Reserved.</i>

Graphics Tutorial Suite Navbar


This lens is part of Greekgeek's Graphics Tutorials Suite!How to Align Images • How to Upload Images
Where to Get Graphics (Legally!) • Free Squidoo Graphics
How to Fix Missing Images in Amazon Listings
Photoshop Tricks: How to Make Glossy Buttons • Add a 3D Frame to a Photo



<p style="border: 2px solid rgb(238, 238, 238); padding: 0px; width: 310px; margin-right: 10px; font-weight: bold; text-align: left; font-size: 9pt; color: rgb(255, 153, 0); font-family: Arial; float: right; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px;"><i style="padding: 10px 20px 15px; font-style: normal; display: block;"><a href="#module22233492"></a></i></p>
<p style="border: 3px solid rgb(153, 153, 153); clear: both; background-color: rgb(247, 247, 247); text-align: center; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; padding-bottom: 10px;"><b style="border-bottom: 3px solid rgb(153, 153, 153); margin: 0px 0px 10px; padding: 5px; display: block; background-color: rgb(0, 80, 135); color: white; font-family: Trebuchet MS; font-size: 12pt; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px;">This lens is part of Greekgeek's Graphics Tutorials Suite!</b><a href="http://www.squidoo.com/graphics-layout">How to Align Images</a> &#8226; <a href="http://www.squidoo.com/upload-images">How to Upload Images</a><br /> <a href="http://www.squidoo.com/free-web-graphics">Where to Get Graphics (Legally!)</a> &#8226; <a href="http://www.squidoo.com/squidoo-graphics">Free Squidoo Graphics</a><br /> <a href="http://www.squidoo.com/amazon-listings">How to Fix Missing Images in Amazon Listings</a><br /> Photoshop Tricks: <a href="http://www.squidoo.com/glossy-buttons-tutorial">How to Make Glossy Buttons</a> &#8226; <a href="http://www.squidoo.com/photoframe">Add a 3D Frame to a Photo</a></p>

Drop Cap.

Test.

<b style="font-size: 50px; float: left; color: steelblue; line-height: 30px; padding-top: 2px; font-family: times">T</b>est.

This is centered.

Fancy <I>Numbered</i> List

  • 1The humble Text/Write module does it all: text, graphics, even HTML & CSS when you want to get fancy.

  • 2The Black Box module provides a striking background to emphasize a point. It forces me to be brief. (Yeah, right.)



<ul class="textlist_none"><li><img src="http://www.istad.org/lenses/modules/text-module.png" style="float: right; margin-bottom: 10px; margin-top: -10px;" /><p style="margin: 20px 0px; padding: 0px 15px 15px 20px;"><b style="font-size: 50px; float: left; line-height: 35px; padding-top: 2px; font-family: times; margin-right: 10px; color: #445; font-style: italic;">1</b><span style="font-size: 120%; line-height: 130%; color: #660000;">The humble <a href="http://www.squidoo.com/write_module"><b>Text/Write</b></a> module does it all: text, <a href="http://www.squidoo.com/graphics-layout" title="Squidoo Graphics tutorial">graphics,</a> even <a href="http://www.squidoo.com/css-codes" title="CSS codes tutorial">HTML &amp; CSS</a> when you want to get fancy.</span></p></li><li><p style="margin: 5px 0px 20px; padding: 15px 15px 15px 20px; background-color: #FFFF99; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px;"><span style="font-size: 120%; line-height: 130%; color: #660000;"><b style="font-size: 50px; float: left; line-height: 35px; padding-top: 2px; font-family: times; margin-right: 10px; color: #445; font-style: italic;">2</b>The <b>Black Box</b> module provides a striking background to emphasize a point. It forces me to be brief.</span></p></li></ul>

Yummy Purple Prose (And Poetry)


If I can stop one heart from breaking
I shall not live in vain.
If I can ease one life the aching
Or cool one pain
Or help one fainting robin
Unto his nest again
I shall not live in vain.


Photo by Mary Amanda Thompson, Creative Commons



<p style="background-image: url(http://www.istad.org/squidoo/robin/spring-flowers-6.png); background-repeat: no-repeat; background-color: #E5D7E0; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 30px; padding-top: 0px;"><b style="font-weight: normal; padding-left: 270px; display: block; padding-bottom: 0px; margin-bottom: 0px; text-align: center; line-height: 150%; font-size: 120%; color: #890086; font-style: italic;">

“Someday I shall Burst my Bud of Calm and Blossom Forth into Insanity.”

StickyNote

TOP: background-image: url(http://the.squidoocdn.com/images/modules/postit/bg-postit-body.jpg);height:25px;width: 234px;
BODY: background-image:url(http://the.squidoocdn.com/images/modules/postit/bg-postit-body.jpg);width:234px;height: 202px;

CSS Codes

Javascript Query Test

Google Creative Commons Search

Build a Better StickyNote

Cannibalizing Squidoo's Graphics

Have you ever gotten frustrated with the size of Stickies? I have.

This is MY StickyNote.
Bwah Hah Hah.
So I can do what I like.

That 300 character limit can be such a pain when you want to include links or italics or other snippets of code. Also, I want color!

Of course, if you fall off the bottom of the graphic,
it looks stupid.



<p style="margin: auto; width: 200px; padding: 10px 18px 0px; background-image:url(http://the.squidoocdn.com/images/modules/postit/bg-postit-body.jpg); color: #555;"><span style="font-weight: bold; display: inline-table; border-bottom: solid 3px black; width: 200px; padding-bottom: 5px;">Title Text Goes Here.</span>
<span style="font-family: Courier; font-size: 10pt;">Optional flexible area if you need more room.</span></p><p style="margin: auto; width: 200px; padding: 5px 18px 5px; background-image:url(http://the.squidoocdn.com/images/modules/postit/bg-postit-bottom.jpg); color: #555; font-family: Courier; font-size: 10pt;">Bottom area is limited to 202pixels vertically. .</p>

WE ALL LIVE IN

a purple submarine

a purple submarine

a purple submarine

Zazzle affiliates graphic & 3 columns for images

(I added caption,shading)

http://i1.squidoocdn.com/resize/squidoo_images/128/draft_lens8209221module136322481photo_1290789488zazzle.jpg



Before I give you any clunky suggestions, have you tried SquidUtil's [url=http://squidutils.com/tables.php]table generator tool[/url]? Notice you can tell it a different marker is the separator between columns, if you're using commas.

That might do it for you.

I think for a really precise layout on Squidoo, instead of using [b]width=3em;[/b] or something like that (width in ems), I might set the [i]font size[/i] to something in pixels, like: [b]font-size:15px; line-height: 22px;[/b] so it's in proportion with and will scale with fixed-width columns.

I think off the top of my head, if I wanted 3 columns, I'd do 'em something like:

Column 1
Column 1
Column 1

Column 2
Column 2
Column 2

Column 3
Column 3
Column 3




<p style="width: 180px; float: left; font-size: 15px; line-height: 22px; margin-right: 15px;">Column 1
Column 1
Column 1</p><p style="width: 180px; float: left; margin-right: 15px; font-size: 15px; line-height: 22px;">Column 2
Column 2
Column 2</p><p style="width: 180px; float: left; font-size: 15px; line-height: 22px;">Column 3
Column 3
Column 3</p>

Amazon Spotlight Module

Maximum product image size = 160x160 pixels; margin-left: -175px; margin-top: -50px;

Description field of Spotlight module. This is optional.
I've added a gray background so you can see the boundary of the text area.

Mordred's Lullaby

Mordred's Lullaby

Amazon Price: $0.99 (as of 02/16/2012)Buy Now

Your blurb ("Why is this worth spotlighting?") goes here. You will also be putting the IMAGE code for the product image into this field, then using negative margin-left and margin-top to scoot it left and up from the upper lefthand corner of this box.

For an absolutely square picture, it's easy: the width of the image is 160pixels, the margin-left is -175px, and the margin-top is -50px.

For an image that's wider than it is tall, it's still easy: the width of the image is 160pxels, the margin-left is -175 px, and the margin-top is still -50px. It just doesn't hang down as far vertically.

For an image that's taller than it is wide, you'll have to fiddle. I suggest a width of 110px, a margin-left of -125px, and a margin-top of -60px, but you'll almost certainly have to adjust the top. More negative makes it go up. More positive makes it go down.

Background-Image

No Right Clicky!

sdgsdgdsg
sdgsdgds

 



Code:
<p style="background:url(http://www.istad.org/lenses/graphics/under-construction.jpg); width: 300px; height: 300px; padding: 0px;"> </p>

A Knock at the Door

Twitter Share on Facebook Email It
Digg Stumbleupon Delicious

"Maaaster? There's someone at the door to see you..."
"Not right now, Igor, can't you see I'm --ZZAAAPP"

submit
Show All

by

Greekgeek

Author of , a travel diary by a writer with MAs in Classics and Mythological Studies.
Let's Visit: more »

Feeling creative? Create a Lens!

Explore related pages

RSS: Add your blog 

Loading Fetching RSS feed... please stand by

Related Tags