My Favourite CSS Tricks on Squidoo

Powered by: <p class="poweredby"></p>

Centred text: <p class="textcenter"></p>

Large text: <p class="large_16px"></p>

• A
• horizontal
• list:
• <ul class="twitter_follow_user"><li></li><li></li></ul>

A Post-It Note
<p class="postit-inner"></p>

Gray box with border
<p class="twitterstorm-post"></p>

The Most Important Thing
<p class="important-thing"></p>

The Most Important Thing (centred with blue border)
<p class="important-thing textcenter" style="border-color: #069;"></p>

Scroll back up to the top of this lens, and take another look at the Introduction module. What do you notice is different? How does it compare to this module, with the same image in the corner? (Bear with me while I pad this bit of text to be a bit longer, so that it demonstrates the effect that you would normally on a lens.)

Yes, long Introductions will usually wrap underneath the lens photo, as it does here, making it look untidy. It looks really bad if you have a border as well.

However, the Introduction of this lens does not wrap around the lens photo, and the border is drawn neatly around the text.

But you can fix that. How? Simply put the text into an indented paragraph, with the left margin set to 262 pixels:

<p style="margin-left:262px;">...</p>

The 262 pixels used here is the magic number that should work on most lenses, as the largest size a photo can be is 250 pixels. If your lens photo is a little smaller, you'll need to change this (width of the image, plus 12 pixels). For older lenses, 128 pixels often works well, as demonstrated here.

This same trick can be used on Text / Write modules that have a photo in the top-right corner, as shown by this example. The image you upload will be scaled down to 250 pixels, so use a right margin of 262 pixels to keep it clear. If your image is smaller than this, then adjust the margin accordingly. (And I'm going to have to fill then end of this paragraph so that you can really see the effect of setting the right-hand margin.)

<p style="margin-right:262px;">...</p>

<b style="color: #069;">...</b>

Web Links
Links are usually blue, but you can change them to be orange like this:

<a href="..." style="color: #c60;">...</a>

You can make a block of text stand out by putting in within a frame, very similar to "The Most Important Thing" module. The code to do this is below.

You can vary the color, line style and thickness to whatever you want. Full details about the border styles can be found on this page by the W3 Consortium.

<p style="border: 3px solid #f90; padding: 16px;">...</p>

Using very similar CSS, you can get the effect of a dividing line.

In this example, I've set only the border-bottom, styled as a double silver line. Note: Instead of putting your text inside the paragraph, you need to leave it empty, and put the text afterwards.

<p style="border-bottom: 3px double silver;"></p>...

Everyday tags like <b> and <a> are known as 'inline' tags, but you can change them into 'block' tags instead. The effect is similar to using <p>, but without the extra padding/margins you usually get. For example...

this line is bold, using <b> tag as a block with a background color.
All you need to do this is to use "display: block" in the style attribute of the tag, followed by any other styles you which to use. This technique works especially well on hyperlinks. You can click (or hover) over any part of the lines below to activate the links:

» Squidoo Homepage» Squid University» Google Search

Throw in some additional styles, such as borders, padding, centering and colors, and you can create some pretty interesting effects.

A very commonly used trick on Squidoo Lenses is to add an floating image to a module, and let the text flow around it - see how to do this on the HTML Tricks lens.

Everyone's an expert
on something!
www.squidoo.com

But what if you wanted to have a caption too, or not have an image at all?

Here is a floating paragraph that you can have anything you like in, and the surrounding text will flow around it.

<p style="float:right; width:200px;">...</p>

Someone on the forum recently asked: is it possible to center a YouTube video?
I suggested that they could use a floating paragraph to get the effect. Here's how:

First, edit the options of the module, and turn off the title, description, and maybe the rating and details too. (Because of a bug, you'll leave at least one of the options enabled.) Next, insert the following code into the module's description:

<p style="float: left; width: 140px; height: 1px;"></p>

I often use something very similar to replace the YouTube description on the right-hand side with something more appropriate that I have written. For that, you'll need to use the style "float: right; width: 300px;".

This trick also works on the new Video module, though you'll need to use 90px instead of 140px to center it. You'll probably find that this module looks much better than the YouTube module, because of the larger size and the lack of text on the side.

<p style="float: left; width: 90px; height: 1px;"></p>

Extending the technique described above to utilise two floating paragraphs, you can get text in two vertical columns.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait facilisi.

<p style="float:left; width:290px;">...</p><p style="float:right; width:290px;">...</p>