Here are various code snippets using CSS and HTML that I figure someone might find interesting.

Simple Overlapping Images with CSS

An Orange Box A Yellow Box











<img src='orange_box.png' alt='An Orange Box' />
<img src='yellow_box.png' alt='A Yellow Box' style='position: relative; left: -206px; top: 206px;' />

Sometimes you want to do something more visually exciting that just dropping one image after another. Here's how I place one image over another.

A quick note on positioning values: I decided I wanted to have the yellow box (256 x 256 px) covering all up 50 px of the orange box (also 256 x 256 px) horizontally and only 50 px of the orange box vertically. If the yellow box was in its default position it would be immediately to the right the orange box. Therefore, I chose to move the box down and to the left (using negative units). This could have also have been done using the right and bottom tags (style='position: relative; right: 206px; bottom: -206px;). If you look at the source code for this page you'll notice that I have used a bunch of line breaks to push the text following the images down. This is because the images would otherwise cover the text below. I'm sure there's an elegant way to fix this, but that's for another time.


Curved Boxes

The UN Framework Convention on Climate Change website (http://unfccc.int) — which is an interesting site in its own right — has a very nice design, including news boxes with rounded corners, which I have reproduced below.

Box Title
Box Content
 

<table cellspacing='0' cellpadding='5' width='185'>
<tr>
<td style='background-image:url(http://unfccc.int/files/inc/graphics/image/gif/bbg.gif)'>
<strong>Box Title</strong>
</td>
</tr>
<tr>
<td style='border-left:1px solid #CCC; margin:0px;border-right:1px
solid #CCC; margin:0px;border-top:1px solid #CCC; margin:0px;'>
Box Content
</td></tr>
<tr><td style='background-image:url(http://unfccc.int/files/inc/graphics/image/gif/bbgu.gif);
background-repeat:no-repeat'> </td></tr>
</table>

As you can see, the top and bottom curved lines are created by images, while the straight lines are simply inline CSS styles for table cells. If I have time I'll try to duplicate this design in pure CSS.


More Curved Boxes (CSS Only)

Out of the blue I got an email asking me to how to reproduce the following image in pure CSS:

Using Stu Nicholls' example I quickly developed a rough analog:

Because of the amount of CSS required, the actual HTML example is on a separate page. Use the View Source command in your browser to see the code.


Horizontal Lists

HTML lists don't need to be vertical, but can also be horizontal. They are useful for navigation links (I use them at the top of the page).

  • Item One
  • Item Two
  • Item Three
  • Item Four

<ul>
<li style='display: inline; list-style-type: none;'>Item One</li>
<li style='display: inline; list-style-type: none;'>Item Two</li>
<li style='display: inline; list-style-type: none;'>Item Three</li>
<li style='display: inline; list-style-type: none;'>Item Four</li>
</ul>

The display: inline; portion makes the element horizontal, while list-style-type: none; suppresses the bullet point usually prepended. As you can see, there's a lot of repeated code. The best way to do this is to define a class or an id in your stylesheet in which li is defined with both the display and list-style-type properties. The really adventurous can use CSS to set backgrounds, roll-overs, etc. so that each item is essentially an advanced button. Check out Listamatic and Listamatic2 for lots of great designs.


Little Things I Did Not Know

  1. You can put paragraph tags inside list item tags. For example:
    <ol>
    <li><p>...</p></li>
    </ol>

  2. You cannot put lists or tables inside of paragraph tags. This is wrong:
    <p>
    <ol><li>...</li></ol>
    </p>
    This is correct:
    <p>...</p>
    <ol><li>...</li></ol>
    Note that in most browsers the approaches will display the same. This is simply a matter of standards compliance.

  3. The CSS property text-align does just that. My use of <div align='center'>...</div> was incorrect. Align a paragraph of text like so: <p style='text-align: center;'>...</p>

  4. The div element can include paragraph tags within it, while the span tag cannot. Basically, use the span element to deal with things at the sub-paragraph level and div at the super- or non-paragraph level.