Snippets

Home / Snippets / style a definition list: calendar

style a definition list: calendar

Snippet Menu

snippet |

revisions |

comments | Related Snippets

related |

Add to Favorites | Email

download | Print

print | Blog It

blog it

Sat. Mar. 25th, 2006 9:32 PM

1 of 1

baldo

3 comments

this is a css to style a definition list to get a calendar list type.

See the final render.

<body>

        <h2>I santi del calendario</h2>

        <dl id="santi">

                <dt>1 gennaio</dt>

                <dd>San Fulgenzio di Ruspe</dd>

                <dd>San Giuseppe Maria Tomasi</dd>

                <dd>San Guglielmo di Volpiano</dd>

                <dt>2 gennaio</dt>

                <dd>San Basilio Magno</dd>

                <dd>San Defendente di Tebe</dd>

                <dd>San Gregorio Nazianzeno</dd>

                <dt>3 gennaio</dt>

                <dd>San Daniele di Padova</dd>

                <dd>San Fiorenzo di Vienne, vescovo</dd>

                <dd>Santa Genoveffa, vergine</dd>

        </dl>

</body>

        <style type="text/css">

        <!--

        * { font: 0.9em verdana; }

        dl#santi {

                border: 1px dashed #C0C0C0;

                border-top: 0; margin-top: 0;

                padding: 0 8px 8px 8px;

                width: 300px;

        }

        dl#santi dd { margin-left: 2em; padding: 0.3em; padding-left: 0.5em; }

        dl#santi dt {

                background-color: #EAEAEA;

                border-top: 1px solid #C0C0C0;

                font-weight: bold;

                margin: 4px; margin-top: 1.3em;

                padding: 5px;

        }

        h2 {

                border: 1px dashed #C0C0C0;

                border-bottom: 0; font-weight: bold;

                font-size: 1.15em; margin: 0;

                padding: 12px 8px 0 8px;

                width: 300px; letter-spacing: -0.04em;

        }

        -->

        </style>