Re: [css-d] Using 100% css with no tables

Wed, 26 Jul 2006 07:28:27 -0700 

this is just a mock-up (and quickly done), but perhaps it can give you
a place to start.  [no comments on the fast coloring!]  :D



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; >
<head>
        <title>)}i{( Test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <style type="text/css">

h2 {
        background: tan;
        border: 1px solid #000000;
        }

.date-column {
        float: left;
        width: 49%;
        }

.loc-column {
        float: left;
        width: 49%;
        }

ul,
p {
        margin: 0;
        padding: 0;
        }

li {
        border: 1px solid #000000;
        list-style: none;
        margin: 0 0 1em;
        padding: 0;
        }

        .headers:after,
        li:after {
                clear: both;
                content: ".";
                display: block;
                height: 0;
                visibility: hidden;
                }

        /* bs hoop for ie \*/
        * html .headers,
        * html li {height: 0;}/* */

.region {
        background: orange;
        font-weight: bold;
        padding: .25em 0;
        }

        </style>
</head>

<body>

<div class="headers">
        <h2 class="date-column">Region &amp; Date</h2>
        <h2 class="loc-column">Location</h2>

</div>

<ul>
        <li>
                <p class="region">Region 2</p>
                <p class="date-column">Wednesday, Sept 6</p>
                <p class="loc-column">Chillcouthe R-II</p>
        </li>
        <li>
                <p class="region">Region 3</p>
                <p class="date-column">Wednesday, Sept 7</p>
                <p class="loc-column">Chillcouthe R-II</p>
        </li>
        <li>
                <p class="region">Region 1</p>
                <p class="date-column">Wednesday, Sept 8</p>
                <p class="loc-column">Chillcouthe R-II</p>
        </li>
        <li>
                <p class="region">Region 13</p>
                <p class="date-column">Wednesday, Sept 9</p>
                <p class="loc-column">Chillcouthe R-II</p>
        </li>
</ul>

</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to