msgbartop
A chronological documentation test project, nothing serious, really!
msgbarbottom

23 Oct 2007 Premailer: preflight for HTML e-mail

Premailer is a script accessible from the web that turns external CSS webpage into inline, improving the rendering of HTML e-mail.

This makes it possible to make a webpage and then run it througt this script to make a HTML e-mail.

Tags: , ,

Posted by

05 Oct 2007 Left and Right align text on the same line

It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line, eg in a footer.

Here is how this can be done in HTML:

<div id="footer">
  <p class="leftalign">Text on the left.</p>
  <p class="rightalign">Text on the right.</p>
</div>

If you were to then give your CSS classes leftalign and rightalign values of text-align: left; and text-align: right; respectively, you would get close to your desired result, but your right-aligned text would be bumped down one line because of the new paragraph. Instead, just float your paragraphs:

.leftalign {
float: left;
}
.rightalign {
float: right;
}

Then just remember to clear your float:

<div style="clear: both;"></div>

Tags: ,

Posted by

05 Oct 2007 Using multiple CSS classes

Let’s say you need six different 100px square boxes with different characteristics:

  • Red with Border
  • Blue with Border
  • Green with Border
  • Red without Border
  • Blue without Border
  • Green without Border

You COULD create a unique class for each of these:

.redwithborder {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
 background-color: red;
 border: 3px solid black;
}

.bluewithborder {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
 background-color: blue;
 border: 3px solid black;
}

...etc

BUT that’s called CSS Bloat because it includes a bunch of unnecessary repetitive code. Instead, create just five classes with simple, identifiable names that each handle something very specific:

.box {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
}

.red {
 background-color: red;
}

.blue {
 background-color: blue;
}

.green {
 background-color: green;
}

.border {
 border: 3px solid black;
}

In your HTML, things look just as clean, just put a space between each of the classes you wish to apply to the div:

<div class="red border box"></div>
<div class="blue border box"></div>
<div class="green border box"></div>
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>

This method allows better future flexibility as well. If you wanted to create an orange box, or even a box with a background-image or some completely separate characteristic, you could. And then adding a border to that new box is simple adding a space and the “border” class name.

Source: http://css-tricks.com/un-bloat-css-by-using-multiple-classes/

Tags:

Posted by

10 Aug 2007 CSS Shorthand Guide

Ok. Let’s set the record straight. There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Anytime I’ve ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you’re supposed to be set on your way. Well well. Over the years, I’ve found quite some interesting unknown quirky facts about these shorthands… hence this Guide was born.
(more…)

Tags:

Posted by