Advanced CSS: Tricks and Tips

Align Image With Caption ♦ Centering With CSS ♦ Navigation Bar ♦ Background-Images
The Most Important Thing ♦ Rounded Corners of Paragraphs ♦ Big Bold Lists ♦ Drop Cap
Side-by-Side Paragraphs and Columns ♦ Amazing Squidoo Introduction Modules

"Diadoumenos"
Photo Credit: Greekgeek

Squidoo's Text Module lets you upload a graphic and add a caption that pops up when you hover the cursor over it. But what if you need a caption that's not written in invisible ink?

At that point, it's best to shake off Squidoo's training wheels and host the image on another site (no HOTLINKING!), so you have more control. Then you can do this:

<p style="width: 150px; float: left; margin-right: 20px; text-align: center; font-size: 9pt;"><img src="http://www.example.com/image.jpg" width="150px">Photo Credit: <a href="http://www.flickr.com/username/2402242/">Greekgeek</a></p>

The code looks messy, but it's actually really easy:

1. Start a paragraph tag and add style, like this: <p style="
2.Set the paragraph's width to the width of the graphic, in pixels.
3. Float the paragraph left or right, and add padding on the opposite side.
4. Close the style and paragraph tag.
5. Place an IMG using the usual img tag. Close it.
6. Write the caption. Since the floaty paragraph is restricted to the width of the image, there's no room beside the image, and the caption wraps around below it.
7. Close the paragraph.

Now you've made an inset box floated to one side, containing the image and its caption. Start writing the content you want to fill in next to it after the code that makes the floaty box.

If there's great gobs of blank space under the caption, add a padding: 0px; to the initial paragraph style.

At the dawn of the web, people centered things with:
<p align="center">This is centered.</p>

This is STILL the easiest way to center objects in Squidoo, and it's what I do on lenses. If you're a Squidoo user, you can just use that, and skip to the next section right now.

But for pros, <p align="center"> is considered bad practice. You see, web designers quickly realized that tags should specify THINGS (paragraphs, images, links), while styles within tags should handle APPEARANCE (how they look). Confusing content and appearance (as early HTML did) got horribly messy with advanced layouts. So CSS was invented to handle appearance (style). Here is how we are supposed to center things, using CSS:

<p style="margin: 0 auto;">This is centered.</p>

The first number after margin: is top and bottom margins; the second is left and right. It's clean, it's elegant, and it's what I use on my own webpages.

Unfortunately, both Squidoo and Internet Explorer can't handle an advanced CSS concept like auto margins, even though auto margins became the standard over a decade ago!

Kludge time. For text-only content, use:

<p style="text-align: center;">This is centered.</p>

For images, use:

<p style="width: 100%;"><span style="display: block; width: 60px; margin: 0px auto;"><img src="http://www.example.com/image.jpg"></span></p>

In other words,

1. Set the width of the outer container (the paragraph, in this case; on non-Squidoo webpages you could use a DIV) to 100%.
   
