How to fix your HTML borders and backgrounds in Squidoo

If all your text is in a giant block, it's bad for two reasons. First of all, your reader will have to read through the whole thing to find the piece of information he or she wants. Even if it's just one sentence that was really interesting to him. In fact, in a wall of text, your reader has no idea if it's even worth reading at all before reading it. If your text in split up into smaller paragraphs of two or three sentences, your reader can tell at a glance if that particular chunk is worth reading. Amazing, huh? And if you absolutely captivated your reader and they feel like reading your lens straight through (you wonderful writer you), then you can give their eyes and brains a little momentary rest every few sentences. Also, doing this will make your backgrounds and borders much better to look at for the purposes of this tutorial!

Breaking up your text wall is easy. For this tutorial, you're going to be breaking up your outlines, too. First, go through your text and hit your enter key after every couple of sentences. Hit it once. That way, there will be a line of beautiful empty space when we're finished with the code. Okay, go ahead. I'll wait right here :)

Great! Now, Take that big chunk of HTML at the top of your module. Mine looks like this:

<p style="padding: 5px; background-color: #FFFF99; border: dotted 2px #660000; ">

Copy it, and paste it at the beginning of each paragraph in your module. (Don't include the </p> in front!) Squidoo automatically ends any styles you started if you forget, but here we want to end it after every paragraph. It won't change and leave that empty space unless you do that! So now just tack </p> at the end of the last word of each paragraph. Paste if you want, but you can type it, too.

Uh oh! Looks like the boxes are smashed together! If you like this look, you can use it, but it happened because the "Enter" that you hit is inside the paragraph tags and not outside them. See how there's some empty space below the top border? To fix it, just hit "Backspace" once at the very top of your paragraph. Then hit "Enter" Once right before the <p starts. See? All better.

Okay, here's the secret you've been waiting for. You only need to do this on the paragraphs that appear next to your picture. The exact number of paragraphs really depends on how big your picture is and how long your paragraphs are. The piece of code you need is:

margin-right: 250px;

Here's how it works. your code is going to have a bunch of stuff. Each separate little piece has a semicolon (;). Click right after that last semi-colon and put that marginy-righty guy in there. Make sure it's still inside the quotation marks (").

Okay! Now hit "Save" and check it out! Not quite right? That's okay. You need to tweak it depending on how big your picture is. Hit "Edit" again and change the "250" to something else. If there's too much space, make it smaller, maybe 225? If the border is still stuck underneath the picture, make it bigger. Try 275 on for size. You might have to switch it around several times, but boy, you won't regret it!

Do the exact same thing as for the Text Module above! In this case, the code is:

margin-left: 250px;

Only do it on the paragraphs that are next to your picture. Remember, bigger numbers make the border go farther from the picture. Smaller numbers make the border go closer to the picture. Fiddle with it until it looks right to you.

Instructions for this coming soon! (There's a way to do this, but it kinda makes the page look lopsided. I'm checking for other ways to do it now) For now I recommend just using photobucket to link photos.

This Isn't the way I'm going to show in this tutorial, but I thought it deserves mentioning because it gives you more control. You can insert pictures by using the <img src"> tag. The thing is, you need you make sure it gets hosted somehow. There are plenty of free image-hosting sites where you can upload images to link. You never should direct-link an image that comes from another webpage, unless it's an affiliate site such as allposters, and then you need to make sure to leave the links that direct back to the site intact and otherwise follow their requirements.



Buy This Allposters.com

This allows you to put your image on the right, left, center, in-between paragraphs, whatever! It definitely breaks the monotony of images in the upper-right corner, module after module. But if you don't really care for all that kerfuffle, then you don't have to do it!