#linkList{
background-color:#990099;
position:absolute;
margin-left:-1450px;
margin-top:1000px;
width:300px;
z-index:1;
}
#linkList2{
background-color:#0000FF;
width:100px;
padding:5px;
}
#lselect{
font-family:"Chaparral Pro";
}
#linkList h3.select{
background-color:#FFFFFF;
color:#333333;
}
#linkList h3.archives{
background-color:#FFFFFF;
color:#333333;
}
#linkList h3.resources{
background-color:#FFFFFF;
color:#333333;
}
#linkList ul{
margin:0px;
padding:0px 50px 0px 50px;
width:210px;
}
#linkList li{
color:#FF0000;
display:block;
width:200px
position:absolute;
margin-left:-1450px;
#linkList{
background-color:#990099;
position:absolute;
margin-left:50px;
margin-top:10px;
width:300px;
z-index:1;
}
<div id="linkList">
<!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
<div id="linkList2">
<!-- If you're wondering about the extra at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
<!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
<div id="lselect">
<h3 class="select"><span>Select a Design:</span></h3>
<!-- list of links begins here. There will be no more than 8 links per page -->
<ul>
<li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
</ul>
</div>
<div id="larchives">
<h3 class="archives"><span>Archives:</span></h3>
<ul>
<li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs »</a> </li>
<li><a href="/" title="View previous set of designs. AccessKey: p" accesskey="p">« <span class="accesskey">p</span>revious designs</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>
</ul>
</div>
<div id="lresources">
<h3 class="resources"><span>Resources:</span></h3>
<ul>
<li><a href="http://www.csszengarden.com/001/001.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span class="accesskey">V</span>iew This Design’s <acronym title="Cascading Style Sheets">CSS</acronym></a></li>
<li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a> </li>
<li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
</ul>
</div>
</div>
</div>
</div>
position:absolute;
margin-left:-1450px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
#linkList{
background-color:#990099;
position:absolute;
width:300px;
z-index:1;
}
#linkList2{
background-color:#0000FF;
width:100px;
padding:5px;
}
#lselect{
font-family:"Chaparral Pro";
}
#linkList h3.select{
background-color:#FFFFFF;
color:#333333;
}
#linkList h3.archives{
background-color:#FFFFFF;
color:#333333;
}
#linkList h3.resources{
background-color:#FFFFFF;
color:#333333;
}
#linkList ul{
margin:0px;
padding:0px 50px 0px 50px;
width:210px;
}
#linkList li{
color:#FF0000;
display:block;
width:200px;
}
</style>
</head>
<body>
<div id="linkList">
<!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
<div id="linkList2">
<!-- If you're wondering about the extra at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
<!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
<div id="lselect">
<h3 class="select"><span>Select a Design:</span></h3>
<!-- list of links begins here. There will be no more than 8 links per page -->
<ul>
<li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
</ul>
</div>
<div id="larchives">
<h3 class="archives"><span>Archives:</span></h3>
<ul>
<li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs »</a> </li>
<li><a href="/" title="View previous set of designs. AccessKey: p" accesskey="p">« <span class="accesskey">p</span>revious designs</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>
</ul>
</div>
<div id="lresources">
<h3 class="resources"><span>Resources:</span></h3>
<ul>
<li><a href="http://www.csszengarden.com/001/001.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span class="accesskey">V</span>iew This Design’s <acronym title="Cascading Style Sheets">CSS</acronym></a></li>
<li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a> </li>
<li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Registrerte brukere: Google [Bot]