An Easier Code for Boxes

More on Boxes

I’ve gotten quite a few requests for assistance on how to use the “how to draw a box code” and realized that the original code had far more information than necessary, at least if your only purpose is to draw a box. So I simplified it down to the bare essentials here.

< ul style=”border: 2px solid ; margin: 20px; padding: 20px; width: 300px;” >

    They sailed to the Western Seas, they did.
    To a land all covered with trees.
    And they bought an Owl, and a useful Cart,
    And a pound of Rice, and a Cranberry Tart,
    And a hive of silvery Bees.- Edward Lear –

Defining our terms:

Margin is the space outside the border. You can say as many pixels as you want to here but bear in mind that the SU post box is 700 pixels wide.

Border is the visible box itself. You can set this to as many pixels as you want but anything too wide will draw attention to itself rather than to the content. You want the box to draw attention to the content, not to itself.

Padding is the space between the text and images inside the box and the border. You don’t want the text right up next to the border so you leave some white space, I find 20 or 40 pixels to be a good distance.

Width is how many pixels wide your box actually is. It should be at least as wide as whatever image you place inside it or the image will go past the right border of the box (which can be a pretty cool effect sometimes but I don’t recommend you do it often.)

So when calculating how much space your box occupies, remember that (margin + border + padding) x 2 + width = entire width of box. If this exceeds 700 pixels the SU page will expand with it and push the sidebar to the right, and you will want to avoid doing that.

Some of you will want to put a background color inside the box. You can add this to the CSS code:

background-color: rgb(127,127,127);

inside the style attribute to make it mid-gray.


One Comment on “An Easier Code for Boxes”

  1. chinablue says:

    I´ll try it
    in a special stumble

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s