CSS tags in detail

UNDP Intranet CSS File
This file can be downloaded for reference only. For live pages please use the following tag:
<link rel="stylesheet" href="/css/undp-intranet.css">

Components

Content window

All content items should be places within <div> and </div> tags. For instance, the first headline of the content section should be entered like this:

<div class="component first"> <h3>Headline</h3> Content </div>

For all following items, please use:

<div class="component"> <h3>Headline</h3> Content </div> Please note that if you are only using the tag "component first", there might be some spacing issues, like in this example:

Side Bars (left)

Create a table using <td class="sidebar"> for left navigation items. You can add "menu boxes" with placing content between the tags <div class="component"> and </div>. Menu Headlines are enclosed between <h3> and </h3> tags. You can place menu items right below it using standard HTML for bulleted lists.

Example:

<td class="sidebar">


<div class="component">

   <h3>H3: Menu Headline</h3>

  <ul>

  <li>Menu Item 1</li>

  <li>Menu Item 2</li>

  <li>Menu Item 3</li>

  </ul>

  </div>

  </td>

Right Side Bars

Create a table using <td class="rightsidebar"> for items to appear in a side bar on the right. You can add "menu boxes" with placing content between the tags <div class="component"> and </div>. Sidebar Headlines are enclosed between <h3> and </h3> tags. You can place menu items right below it using standard HTML for bulleted lists.

Example:

<td class="rightsidebar"> <div class="component"> <h3>Right Sidebar</h3> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </td>

Invisible tables

Use the tags class="lefthalf", class="righthalf", class="leftthird", class="centerthird" and class="rightthird" to align content within an invisible table with two or three columns:

Example 1:

Left:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:
<div class="lefthalf"> Left:<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>

Right:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:
<div class="righthalf"> Left:<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>

Example 2:

Left:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:
<div class="leftthird"> Left:<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>

Center:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:
<div class="centerthird"> Left:<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>

Right:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:
<div class="rightthird"> Left:<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>

Boxes

Use the tag class="boxed" and class="boxed_green" to create colored boxes within the content window.