I'm looking for interesting alternatives for a nth-child LIST

HTML & CSS
1

Okay I’ve seeded two different color schemes on these little lists: One is Cyan-ish, and one is Red-ish. I’ve done that so you have at least one alternative color at the ready but feel free to add more (remember, I’m right-brained and have pity lol).

I’m totally open to suggestions but I have two stipulations that are musts:

1) help me clean up the horizontal margin/padding (which I’m sure we can all agree is crude). I’ve spent an hour trying to do it myself but reached my limit once I discovered display: table was the reason my border wasn’t displaying like the Table border upon which it is based.

2) help me extend the list’s alternating background colors across the entire line, not just the <UL>'s focusted <li>s.

(maybe sex up the bullets? have fun!) :beers::beers:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html charset=UTF-8 http-equiv=Content-Type">
<title>ZEBRA in LISTS</title>

    <style type="text/css">

    h1,h2,h3,h4,h5,h6 {margin-top: 20px; margin-bottom: 10px}

    body {
    font-size: 20px;
    line-height: 22px;
    font-family: LettrGoth12 BT, Bold, MONOSPACE;
    margin-top: 30px;
    margin-bottom: 100px;
    margin-left: 5%;
    margin-right: 5%;}

    .hiheux li:nth-child(odd) {background: #EBFFFF;}   /* AQUAMARINE */
    .hiheux li:nth-child(even) {background: WHITE;}
    .hiheux {
        padding: 10px;
         border: 10px inset cyan;
    margin-left: 5%;
    margin-right: 5%;
       margin-top: 50px;
        display: table;
    border-collapse: collapse;}

    .hiheuxeux li:nth-child(odd) {background: #FEF6F8;}   /* CRIMSON */
    .hiheuxeux li:nth-child(even) {background: WHITE;}
    .hiheuxeux {
        padding: 10px;
         border: 10px inset crimson;
    margin-left: 5%;
    margin-right: 5%;
       margin-top: 50px;
        display: table;
    border-collapse: collapse;}

    a:link {color: blue;}
    a:visited {color: dodgerblue;}
    a:hover {color: red;}
    a:active {color: indigo;}

    </style>
</head>

<body>
    <h1>UNICODE</h1>
    <hr>

    <div class="hiheux">
        <ul>
            <li><a href="http://alanwood.net/unicode/dingbats.html"
               title="UNICODE A-1"
               target=
               "_blank">http://alanwood.net/unicode/dingbats.html</a></li>

            <li><a href="http://alanwood.net/unicode/index.html"
               title="UNICODE A-2"
               target=
               "_blank">http://alanwood.net/unicode/index.html</a></li>

            <li><a href=
            "http://en.wikipedia.org/wiki/List_of_Unicode_characters"
               title="UNICODE A-3"
               target=
               "_blank">http://en.wikipedia.org/wiki/List_of_Unicode_characters</a></li>

            <li><a href=
            "http://en.wikipedia.org/wiki/Open-source_Unicode_typefaces"
               title="UNICODE A-4"
               target=
               "_blank">http://en.wikipedia.org/wiki/Open-source_Unicode_typefaces</a></li>
        </ul>
    </div>

    <div class="hiheuxeux">
        <ul>
            <li><a href=
            "http://commons.wikimedia.org/wiki/Category:PD_Unicode-BMP-2190"
               title="UNICODE A-5"
               target=
               "_blank">http://commons.wikimedia.org/wiki/Category:PD_Unicode-BMP-2190</a></li>

            <li><a href=
            "http://commons.wikimedia.org/wiki/Category:Unicode/HD-Table"
               title="UNICODE A-6"
               target=
               "_blank">http://commons.wikimedia.org/wiki/Category:Unicode/HD-Table</a></li>

            <li><a href="http://decodeunicode.org"
               title="UNICODE A-7"
               target="_blank">http://decodeunicode.org</a></li>

            <li><a href=
            "http://fileformat.info/info/unicode/char/2776/index.htm"
               title="UNICODE A-8"
               target=
               "_blank">http://fileformat.info/info/unicode/char/2776/index.htm</a></li>

            <li><a href=
            "http://timtrott.co.uk/html-character-codes"
               title="UNICODE A-9"
               target=
               "_blank">http://timtrott.co.uk/html-character-codes</a></li>
        </ul>
    </div>
</body>
</html>
2

“Interesting alternatives to an nth-child list”… interesting request. Based on the simple list, I can’t think of any. nth-child colors alternate lines very efficiently.

If you add the following rules to your code, the <li>coloring will extend to the full width of the <ul>.

ul {
    list-style-position:inside;
    padding-left:0;
}
li {
    padding:0 1em;
}

But you also wanted the turbulent sea of margins and paddings calmed a bit.

He, he. Time to play: :smiling_imp:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta content="text/html charset=UTF-8 http-equiv=Content-Type">
    <title>ZEBRA in LISTS</title>
    <style type="text/css">

h1,h2,h3,h4,h5,h6 {
    margin-top:20px;
    margin-bottom:10px;
}
body {
    font-size:1.25em;
    font-family:"LettrGoth12 BT", Bold, MONOSPACE;
    margin:30px 5% 0 5%;
}
ul {
    list-style-position:inside;
    display:table;
    padding:1em 0;
    margin-top:40px;
    margin-left:40px;
}
li {
    background-color:#fff;
    padding:0 1em;
}

.hiheux {border:10px ridge cyan;}
.hiheux li:nth-child(odd) {background-color:#baFFFF;}   /* AQUAMARINE */

.hiheuxeux {border:10px ridge crimson;}
.hiheuxeux li:nth-child(odd) {background-color:#FEe0F8;}   /* CRIMSON */

a:link {color:blue;}
a:visited {color:dodgerblue;}
a:hover {color:red;}
a:active {color:indigo;}

    </style>
</head>
<body>

<h1>UNICODE</h1>
<hr>

<ul class="hiheux">
    <li>
        <a href="http://alanwood.net/unicode/dingbats.html" title="UNICODE A-1" target="_blank">http://alanwood.net/unicode/dingbats.html</a>
    </li>
    <li>
        <a href="http://alanwood.net/unicode/index.html" title="UNICODE A-2" target="_blank">http://alanwood.net/unicode/index.html</a>
    </li>
    <li>
        <a href="http://en.wikipedia.org/wiki/List_of_Unicode_characters" title="UNICODE A-3" target="_blank">http://en.wikipedia.org/wiki/List_of_Unicode_characters</a>
    </li>
    <li>
        <a href="http://en.wikipedia.org/wiki/Open-source_Unicode_typefaces" title="UNICODE A-4" target="_blank">http://en.wikipedia.org/wiki/Open-source_Unicode_typefaces</a>
    </li>
</ul>
<ul class="hiheuxeux">
    <li>
        <a href="http://commons.wikimedia.org/wiki/Category:PD_Unicode-BMP-2190" title="UNICODE A-5" target="_blank">http://commons.wikimedia.org/wiki/Category:PD_Unicode-BMP-2190</a>
    </li>
    <li>
        <a href="http://commons.wikimedia.org/wiki/Category:Unicode/HD-Table" title="UNICODE A-6" target="_blank">http://commons.wikimedia.org/wiki/Category:Unicode/HD-Table</a>
    </li>
    <li>
        <a href="http://decodeunicode.org" title="UNICODE A-7" target="_blank">http://decodeunicode.org</a>
    </li>
    <li>
        <a href="http://fileformat.info/info/unicode/char/2776/index.htm" title="UNICODE A-8" target="_blank">http://fileformat.info/info/unicode/char/2776/index.htm</a>
    </li>
    <li>
        <a href="http://timtrott.co.uk/html-character-codes" title="UNICODE A-9" target="_blank">http://timtrott.co.uk/html-character-codes</a>
    </li>
</ul>

</body>
</html>

I would recommend upgrading to an HTML5 doctype.

PS: replacing bullets with images or glyphs… later.

4 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.