Scribd
Upload
25 views

Back To CSS Swag

The document provides an example of styling a multiple-column unordered list with CSS. It includes the HTML markup for a list of herbal items divided into three columns. The CSS styles the list by setting widths and heights for the list items, applies background images to the items and links, and positions the items into three columns by adjusting margins and background positions.

Uploaded by

rulesagain
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
25 views

Back To CSS Swag

The document provides an example of styling a multiple-column unordered list with CSS. It includes the HTML markup for a list of herbal items divided into three columns. The CSS styles the list by setting widths and heights for the list items, applies background images to the items and links, and positions the items into three columns by adjusting margins and background positions.

Uploaded by

rulesagain
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

« back to CSS Swag: Styling Multiple-Column Lists

Example 7: Gettin’ fancy


 Aloe
 Bergamot
 Calendula
 Damiana
 Elderflower
 Feverfew
 Ginger
 Hops
 Iris
 Juniper
 Kava kava
 Lavender
 Marjoram
 Nutmeg
 Oregano
 Pennyroyal

The above markup should render like this:

XHTML:
<div class="wrapper">
<ul id="example7"
><li class="aloe"><a href="#">Aloe</a></li
><li class="berg"><a href="#">Bergamot</a></li
><li class="cale"><a href="#">Calendula</a></li
><li class="dami"><a href="#">Damiana</a></li
><li class="elde"><a href="#">Elderflower</a></li
><li class="feve"><a href="#">Feverfew</a></li
><li class="ging"><a href="#">Ginger</a></li
><li class="hops"><a href="#">Hops</a></li
><li class="iris"><a href="#">Iris</a></li
><li class="juni"><a href="#">Juniper</a></li
><li class="kava"><a href="#">Kava kava</a></li
><li class="lave"><a href="#">Lavender</a></li
><li class="marj"><a href="#">Marjoram</a></li
><li class="nutm"><a href="#">Nutmeg</a></li
><li class="oreg"><a href="#">Oregano</a></li
><li class="penn"><a href="#">Pennyroyal</a></li
></ul>
</div><!-- .wrapper -->

CSS:
/* separate list from subsequent content */
div.wrapper
{
margin-bottom: 1em;
}
ul#example7
{
width: 30em;
margin: 0;
padding: 0;
border: 1px solid #A52A2A; /* brown */
background-image: url("SophieAresPilonPale.jpg");
}
ul#example7 li
{
/* list item dimensions */

width: 10em;
height: 2em;
/* Clear the default margins & padding
for cross-browser efficiency */
margin: 0;
padding: 0;

/* suppress item markers */


list-style-type: none;
}

/* Purty it up */
ul#example7 li a
{
display: block;
width: 10em;
line-height: 2em;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #A52A2A; /* brown */
}
/* mouseover gets the bright photo */
ul#example7 li a:hover
{
color: #FFF; /* white */
background-image: url("SophieAresPilonBright.jpg");
}

/* give each list item a piece of the picture */

li.aloe a { background-position: 0em -0em }


li.berg a { background-position: 0em -2em }
li.cale a { background-position: 0em -4em }
li.dami a { background-position: 0em -6em }
li.elde a { background-position: 0em -8em }

li.feve a { background-position: -10em -0em }


li.ging a { background-position: -10em -2em }
li.hops a { background-position: -10em -4em }
li.iris a { background-position: -10em -6em }
li.juni a { background-position: -10em -8em }

li.kava a { background-position: -20em -0em }


li.lave a { background-position: -20em -2em }
li.marj a { background-position: -20em -4em }
li.nutm a { background-position: -20em -6em }
li.oreg a { background-position: -20em -8em }
li.penn a { background-position: -20em -10em }
/* Bring the first item of each column
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 2em line-height = 10em */

ul#example7 li.feve,
ul#example7 li.kava
{
margin-top: -10em;
}

/* Horizontal positions of the columns */


ul#example7 li.aloe,
ul#example7 li.berg,
ul#example7 li.cale,
ul#example7 li.dami,
ul#example7 li.elde
{
margin-left: 0em;
}
ul#example7 li.feve,
ul#example7 li.ging,
ul#example7 li.hops,
ul#example7 li.iris,
ul#example7 li.juni
{
margin-left: 10em;
}
ul#example7 li.kava,
ul#example7 li.lave,
ul#example7 li.marj,
ul#example7 li.nutm,
ul#example7 li.oreg,
ul#example7 li.penn
{
margin-left: 20em;
}

You might also like