Outlined Box

by ChrisStanyon

HTML

<div class="box">
    <h2>Pros and Cons of popular roofing materials</h2>
    <ul>
        <li><a href="../roofmaterialchoices.htm#comp">Composition Shingles</a></li>
        <li><a href="../roofmaterialchoices.htm#shake">Wood Shakes</a></li>
        <li><a href="../roofmaterialchoices.htm#clay">Clay Tile</a></li>
        <li><a href="../roofmaterialchoices.htm#slate">Slate Roofing</a></li>
        <li><a href="../roofmaterialchoices.htm#concrete">Concrete Tile</a></li>
        <li><a href="../roofmaterialchoices.htm#metal">Metal Roofs</a></li>
        <li><a href="../roofmaterialchoices.htm#hotmop">Hot Mop Roofing</a></li>
        <li><a href="../roofmaterialchoices.htm#closing">Be wary !</a></li>        
    </ul>
</div>

CSS

.box { font-family: verdana; font-weight: normal; width:345px; } 
.box h2 { background-color:#0066CC; text-align:center; color:white; margin:0px;  font-size:12px;line-height: 28px; }
.box ul { overflow:hidden; list-style-type:none; border: 1px solid #0066CC; margin:0px; padding:6px; font-size: 10px; }
.box li { width: 50%; float:left;}
.box li a { color: #1C4FFF; font-weight:600; text-decoration:none; }