Quick Tip: A Word About Blog Margins and Such

This is a ‘quick’ tip for the non-html gurus who nonetheless still want to understand how browsers generate their pages! In the template makeover series we use CSS (Cascade Style Sheet) properties to change margins, borders, padding and background colors of page elements. So how do these properties differ? How can you use that understanding to tweak your blog’s layout and add decorative elements in your posts or sidebar?

Conceptually, you can visualize each page element as a rectangle. Each rectangle has three properties that can control spacing — a margin, border and padding. All three properties can act on individual or all sides of the element. Only the border can specify a color.

The blog page (“{OuterWrapper…) can be seen as the root or parent rectangle, with nested elements. Any element inside another rectangle (container) inherits background color values from the outer element. If you don’t specify the main/post’s background then it takes on the ‘Body’ element’s color, pink in this example. And so on and so on. You can substitute the color with a repeating image — e.g. for the content wrapper specify “…background:url(http://location of your .jpg) repeat;”

MARGIN property: The margin is transparent which means it makes visible some of the color of the background surrounding that element. If the margin value is 5px (pixels) on the left and right, then that element is pushed 5 spaces away from the next element, exposing 5px of blue color in this example. The width of the element is unchanged.

So if you increase your side margins, you must still have enough space for other elements to fit across the page — for fixed columns, this means reducing other margins or element widths. If the next element has no room, then it drops to the bottom of the surrounding element!

BORDER property: A border of 3px takes on the element’s foreground (text color) unless you specify something else. The element’s width stays the same but the content area is effectively reduced by the 3px! There are styles for the border- solid, dotted, double.. etc. Each side can have a different color. In this example the border is solid black. Borders take time for the browsers to render the page as I’m finding in the Template MakeOver #2. It’s okay for a small element like a post. So use element colors & background images for contrasting major (long) elements like the Body.

PADDING property: A padding of 10px further reduces the content area. Padding is filled with that element’s background color, white in this example. It gives the appearance of text separation from the element’s sides.

INLINE STYLING: Once you understand the concepts you can use the <Div STYLE=” tag to add borders and padding to images or text blocks. For example key this html before your text:
<Div STYLE=”border: 3px dashed red; width: 35%;”>

This text has a red dashed border & takes of 35% of the post’s width, no padding, but you can handle that!

And key this html to end the styling: </Div>

SUMMARY: Well, I said ‘quick’ not short tip! Use this tip to add customized spacing, colors, decorative borders or a repeating background image. Hope you found this post useful.

Want more tips? Be sure to sign up for our RSS feed.


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


7 Comments

  1. Glad you like the blog, wish I could spend more time here. I enjoy design and problem solving. Yours seems quite simple. Apparently someone moved the post area over 42 points “to avoid the border image” — I see this in a comment on the template’s html. So the solution is to change the 42 to zero! Maybe there was a border image at one time. Anyway, just go to Blogger dashboard, Layouts, Edit HTML tab; press find (ctrl + F keys) and key in “#content-wrapper” to get you to the section with the 42. Make it 0. Preview and see if the page looks okay, then save the template. Should work like magic… Here’s the section that you will see:

    #content-wrapper {
    margin-left:42px; /* to avoid the border image */
    width: 900px;
    }

  2. Hey there,
    Thanks!!! It worked just right. But, now, you see the side bar has shifted to the left as well – brosreview.blogspot.com I want the sidebar to end exactly under the right margin of the header above. Am I making sense here? And, one more thing, how do I bring the words on the header to the central part. Right now, it is on the top most corner. I want the words to occupy the central position in the header image.
    Thank again!!!

  3. I understand. The sidebar is on the left but you can’t really see it since the top photos are centered or align to the left of the sidebar! Try a test by putting a temporary sidebar element with plain text and you’ll see. You may need a light background color behind the sidebar or along the right side to get the visual alignment along the right side…
    As for the second part …you need to add styling that centers the text across the header and vertically within the header element. Find this text in the html “#header-inner” to get to the proper lines then add the two lines after the width tag. You should be good to go… !

    #header-inner {
    background-position: left;
    width:650px;
    text-align:center;
    vertical-align:center;
    }

  4. Hey there,
    Great!!! It worked!!! Now, just one more thing, okay. The header words are in the centre. I want to bring them a step down. I might be using the incorrect terms here. I mean, the header title – “The odds are good, but the goods are odd” although in the center, is too much to the top. I want it to be in the central section of the header image.
    Awaiting your reply.
    Regards,
    AJ

  5. I guess there is real html tags outside the styling section that override the ‘vertical-align’ which I expected to put the 2 lines in the center vertically. But this should work and you can change the value from 75px and do a preview until it’s where you want it. Basically it’s spacing the title down from the top. Find the width line (width:650px;)and put this new line after it:

    padding-top:75px;

  6. Hey there,
    Bravo!!! You guys/gals are fantastic!!! It worked for me!!! Thanks a lot!!! I’ve been running about these things since weeks now. Well done!!! I shall disturb your team later again when I have any doubts, okay. hehe.
    Regards,
    AJ

Comments are closed.