Portlets in CSS (1)

Here is a quick way to make nice little css boxes that look like portlets.

This first one is the simplest as it just has a background-color for the top bar, and a 1 pixel border. Look out for Portlets in CSS (2) which uses a customized background image.

Here is the simple html - it is just 2 divs (Note this particular example is contained in another div with a width of 220px)

<div class="portletTitle">Portlet Title</div>
<div class="portletContent">
<span class="header">Heres a header</span><br>
Latin Text... <a href="#">more »</a>
</div>
</div>

Here is the css
.portletTitle {
background-color:#c3dc9a;
line-height:15px;
font-weight:bold;
color:#395F97;
padding:5px;
}

.portletContent {
color:#6c6d71;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
padding:5px;
background-color:#ffffff;
font-size:11px;
}