Hi all,
THIS HAS BEEN FIXED!!!
Imagine a list of 6 hyperlinked list items. With a little CSS and adding one little 100px square image, I "should" be able to spread the "clickability" of the hyperlink out over the image, creating what looks like a "table" in XHTML but isn't.
I went over and over and over the code, and just could not figure out what I did wrong. If you are in a masochistic mood, have a look at the code and see if you can find the problem, and I'll tell you the answer at the bottom.
Answer: This line of code has a ( instead of {
and
the </head> was also missing.
Blaaaaarrgh!
THIS HAS BEEN FIXED!!!
Imagine a list of 6 hyperlinked list items. With a little CSS and adding one little 100px square image, I "should" be able to spread the "clickability" of the hyperlink out over the image, creating what looks like a "table" in XHTML but isn't.
I went over and over and over the code, and just could not figure out what I did wrong. If you are in a masochistic mood, have a look at the code and see if you can find the problem, and I'll tell you the answer at the bottom.
Code:
<style type="text/css">
/* Unordered list to construct a grid! Simple XHTML markup, easy CSS!
The ul is "position relative" so that it can give a context for all the positioned items inside the ul! Also, because each list item is about 1/3rd the width of the "table" or ul width, it means that 6 items will form 2 rows! (I leave a little extra room in the table width to allow for "cell" padding). Add a border, and that's a table!*/
ul {position: relative;
list-style-type: none;
width: 605px;
margin: 0;
padding: 0;}
li {float: left;
width: 151px;
padding-bottom: 1em;
border-right: 1px solid #333;
border-bottom: 1px solid #333;}
/* the background image is 50% FROM LEFT and 10px from top of "cell" */
li#one {background : url(../small_neo.jpg) no-repeat 50% 10px;}
li#two {background : url(../small_neo.jpg) no-repeat 50% 10px;}
li#three {background : url(../small_neo.jpg) no-repeat 50% 10px; border-right: 0 solid #333;}
/* Following rules make format cell lines in a certain way and add images */
li#four { padding-top: .5em;
background: #fff url(../small_neo.jpg) no-repeat 50% 3em;
border-bottom: 0 solid #333;}
li#five { padding-top: .5em;
background: #fff url(../small_neo.jpg) no-repeat 50% 3em;
border-bottom: 0 solid #333;}
li#six {padding-top: .5em;
background: #fff url(../small_neo.jpg) no-repeat 50% 3em;
border-bottom: 0 solid #333;
border-right: 0 solid #333;}
/* Following rules add "padding" from each "anchor" (a link) to spread clickability across each "cell" — the padding is not just for cell height to see the picture but adds clickability function to the whole area. So "padding top" spreads the clickability above the link, and the second line of code spreads the clickability below the link */
li#one a, li#two a, li#three a {padding-top: 160px; }
li#four a, li#five a, li#six a (padding-bottom: 160px;}
/* the following rules turn the cells into a block */
li a {display: block;
text-align: center;}
a:link, a:visited {text-decoration: none;
color: #green; font-weight: bold;}
</style>
<body>
<ul>
<li id="one"><a href="#">One</a></li>
<li id="two"><a href="#">Two</a></li>
<li id="three"><a href="#">Three</a></li>
<li id="four"><a href="#">Four</a></li>
<li id="five"><a href="#">Five</a></li>
<li id="six"><a href="#">Six</a></li>
</ul>Answer: This line of code has a ( instead of {
and
the </head> was also missing.
Blaaaaarrgh!