2. Specify the exact width of the inner container (<p> if you're using DIVS; or i, b, or span set to display: block; if the outer wrapper is a paragraph). With images, use pixels; with text, use ems (the width of the letter m).
   
3. Give the inner container auto margins.
4. INSIDE the inner container, put your image, or even an image plus some text. The text will wrap around when it hits the width of the inner container (this is a way to have a caption):

Why, oh why?

<p style="width: 100%;"><span style="display: block; width: 60px; margin: 0px auto;"><img src="http://www.example.com/image.jpg">Why, oh why?</span></p>

Whoops. The text still isn't quite centered. Use text-align, too:

Why, oh why?

<p style="width: 100%;"><span style="display: block; width: 60px; margin: 0px auto; text-align: center;"><img src="http://www.example.com/image.jpg">Why, oh why?</span></p>

Ugh. Stupid CSS hacks.

When all is said and done, even though it's bad practice and will someday be phased out, on Squidoo, I just use this:

Never do this

<p align="center"><img src="http://www.example.com/image.jpg"><br>Never do this</p>

Political Lenses ♦ Travel Lenses ♦ Biography Lenses ♦ Cool Science Lenses

This is the most popular advanced CSS technique on my Fancy Tables of Contents lens, where I've got a lot of snazzy-looking CSS tricks for making menus and lists.

So let me repeat myself -- and that code -- on this lens. The blue words link to the section in my beginner's CSS tutorial explaining what each term means:

<p style="border: 2px #999 solid; background-color: #046381; color: lightblue; padding: 5px 20px; text-align: center; font-family: Arial; font-weight: bold;"><a href="url1" style="color: white;">Political Lenses</a> &#9830; <a href="url2" style="color: white;">Travel Lenses</a> &#9830; <a href="url3" style="color: white;">Biography Lenses</a> &#9830; <a href="url1" style="color: white;">Cool Science Lenses</a></p>

Here's a special character codes chart that I use to make dividers like ♥ and ♦.

Warning: Use this trick only if you have a good reason for it -- not just "it looks cool," but rather, some functional reason why a plain old paragraph won't cut it. Web users tend to click away from pages with excessive decorations, especially borders and backgrounds.

If you have a graphic uploaded somewhere, you can use it as a background for paragraphs:

<p style="background-image:url(http://www.someplace.com/image.jpg); padding: 15px;">Paragraph text goes here</p>

By default, background-images repeat like tiles in a mosaic floor. If the graphic is narrower than the paragraph, it tiles horizontally.

For example, the background-image I'm using is tall and skinny, and it's repeating just like this equals sign: =======================

If the graphic is SHORTER than the paragraph, it tiles vertically.

For example, let's borrow the header from Squidoo's purple people eater theme:

<p style="color: white; padding: 10px; background-image: url(http://the.squidoocdn.com/imgs/themes/new/purple/header_bg.png);">

Whoops! The top of the graphic is lighter the bottom, so when it tiles, you see the seam.

There is a second attribute, background-repeat, that allows you to restrict the tiling to horizontal (background-repeat: repeat-x;), vertical (background-repeat: repeat-y;), or none at all (background-repeat: repeat-none;). This lets you control pesky graphics that look lousy tiled in one direction.

It's a good idea to set a background-color as well, which will paint the paragraph background anywhere that the background-image doesn't cover.

So let's try this again:

<p style="color: white; padding: 10px; background-repeat: repeat-x; background-color: #692f6f; background-image: url(http://the.squidoocdn.com/imgs/themes/new/purple/header_bg.png);">

I chose the background-color by getting the color code from the bottom edge of the graphic, using the Colorzilla Firefox Add-on. If you've got a graphic in Photoshop, use the eyedropper, then double-click the color swatch below the toolbar to find the code for that color.

Color TIP: When using a dark-colored background, Squidoo's default blue links tend to vanish. I changed the link color above like this:

<a style="color: yellow;" href="http://www.colorzilla.com/firefox/">....</a>

**"We control the horizontal, we control the vertical." -- Opening of The Outer Limits

There's a Squidoo module, The Most Important Thing, which puts an orange border around paragraphs and makes the font huge.

TOO huge, in my opinion. Instead, I use a Text Module with this CSS code:

<p style="border: solid #f90 10px; padding: 20px; font-size: 140%;">

There, that's better.

Now, since you're not bumping against a 500 character limit, you can also style spans of text within this paragraph. For example, how about making these words stand out?

Here's how:

<span style="font-size: 150%; font-weight: bold;">these words</span>

You can apply any CSS codes you like with that span tag.

Where do all these CSS codes come from, anyway? Well, the W3 consortium, an international nonprofit thinktank, draws up a list of standardized codes, then leaves it to web browsers to implement them.

PROBLEM: What happens when W3 comes up with new codes for things like rounded corners? There's a lag-time while web browsers implement them.

Firefox, Safari, Opera and Chrome can display rounded corners, but they came up with rounded-corners codes before the standard was announced, and their codes don't quite match. IE can't display rounded corners; it leaves them square. So, for now, you have to give one set of commands to Firefox/Chrome, one to Opera/Safari, and shake your fist at IE for being clueless:

<p style="border: solid #f90 10px; padding: 20px; font-size: 140%; -webkit-border-radius: 20px; -moz-border-radius: 20px;">

Sooner or later, all web browsers will implement the W3 standard, which is just border-radius.

That's what this paragraph is using. It probably has square corners on your browser. If it looks rounded, congratulations! Your web browser is up to date.

Once web browsers adopt this standard, it's still a good idea to keep the old clunky -moz and -webkit code for those people who haven't updated their browsers.

You can also set individual rounded corners, but the code is really squirrelly due to the not-quite-standard standards:

<p style="-moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; padding: 20px; color:white; background-color: #266806; background-image: url(http://the.squidoocdn.com/imgs/themes/new/green/header_bg.jpg); background-repeat: repeat-x; ">

All that light green stuff is creating the background-image and colored text; it's those border-radius attributes that do the rounded corners.

I'll update this lens when I hear that any of the browsers have finally implemented the standardized standards that W3 recommended everybody use:

border-top-left-radius, border-bottom-right-radius, etc.

Webpages look better with graphics dividing up blocks of text. But it's PITA trying to find good web graphics which are free to use.

Here's one of my tricks for making a snazzy-looking 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.

-- Beginning of a list of My Favorite Modules

Brace yourself: scary code!

<p style="margin: 0px; padding: 0px 15px 10px 20px; font-size: 120%; line-height: 130%; color: #600;"><b style="font-size: 50px; float: left; line-height: 35px; padding-top: 6px; font-family: times; margin-right: 10px; color: #445; font-style: italic;">1</b>This is where the paragraph text goes for your first list item.</p>
<p style="margin: 0px; padding: 15px 15px 10px 20px; font-size: 120%; line-height: 130%; color: #600; background-color: #ff9; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px;"><b style="font-size: 50px; float: left; line-height: 35px; padding-top: 6px; font-family: times; margin-right: 10px; color: #445; font-style: italic;">2</b>The second paragraph's text goes here.</p>

You can repeat those two paragraphs as many times as you like, changing the NUMBER enclosed by the blue tag (change 1 to 3 for list item #3 for example), and changing the gray text to your content.

UPDATE: The Squidoo Text List module has now added a "large numbers" option which looks a lot like this CSS trick. Try it and see what you think!

This one is easy. Woot.

<b style="font-size: 50px; float: left; color: darkred; line-height: 30px; padding-top: 2px; font-family: times">T</b>his one is easy. Woot.

You may want to fine-tune the font-size, padding, etc. it's all just pixels.

Side-by-side paragraphs are useful for many things, including tables of contents. For example, from my Volcanoes lens:

Mount St. Helens
Mount Vesuvius
Krakatau (Krakatoa)
Mt. Pelée
Mount Paricutín
Mount Pinatubo

Tambora
Thera (Santorini)
Surtsey
Yellowstone
Mount Redoubt, Alaska
 

The CSS for side-by-side paragraphs is pretty easy. The basic strategy is to set a paragraph's width to HALF (or less) of the available space, and FLOAT it to the left. The next paragraph will snuggle in next to it, filling the remaining space.

<p style="width: 280px; float: left;">Paragraph one text goes here. Set the width to half the space available minus the width of column #2's margin. For line breaks in Wordpress and Squidoo,
just skip a line. For linebreaks on regular webpages, use use <br> not <p>.</p><p style="font-size: 9pt; margin-left: 15px;">Paragraph two text goes here. Since the first paragraph was set FLOAT and is narrower than the available space, this one fills in next to it.</p>
<p style="clear: both;">Ends side-by-side paragraphs and starts a new paragraph that is as wide as both of them. (NOTE: This doesn't work for Squidoo Introduction Modules. See below.)</p>

If you want to make MORE than 2 side-by-side paragraphs, then use the CSS for column #1 (the floaty paragraph) in columns 2,3,4, etc. Each object with style="float: left;" floats as far to the left as it can. If there's already a floaty paragraph or image there, it fills in to the right of that object until it runs out of room. If it's too wide for the available space, it goes to the next line. This is how you make table-like CSS layouts.

What if you need stretchy columns (liquid columns) that expand to fill the width of the browser window? Then you use percents.

Column one. Column one. Column one. Column one. Column one. Column one. Column one.

 

Column two. Column two. Column two.

 

Column three. Column three. Column three. Column three. Column three.

New paragraph! But this one will stretch to fit the whole page. Blah blah blah blah blah blah.

CSS for three flexible columns (side-by-side paragraphs):

<p style="float: left; width: 28%;">Column one. Column one. Column one. Column one. Column one. Column one. Column one.</p><p style="float: left; width: 2%;">&nbsp;</p><p style="float: left; width: 28%;">Column two. Column two. Column two.</p><p style="float: left; width: 2%;">&nbsp;</p><p>Column three. Column three. Column three. Column three. Column three.</p><p style="clear: both;">New paragraph! But this one will stretch to fit the whole page. Blah blah blah blah blah blah.</p>

See that funny &nbsp; code? That's a nonbreaking space. I've created 2% wide "dummy columns" to serve as buffers (stretchy margins) between the text-containing columns. But browsers won't display empty paragraphs, so I insert one nonbreaking (and invisible) space in dummy paragraphs to make them show up.

If you want a graphic side-by-side with columns, just treat the graphic as another column, using the same style="" code that you used above for floaty paragraphs as the style for the IMG.

If you're using borders on your side-by-side columns, you may run into width issues where the border-widths are making your column layout too wide for the space it's in. Be sure to subtract extra space for the borders. For more help with borders and multi-column CSS layouts, see my older tutorial, Advanced CSS Layouts: Side-by-Side Paragraphs with Borders.
 
 
Side-by-Side Paragraphs in Squidoo Introduction Modules

Squidoo Introduction Modules behave strangely, because there's a floating lens logo graphic pushing things around. Remember how I used <p style="clear: both;"> to signal a new paragraph beneath the columns? That won't work, because it stops ANY side-by-side behavior. It won't even let a paragraph be next to the lens logo.

There are two solutions.

• On lists like the one above, where each paragraph is a fixed number of lines, put this after the last list item in paragraph two (right after "Alaska" in my example above): <br>&nbsp; That adds a dummy line of blank space-- a fake list item. In this way, you can even out both paragraphs so they're the same height.
  
• If you're writing paragraphs of free-form text, that won't work either. It requires something a little more complex:

Paragraph one text goes here.Paragraph one text goes here.Paragraph one text goes here.Paragraph one text goes here.Paragraph two goes here. Paragraph two goes here. Paragraph two goes here. Paragraph two goes here. Paragraph two goes here.

First, calculate (X = 590 - [width of graphic in pixels]). That's how much room you have to work with next to the logo graphic. Then use this code:

<p style="width: [X]px;"><span style="display: block; padding-bottom: 0px; width:[X/2 - margin of column 2]px; float: left;">Paragraph one text goes here.</p><span style="margin-left: 20px; display: block; padding-bottom: 0px;">Paragraph two goes here</span></p>

See what I did? The enclosing paragraph hogs all the horizontal space between the lens logo and the righthand margin of the lens, so nothing can go side-by-side next to it.

The span tags behave as mini-paragraphs inside the paragraph. The width of column one is half the width of the space available (X), minus a little more so that columns one and two aren't smooshed together.

The Introduction Module is the only part of your content that shows "Above the Fold", and you're competing with banner ads, the Discovery tool, and Squidoo links to convince readers to scroll down and look at your lens. So make the most of it. But how?

You need to make the lens logo your friend. It has to be big, bold, and eye-catching. But you also need text next to it to lure readers further down on the page.

Once you start trying to add borders and paragraph colors to the introduction text to make it stand out, you'll discover something strange about the lens logo. It's "floated left" so the Introduction text fills in beside and below it.

This causes the lens logo to overlap the upper left border of colored paragraphs, as on this lens by The_Bard. See how the white background of the graphic is hiding the dotted border?

I've found two techniques to fix this.

1. Trick Squidoo into expanding the paragraph by setting negative margins on the left and top:

<p style="margin-top: -10px; margin-left: -10px; background-color: black; color: white; padding: 10px 20px;">

I'm wary of this technique, because (a) you can't expand the margins too far or they'll run into the title above them, and (b) negative margins sounds a little dicey -- Explorer and Firefox handle them, but I can't be sure this looks good on all browsers.

2. Scoot the margin of the text area to the right of the logo.

<p style="margin-left: 250px; border: 2px solid #999; font-size: 18px; line-height: 22px; padding: 10px 20px;">

Make the margin-left the width of the logo graphic + 10-20 pixels for padding.

Now the text will NOT fill in around the bottom of the lens logo. If the paragraph is taller than the logo, it will hang down below the lens graphic.

It's important to set the font-size and line-height in pixels. That ensures the text is proportional to the graphic, so they will scale together. Otherwise it's hard to be sure that their bottom edges will line up exactly the same way on different computers and browsers.

Then I adjust the font-size and line-height until I've got the bottom of the text paragraph lined up with the bottom of the lens graphic. I sometimes need to adjust the padding as well. Getting everything lined up can be time-consuming, but the effect is very sharp.

Once the bottom edges of the first paragraph and lens logo are even, the next paragraph will go under both of them, spanning the lens column. This is useful for navigation bars.

Tip: Click one of the lens thumbnails at the top of this section to visit it, choose "View Source" under the "view menu", then use Find to find "module_intro". There you'll find the CSS code I used to make the introduction module's paragraph borders and colors for that lens.

Squidoo throws a few extra curveballs to challenge people who know basic CSS. We're used to setting up style sheets to define custom formatting for parts of our page -- the headers, links, images and so on.

Instead, Squidoo lenses have a built-in style sheet that provides a consistent look and feel to Squidoo lenses. Squidoo doesn't recognize the <div> or <span> tags, probably because it's so easy to make a huge mess with them. But if we absolutely insist on tweaking Squidoo's clean and friendly styles, we can use in-line CSS, tucking extra CSS code inside of formatting tags like italics and emphasis, objects like links and images, and in paragraph tags.

As you scroll down this lens, you'll see why Squidoo is so strict on styles: unless you're very methodical and restrained in your use of CSS, you can wind up creating a garish patchwork of fonts, colors, and dividers! CSS is powerful, and power can be abused. (Let me point to Euryale's discreet use of font changes for a more subtle use of CSS.)

One last quirk of Squidoo is that it automatically throws in <br> whenever you hit return, so you'll have to be careful of unintentional paragraph breaks signalling the end of one paragraph (where you've carefully added a bunch of CSS), and the beginning of a new one.

 

Okay, it's time to start experimenting.

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Here's the code for that example:

<p style="float: left; width: 25%;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
<p style="float: left; width: 25%;">Sporks
<p style="float: left; width: 25%;"><img src="http://www.istad.org/squidgraphics/hunh.jpg">
<p style="float: left; width: 25%;">Jabberwocks That Burble</p>
<p style="clear:both;">

In sum, what I did was:

• Choose the number of columns I wanted. Four? Okay, then I need to set the WIDTH of each paragraph to 25%.
  
• Set the paragraphs to float so they'd align side-by-side, instead of <p> starting a new line like it usually does. I chose float: left so they'd line up left to right; if you say float: right they line up right to left.
• Created an honest-to-gosh new line with <p style="clear: both;"> because otherwise the next line (the teal dashed line and "Here's the code...") tried to squash itself into the Jabberwock column under "Burble."

 

Paragraphs can serve as handy dividers.

You've got five pieces of a paragraph to play around with: the background, and the top, bottom, left and right border.

For example, if I wanted to make a gray paragraph with a multicolored border:

I'd probably end up with something pretty garish.

Here's the code for that mess:

<p style="background-color: #ddd; border-top: solid 2px red; border-left: double 4px blue; border-right: dashed 1px green; border-bottom: dotted 7px purple; text-align: center; color: teal; width: 60%; margin-left: 20%;">I'd probably end up with something pretty garish.</p>

However, with a little more restraint, one can come up with all sorts of tricks to make up for the fact that Squidoo text modules don't recognize <hr>.

Tip: The W3 Schools website lets you view and test examples of CSS borders and backgrounds.

For example, here's code for making sub-headings inside of text modules:

<p style="border-bottom: teal 1px dashed; width: 70%; margin-bottom: 6px; color: teal; font-weight: bold;">You can include formatted text...

Here's the result:

You can include formatted text...

You can also use an empty paragraph with a border and a background color to make a two-tone divider. I find I need to include a nonbreaking space (&nbsp;) to force the empty paragraph to display:

<p style="font-size: 8px; line-height: 8px; background-color: orange; border-top: solid 2px #333; margin-bottom: 3px;">&nbsp;</p>

which creates the following:

 

In some of my side-by-side examples above, I used percentage; in others I used pixels.

Percentage is safer: it's a fraction of the total column width, so as long as you don't try to jam too much into a column, it'll fit your Squidoo lens.

However, images tend to go fuzzy or blocky if you specify their dimensions in percentage or ems (you can do the latter, by the way). So sometimes you need to use pixels.

Question: How wide is a Squidoo column, really?

Here's my orange paragraph with no width set. So the width is the column default.

UPDATE 4/17/08: The width of a maxed column's content is now 590px, but images extend past it and crop at 620px. The cropping may vary slightly by browser.

When I unmaxed this lens as a test, I found that paragraphs were 600 pixels wide, and graphics got cropped at 600 pixels as well.

 

What on earth did I do to get this? Brace yourself.

Wonder
what
this
does?

I created this fancy chunk of CSS-formatted text and a floated image and tried pasting it into various modules. Here's the results.

You probably shouldn't create something that complicated, because chances are it'll look different on different browsers. But just in case you want to pluck out some trick from the above example, here's the code I used to create it:

<p><img src="http://www.istad.org/squidgraphics/hunh.jpg" style="float: right; width: 60px; background-color: #dee; border: dotted 1px #abe; margin-top: 6px; padding: 10px; padding-bottom: 22px;" /></p><p style=" float: right; background-color: #ded; border: dotted 1px #eba; margin:0; width: 5em; height: 101px; text-align: center; font-family: monaco; color: #bab; font-size: 10px;"><br />Wonder<br />what<br />this <br />does?</p><p style="float: right; background-color: #ede; border: dotted 1px #bae; margin:0; padding-left: .5em; padding-right: .5em; width:50%; height: 101px; color: #a7c;">I created this fancy chunk of CSS-formatted text and a floated image and tried pasting it into various modules. Here's the results.</p><p style="clear: both;"></p>

I was being paranoid about line breaks because Squidoo tends to interpret them as <p> even when I don't want an extra one. Unfortunately, omitting line breaks makes code hard to read.

Also, I foolishly used float: right instead of left. Try selecting the text in those paragraphs, and you'll see they're arranged on the page in reverse, which would really screw up somebody trying to copy/paste the content. (On the other hand, that might be an interesting way to drive plagiarists bonkers!)

 

Here's how I set up the photo credits for my Jackie Robinson lens.

Here I linked to the source of each image, the photographer's name, and the Library of Congress' notes regarding how it could be used.

Once again I am incredibly grateful for Creative Commons searches.

But in this case my little "hunh?" doodle was something I whipped up in 2 minutes on Corel Painter.

Are you getting tired of this graphic?

Here's my tribute to Prometheus.
Unfortunately, classics and mythology majors should not be allowed to create LOLCATZ style graphics.

The code for this layout looks pretty complicated, but most of the CSS is just fine-tuning with padding and margins.

The basic concept is much like the four-paragraph layout above, except that this time, I have rows of two paragraphs, each one set to a width of 200px (which is a little less than half a maxed Squidoo column, giving me wiggle room for margins).

Inside each paragraph, I have an image that is ALIGNed left or right within that paragraph. In other words, each paragraph has the following skeleton:

<p style="float: left; width: 200px; height: 130px; background: #eee;"><img src="image.jpg" align="left OR right">

Now, throwing in some text formatting, padding and margins, it looks like this:

<p style="float: left; padding: 15px; font-size: 9pt; height: 130px; width: 200px; background: #eee; margin-right: 10px; margin-bottom: 10px;"><img src="http://www.istad.org/squidgraphics/hunh.jpg" align="left" style="margin-right: 20px;"><br>Here I linked to the source of each image, the photographer's name, and the Library of Congress' notes regarding how it could be used.</p> <p style="float: left; padding: 15px; font-size: 9pt; height: 130px; margin-bottom: 10px; width: 200px; background: #eee;"><img src="http://www.istad.org/squidgraphics/hunh.jpg" align="left" style="padding-left: 10px; margin-right: 20px;"><br>Once again I am incredibly grateful for Creative Commons searches.</p>

<p style="float: left; padding: 15px; font-size: 9pt; height: 130px; width: 200px; background: #eee; margin-right: 10px; margin-bottom: 10px;"><img src="http://www.istad.org/squidgraphics/hunh.jpg" style="margin-right: 20px; float: left;"><br>But in this case my little "hunh?" doodle was something I whipped up in 2 minutes on Corel Painter.</p><p style="float: left; width: 200px; padding: 15px; font-size: 9pt; height: 130px; margin-bottom: 10px; background: #eee;"><img src="http://www.istad.org/squidgraphics/hunh.jpg" height="120px;" align="left" style="padding-left: 10px; margin-right: 20px;"><br>Are you getting tired of this graphic?</p>

<p style="float: left; padding: 15px; font-size: 9pt; height: 200px; width: 440px; background: #eee; margin-right: 10px; margin-bottom: 10px; text-align: center;"><img src="http://www.istad.org/store/prometheuslol.jpg" style="float: left; margin-right: 20px; margin-left: 40px;" height="190"><br><br><b>Here's my tribute to Prometheus.</B><br> Unfortunately, classics and mythology majors should not be allowed to create LOLCATZ style graphics.</p>

Addendum Margaret Shaut asked in a comment:

"One question: can't this be used very well in the link list module? I've used the link list (sans links) for places where I needed to do things I couldn't elsewhere. The Link List is a very flexible module."

Answer: yes, what a good suggestion! Although I think one could only get one photo + credit per link. However, the Text List essentially provides you with ready-made rows, so then you merely need to worry about columns. Remember both modules as layout tools.

 

In the examples above, I was having alignment problems. I kept having to hack by adding pixels or fiddling with percentages.

Let's find a way to align columns.

Starting with the 4-column experiment:

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

What happens if I add dotted borders with border: dotted 1px?

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Uh oh! Three problems.

• Double-thickness borders between columns.
  
• At least on my browser, the borders aren't counted as part of the column's width, so they push the total width of four columns to more than 100%. Ack. It's time to go with fixed widths, since Squidoo modules are fixed width.
  
• The column heights don't line up. In the last example I solved this by setting a fixed pixel height, but now I'm going to use ems -- the width of a lowercase m -- so that the columns will stretch or shrink to fit the height of the text in them.

Here's a mock-up of what we're aiming for with the various dimensions labelled.

1. First, YOU decide:


• N = the number of columns you want.
  
• BW = how wide you want your borders, in pixels. My example has 1-pixel borders.
  
• Total width, in pixels, of your table. In layout experiment #3, I discovered that the maximum width of a maxed lens module is 590 pixels, and for an unmaxed lens it's 600 pixels. If you exceed the maximum width, your columns will wrap strangely!
  
• border-style. For my example, I've chosen "dotted," but you can pick a different style.


2. Second, you'll need to do some math.


• B = BW x (N + 1). B is the total number of pixels set aside for borders.
  
• C = (T - B) / N. C is the width of your columns in pixels.


3. Okay! It's time to create a rough draft of your table.


• For the first column, you'll want borders on all four sides. Define the column like this (feel free to change "dotted" to a different style):
  
  <p style="float: left; width: Cpx; border: dotted BWpx;">Your Content<p>
  
  
• For the rest of the columns, you'll only want borders on three sides; otherwise the left side will be double-width. So define them like this:
  
  <p style="float: left; width: Cpx; border: dotted; border-width: BWpx BWpx BWpx 0px;">Your Content<p>
  
  
• After setting up all your columns, end with
  <p style="clear: both;">
  
  
• Now you'll need to SAVE your text module to see how it looks.
  
  
• Here's my example (I've made the columns narrower to fit this indented list):
  
  

  Widgets
  Widgets
  Widgets
  Widgets
  Widgets
  

  Sporks
  

  
  

  Jabberwocks That Burble
  

  
  <p style="float: left; width: 100px; border: dotted 1px;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
  <p style="float: left; width: 100px; border: dotted; border-width: 1px 1px 1px 0px;">Sporks
  <p style="float: left; width: 100px; border: dotted; border-width: 1px 1px 1px 0px;"><img src=http://www.istad.org/squidgraphics/hunh.jpg>
  <p style="float: left; width: 100px; border: dotted; border-width: 1px 1px 1px 0px;">Jabberwocks That Burble
  <p style="clear: both;">



4. Now you can calculate your column heights.


• After some experimentation, I found that text line-height is between 1.2 and 1.4 ems, depending on the font. For ease of calculation and to give a little wiggle room, I upped this to 1.5. So:
  
• L is the number of lines of text in your tallest column.
  
• H = L x 1.5. H is the height of a column measured in ems. Calculate H, then,
  
• Insert this into your style-definition (after width: Cpx is a good spot):
  height: Hem;
  
  
• Here's my example after doing that:
  
  

  Widgets
  Widgets
  Widgets
  Widgets
  Widgets
  

  Sporks
  

  
  

  Jabberwocks That Burble
  

  
  <p style="float: left; width: 100px; height: 7.5em; border: dotted 1px;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
  <p style="float: left; width: 100px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;">Sporks
  <p style="float: left; width: 100px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;"><img src=http://www.istad.org/squidgraphics/hunh.jpg>
  <p style="float: left; width: 100px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;">Jabberwocks That Burble
  <p style="clear: both;">

Final comments:

• You can define <IMG> dimensions in ems, so you can make sure an image won't spill over the bottom of a column by defining its height in ems and letting the browser figure out the width. The disadvantage is that images get fuzzy or blocky when the browser resizes them.
  
  
• Since the column widths had to be set in pixels to work with border-widths, it's possible that your text may overflow columns horizontally if someone has their text displaying at a larger size than yours. Try increasing text size in your browser's VIEW menu to get a sense of this.
  
  
• To change the background color, or even to make a repeating image as a background, check out the W3 Schools page on CSS backgrounds. If that all looks too intimidating, just use background-color: #colorcode; using a color code from this chart.
  
  
• This same technique works on non-Squidoo pages, of course! But there you'll probably want to use <div> instead of <p>, and define your .first-column and .default-column in a style sheet instead of inline.
  

Okay, now for the final test: how do we get multiple rows without using a table? In other words, where's our faithful old <TR>?

I'm guessing the equivalent would be clear: left inside the style-definition for FIRST paragraph of the new row. Let's see.

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Whoops! By default, paragraphs have margins before and after them, plus I've got the double-border problem between rows now. So we need to apply margin: 0px; to each row, and for rows below the first row, we'll have to set the top-border width to zero.

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

Widgets
Widgets
Widgets
Widgets
Widgets

Sporks

Jabberwocks That Burble

<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted 1px;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;">Sporks
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;"><img src=http://www.istad.org/squidgraphics/hunh.jpg>
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 1px 1px 1px 0px;">Jabberwocks That Burble
<p style="clear: left; margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 0px 1px 1px 1px;">Widgets<br>Widgets<br>Widgets<br>Widgets<br>Widgets
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 0px 1px 1px 0px;">Sporks
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 0px 1px 1px 0px;"><img src=http://www.istad.org/squidgraphics/hunh.jpg>
<p style="margin: 0px; float: left; width: 120px; height: 7.5em; border: dotted; border-width: 0px 1px 1px 0px;">Jabberwocks That Burble
<p style="clear: both;">

If you don't want your text/images bang up against the lefthand edge of each column, use padding and/or text-align: center;

To scoot contents down vertically, I recommend plain old line breaks.

 

Well, gosh darn, this is easy!

I've been having trouble getting <P align=center> to work lately-- who knows why-- and we can't use <div align=center> because Squidoo doesn't trust us with the POWER OF THE ALMIGHTY DIV! *woo*

Er, anyway.

Other CSS gurus probably knew this, but I didn't.

If you've specified the width of something (in ems or pixels), then set the left and right margins to auto.

The shorthand margin: X Y; sets the top and bottom margins to X and the left and right margins to Y. So:

w00t

is created by: <p style="margin: 0 auto; width: 2em;">w00t</p>

If you don't know the width of something, then set the margins to equal percentages.

<p style="margin: 0 30%;">Behold the Jabberwock!</p> produces:

And hast thou slain the Jabberwock? Into my arms, my beamish boy!

Note that in this case, the text isn't centered -- the block as a whole is centered. To center the text as well,

<p style="margin: 0 30%; text-align: center;">Behold the Jabberwock!</p> produces:

And hast thou slain the Jabberwock? Into my arms, my beamish boy!

Vertical centering is still a PITA. Also, IE5 and lower don't understand auto margins. But at worst that means some people will see your centered stuff left-aligned.

 

I got pretty complicated back there, but sometimes you just need a list with graphic on the left, description on the right. See "How to Fix Amazon Listings With Broken Images" if you're trying to tweak the Squidoo Amazon module.

But if this is the sort of layout you want, read on:

My main Cafepress store.

My other Cafepress store.

This is easy peasy. For each image + description combination, do this:

<p style="clear: left;"><img src=[imageURLgoeshere] style="float: left; margin-right: 20px;">Put your image description here. To have the text start partway down from the top of a graphic, as I did for the second store, use one or two <br> line breaks to skip lines at the start of the description.</p>

See what I've done? The float: left; sends the image all the way to the left, so the text description will flow around it to the right. The clear: left; makes the next paragraph override the float: left of the image above it, and start on a new line.

Now, to tweak the spacing:
-- Want more padding on the left? Insert margin-left: 20px; in the paragraph or image style tag.
-- Want to or expand the size of a margin or the space between image and text? Change 20px to however many pixels you want
-- For extra space between each entry, hit return before starting the <img src=...> tag, or you can get snazzy and add a margin-botton: 15px; to each paragraph's style tag.

 

Well, between the new photo gallery module and SquidUtil's Table Layout tool, a lot of my earlier experiments are obsolete. But here's a fun one I've been doing lately: Rounded corners!

Unfortunately, Microsoft can't figure out how to support it, and says they'll include it in IE9...maybe. No one knows what gives; it's been part of standard CSS for years. So please remember your poor deprived IE users who will be seeing square corners.

Whee! This uses the CSS property called "border-radius".

CSS Code:

<p style="background-color: #f90; color: white; font-size: 14pt; font-weight: bold; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">Whee, Lookit the Rounded Corners! </p>

Most of that gobbledygook is just font formatting, coloring the paragraph background, and a bit of padding so the text isn't jammed against the outsides of the paragraph.

So tossing out all the fonts-related stuff, here's the "sandwich" you need to use:

<p style="background-color: [some color]; -webkit-border-radius: [number]px -moz-border-radius: [number]px">

But why does it seem to specify the border-radius twice? Because some browsers implemented it one way, before it was made standard, some came up with another way. -moz stands for "Mozilla", and -webkit is Safari, Opera, and ... Google Chrome, I think. In another year or two we should be able to use plain old border-radius, but in the meantime you have to repeat yourself.

Note: you don't have to set a background color. Instead, you could make, say, a round border, like this:

OK

<p style="border: solid 10px #f90; width: 30px; height: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; text-align: center; padding: 2px;">OK</p>

So, putting it all together, we can have a shaded paragraph with a round border, and then, inside of it at the top, we can put a colored titlebar. Insta-widget!

Woo, a WidgetOption 1 :: Option 2
Option 3 :: Option 4

<p style="text-align: center; font-size: 9pt; font-family: Arial; font-weight: bold; line-height: 14pt;background-color: #eee; border: solid 1px black; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 0px; width: 11em;"><b style="text-align: center; display: block; background-color: navy; color: lightgray; font-size: 10pt; padding: 2px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-bottom: solid 1px #black;">Woo, a Widget</b><b style="display: block; padding: 3px; text-align: center; margin: 0px;">Option 1 :: Option 2<br:>Option 3 :: Option 4</b></p>

Gah, what a mess, eh? I color coded it thusly:

black: The black border and gray background, the overall paragraph. Notice I had to set the width so the widget wasn't as wide as the whole column. I used em instead of pixels since I don't know how big fonts are on different computers... they may take up more or less pixels, but em is always the width of the letter em. You'll have to adjust this to fit the width of your text.

Navy: The navy strip at the top of the widget, including the light gray lettering. I got sneaky here. Just as you can set the top, bottom, left and right margins or padding individually, you can have different rounded corners. So I made the top left and right corners round -- and a little smaller than the outer paragraph so the navy wouldn't spill over the border -- but left the bottom two corners alone. Border-bottom draws the horizontal divider at the bottom of the navy area.

Gray: This is a little more formatting to get the letters inside the main body of the widget centered and (more importantly) with padding so they don't jam against the black border. I couldn't put padding on the whole widget, or the navy section would've had a light gray border around it.

I hope that makes sense. If not, just copy and paste the code, changing the words to suit your content. :)