Advanced HTML For Borders & Backgrounds On Squidoo

Here are some of the things I did to spruce up How To Add A Custom 'Contact Me' Button To Your Squidoo Lens.

My first problem was the mismatch on the Intro. It bothered me a bit when I first made the Lens, it was the first thing that stood out when I looked at the published Lens.

I really do not like the image to be so much larger in the vertical dimension than the text area, especially when it sticks out both above, and below.

By default, I usually use "padding 15px;" for all of my text borders. This gives an equal buffer all the way around. I like this when working with borders because I don't like having my text to close to the edges.

I'm also using "font-size: 15px;" which is important because the size of the text also makes a difference in the border size.

The big problem I had with this is that while in the workshop, the border does not look the way it will after it is published. Here I've managed to expand the bottom, but there is more orange border beneath the Intro Image than I want.

After changing the padding a few times, I finally settled on "padding: 30px 10px 20px;" which gives me a little more on top, a little less on the sides and a bit more on the bottom than my starting point of 15px all around.

In case you don't understand how the padding numbers work, with one number, the space on all four sides is set to that one size. Two numbers will use the first for top/bottom, and the second is for right/left. With three numbers like I'm using, the first is for top, second for right/left and third for the bottom.

If you needed different numbers on all sides, the first is top, second is right, third is bottom, and fourth is left.

It may not have looked like what I had in mind while still in the Workshop, but this is how it looks after being published.

My next problem seemed too big for padding, so I decided to add Non-Breaking Spaces. They are typed into HTML as  

Non-Breaking Spaces are shown as blank spaces when the text module is not in editing mode.

If you've ever tried to make more than one space or line appear, you've probably noticed that web pages only allow one space between characters or lines.

Non-Breaking Spaces are how you get around that. I've used them in many places to create spacing, especially when I've needed to correct a problem with floating elements displaying in the wrong place.

I've seen some people deal with this by adding visible characters such as dots (periods) or dashes. I've even done it myself, but Non-Breaking Spaces are a cleaner option.

This is how it originally looked in the Text editor.

Here's how it looked when I added the Non-Breaking Spaces.

For my purposes, I only require one Non-Breaking Space per line.

(Don't mind the red lines, they're just FireFox's way of telling me that "nbsp" is not a word.)

This was how it appeared in the Workshop, exactly what I wanted.

It looked great in the Workshop, but this is what I saw after I published.

Too much orange at the bottom. If I had enough text to fill that space, it would look fine, but with what little I planned on using, this seems awkward to me.

I probably made changes and published a few times before I had it looking the way I wanted.

Eventually, I cut back to five Non-breaking Spaces.

Notice that I put the closing tag on it's own line, this will also make a slight difference in the amount of space at the bottom.

It may not look right in the Workshop...

...It looks great when published!

This was the worst problem on the whole Lens.

I never wanted it to look like this, but when I first published, I couldn't picture exactly what I wanted,

When I went back over it, I could clearly see that it would look good with just one background, instead having two in the same text module.

The first step was to remove the closing tag from the first paragraph, then remove the opening tag from the second paragraph.

I already had Non-Breaking Spaces dividing the paragraphs. The trick was figuring out where I needed more, or less.

Here's how it looked in the Workshop when I finally figured out the right number of Non-Breaking Spaces before and after the second paragraph.

I think that I actually got the best results with this one, but it's dimensions were rather odd and harder to work with since its image is actually two pictures stacked together.

Squidoo & The Squidoo Logo(tm)
are Trademarks of Squidoo LLC

GIMP © The GIMP Team

Original content:


Advanced HTML For Borders
& Backgrounds On Squidoo
by CleanerLife
is licensed under a Creative Commons
Attribution-Noncommercial-No Derivative Works 3.0
United States License.