Space Goat
05-24-2007, 06:35 PM
Edit: Never mind, I have decided not to use sliding doors. The admins may delete this thread if they wish; I'm sorry for wasting time.
I'm currently redesigning my site, Hypersyllogistic (http://www.hypersyllogistic.com), from a table-based layout to a pure CSS layout.
My progress so far appears here (http://www.hypersyllogistic.com/redesign2/).
I am trying to implement Dynamic Drive's CSS Sliding Doors technique (http://www.dynamicdrive.com/style/csslibrary/item/sliding-doors-tabs-menu/), but the effort isn't going well. Can anyone tell me what I'm doing wrong?
Here is my CSS code for the menu:
#navigation {float: left; width: 100%; position: relative: bottom: 0; z-index: 2}
#navigation ul {list-style: none; font-size: 0.7em; text-align: center; font-weight: bold; padding: 0; margin: 1.06em 0 0; border: none}
#navigation li {display: inline}
#navigation a {float: left; height: 32px; line-height: 29px; text-decoration: none; color: white; background: url(../images/deftableft.png) no-repeat left top}
#navigation a span {float: left; display: block; height: 32px; line-height: 29px; text-decoration: none; color: white; background: url(../images/deftabright.png) no-repeat right top}
#navigation a:hover {background: url(../images/deftabhovleft.png) no-repeat left top}
#navigation a:hover span {display: block; background: url(../images/deftabhovright.png) no-repeat right top}
Here is my HTML code:
<div id="navigation">
<ul><li><a href="http://www.hypersyllogistic.com/" title="Find the latest screeds, and vote in the most current poll."><span>Home</span></a></li><li><a href="http://www.hypersyllogistic.com/about.php" title="The purpose and mission of Hypersyllogistic."><span>About the Site</span></a></li><li><a href="http://www.hypersyllogistic.com/screedarchives.php" title="A collection of my screeds that have appeared on the front page."><span>Screed Archives</span></a></li><li><a href="http://www.hypersyllogistic.com/writings.php" title="An archive of my past writings and papers."><span>Writings</span></a></li><li><a href="http://www.hypersyllogistic.com/links.php" title="A directory of favorite links."><span>Links</span></a></li><li><a href="http://www.hypersyllogistic.com/photogalleries.php" title="Photographs I've taken of various interesting locales."><span>Photo Galleries</span></a></li><li><a href="http://forums.hypersyllogistic.com/index.php?automodule=blog" title="Share your thoughts, and read those of others."><span>Blogs</span></a></li><li><a href="http://forums.hypersyllogistic.com" title="Sound off on whatever you want, because your opinion matters!"><span style="color: #FFFF00;">Forums</span></a></li></ul>
</div>
I'm currently redesigning my site, Hypersyllogistic (http://www.hypersyllogistic.com), from a table-based layout to a pure CSS layout.
My progress so far appears here (http://www.hypersyllogistic.com/redesign2/).
I am trying to implement Dynamic Drive's CSS Sliding Doors technique (http://www.dynamicdrive.com/style/csslibrary/item/sliding-doors-tabs-menu/), but the effort isn't going well. Can anyone tell me what I'm doing wrong?
Here is my CSS code for the menu:
#navigation {float: left; width: 100%; position: relative: bottom: 0; z-index: 2}
#navigation ul {list-style: none; font-size: 0.7em; text-align: center; font-weight: bold; padding: 0; margin: 1.06em 0 0; border: none}
#navigation li {display: inline}
#navigation a {float: left; height: 32px; line-height: 29px; text-decoration: none; color: white; background: url(../images/deftableft.png) no-repeat left top}
#navigation a span {float: left; display: block; height: 32px; line-height: 29px; text-decoration: none; color: white; background: url(../images/deftabright.png) no-repeat right top}
#navigation a:hover {background: url(../images/deftabhovleft.png) no-repeat left top}
#navigation a:hover span {display: block; background: url(../images/deftabhovright.png) no-repeat right top}
Here is my HTML code:
<div id="navigation">
<ul><li><a href="http://www.hypersyllogistic.com/" title="Find the latest screeds, and vote in the most current poll."><span>Home</span></a></li><li><a href="http://www.hypersyllogistic.com/about.php" title="The purpose and mission of Hypersyllogistic."><span>About the Site</span></a></li><li><a href="http://www.hypersyllogistic.com/screedarchives.php" title="A collection of my screeds that have appeared on the front page."><span>Screed Archives</span></a></li><li><a href="http://www.hypersyllogistic.com/writings.php" title="An archive of my past writings and papers."><span>Writings</span></a></li><li><a href="http://www.hypersyllogistic.com/links.php" title="A directory of favorite links."><span>Links</span></a></li><li><a href="http://www.hypersyllogistic.com/photogalleries.php" title="Photographs I've taken of various interesting locales."><span>Photo Galleries</span></a></li><li><a href="http://forums.hypersyllogistic.com/index.php?automodule=blog" title="Share your thoughts, and read those of others."><span>Blogs</span></a></li><li><a href="http://forums.hypersyllogistic.com" title="Sound off on whatever you want, because your opinion matters!"><span style="color: #FFFF00;">Forums</span></a></li></ul>
</div>