Greekgeek's Online Odyssey - Hubpages and Online Article Writing Tips

code geeking

Cheat Sheet for Dealing With Squidoo’s New Flexible Layout

My CSS Cheat Sheet for Converting Fixed-Width into Flexible Layouts

Originally posted here. (Now tweaked and revised.)

  • The first thing you should do is ask yourself, “Is this CSS absolutely necessary, or can I drop it?” See the postscript below for tips about how and when to use CSS. Usually, the best solution is, “Drop it!”
  • Testing: Try Screenfly Emulator or Responsive Layout Emulator, or if both of those are being crabby, drag the right-hand edge of your window around to simulate different screen sizes.
  • Replace font sizes and line heights in pixels with points or percentage. (E.g. 110% = “a little larger than the standard font size.”)
  • To center an image or a paragraph horizontally, use style=”margin: 0px auto;”
  • <br style=”clear:both;”> breaks you out of float-mode and usually stops things from spilling into places they don’t belong. (The “zigzaggy” stairstep effect, e.g. For that problem, put <br style=”clear:both;”> between each “step” of the staircase.)
  • Convert your old fixed-width dimensions by doing a little math. Say you used to have a paragraph 250 pixels wide. Squidoo’s old column width was 590 pixels. 250 ÷ 590 = .42, so change width:250px;   to width:42%; 
  • If all the widths of elements in a horizontal area add up to more than 100%, the last item will wrap onto the next row. This sometimes happens if you’ve got small elements like borders adding a few pixels of width to your total. In that case, trim the width of the elements you can control by 1-2% to leave more wiggle room.
  • You may need to set the outermost container width to 100%. If something’s shrinking to fit, and you want it to extend to the margins, that’s what to do.
  • When using percentages, you usually have to specify a paragraph or image’s size in width rather than height. Percentage of the containing area’s height is meaningless, because the bottom of the page is usually off the bottom of the screen. Percentage of the containing area’s width makes sense, because the right margin of a page is usually visible.
  • The only time you dare specify height is with graphics small enough that they’re not likely to spill into the margin even on phone-sized screens. Use Dee’s handy-dandy Screenfly emulator to check.
  • Let borders and rounded corners remain fixed-width (pixels). They are usually not big enough to spill over onto the margins, and they behave quite oddly when changed to percentages.
  • Advanced: When doing side-by-side layouts, consider using the style attribute min-width: 200px; to say, “don’t shrink this image (or design element) smaller than 200 pixels.” On small phone screens, which are 240 or 320 pixels wide, this will force side-by-side layouts to switch to a single column, so you don’t end up with teeny tiny images. You may also set a max-width, if your images start looking silly at large sizes.
  • Advanced: If you’ve got a colored or bordered paragraph containing a floated graphic and text, you will find that the floated graphic tends to spill out past the bottom of the paragraph when you switch dimensions to percentages. The best solution is to get rid of the color or border on the paragraph. But if you really, really have a good reason for the colored paragraph, this worked for me: <p style=”background-color: #eee; width:100%;”><span style=”display: block;”><img src=”blah” style=”float: left; blah blah;”>Text text text</span><br style=”clear: both;”></p>
  • Advanced: 3-items-across layout for Zazzle & other affiliate items: <p style=”width: 25%; padding: 2%; margin-right: 2%; margin-bottom: 2%; text-align: center; font-size: 80%;”><a href=”productLink” rel=”nofollow” style=”text-decoration:none;”><img src=”imgURL” alt=”altname” style=”width: 90%; margin: auto;”><br>ProductName<br><b style=”margin:auto;display:block;width:60%;line-height:110%; font-size: 70%; color:#fff;background-color:#f90;border-radius: 4px; padding:2%;”>View on Zazzle</b></a></p>

Postscript: How and When to Use CSS

CSS commands, the style=”blah blah blah”  part tucked inside of an HTML <tag>, let you control visual decoration and layout separately from HTML. If HTML says, “this is a hat,” CSS says, “size 10 with a red brim.” If HTML says, “this is a brick,” CSS says, “move it two inches to the right.” If HTML says, “this is a paragraph,” CSS says, “200 pixels wide with a dashed border and gray background.”

People tend to use CSS for decoration, but in fact, it’s better to use CSS only to indicate units of the page that function in a special way.

For example, adding color to links is more than mere decoration; it informs the reader that these words are links. A side-by-side display of product images with captions under them acts like a store display, telling the visitor, these are products, and allowing the customer to compare, browse, pick and choose. It’s functional, not just for pretty.

I have mostly avoided using colored or shaded paragraphs except for one special purpose: quotations or excerpts, when I’m alternating between quoting something and commenting on it. What’s the function of that CSS? Its purpose is to make clear which words are mine, which words are someone else’s. And I’m only going to do that on a page where I’m alternating between the two, not a simply one-off quotation or occasional quotes.

I also use CSS for navigation elements, on rare occasions. Usually, the navigation options like the “Table of Contents” in the introduction module are adequate, and don’t need to be replaced.

I wasn’t always this strict about CSS. So in reviewing old lenses, I’ve been asking myself, “Is this CSS providing useful information to the reader? Is it functional? Or is it just a paint job?” I’m dropping 99% of my “decorative” CSS. That very especially includes colored and bordered paragraphs, which are the web equivalent of a reader marking a book’s text with  colored highlighter pens and underlines.

Handy Squidoo Tip: Caption a Lens Logo or Text Module Graphic!

Screencap from my lens

Eureka! Why didn’t I figure this out sooner? There is a fairly simple CSS way to force a caption (including an image caption with clickable link) to hang out directly under a Squidoo lens logo or an image uploaded into the text module!

Ta-da! Actual screencap of a lens!

Here. I have, of course, created a new Squidoo tutorial:

Squidoo Image Captions: Handy Tip

Of course, the easiest thing would be if Squidoo would add an optional caption slot for images.

But then, I suppose there’s no way to guess what height / style the caption slot ought to be. It depends whether you’re trying to make a photo credit or some kind of comment/description.

Resizing Images for Amazon Associates, Squidoo, Zazzle

I experiment with different ways of using images, because they get clicked even when they’re decorative. (And there’s nothing like a visually intriguing thumbnail to get people clicking — they want to see it full-sized).

When you grab a basic Amazon Associates “image” code, you get something like:

There’s an easy — well, fairly easy — way to resize Amazon graphics, up to whatever size the original product image is that’s stored on Amazon. (Any larger than the original, and it gets fuzzy.)


Advanced CSS Tricks and Tips: Borders and Backgrounds and Captions, Oh My!

I finally got around to updating my Advanced CSS lens, where I used to post crazy “lab experiments” in CSS.

Now I’ve reorganized it and made it more dignified (slightly), and added all the tricks I tend to use most on my lenses: rounded corners, background-images for paragraphs, captions under aligned images, drop caps, dramatic numbered lists, and most of all, playing around with the introduction module to make the first thing visitors see look great.

I’ve moved the old lab experiments to page 2. There’s another use for a Page Break!

(My “crazy lab experiments” lens is now ZEE CODE SCRATCHPAD. Once I’ve got things working nicely there, I may move the “finished products” to the AdvancedCSS lens for prime time viewing.)

Squidoo Graphics: Colors, Themes, Black Box Tips

I’ve been thinking. Try as I might, I’m a journeyman when it comes to Squidoo SEO: I have the basic techniques down, I know what I’m doing, but I’ve got the online equivalent of an undergraduate college degree rather than a PhD. Whereas I’ve been doing computer graphics and layout since 1980, HTML since 1993, and CSS since–well, whenever it first came out.

So I should share more of my tips on graphics and webpage design. Here’s a few!