Medyman,
The design was wrong!!
I thought i could use it as base to build on. But like you said you will end up with tooltips. You couldn't put anchors in it and the content wouldn't remain on screen when you move the mouse.
I have been changing and trying for two days now and I have something else I hope will do the trick. I found Nathan Smith and Joshua Kaufman method's a good point into the direction. The problem now is the page moves up because I use a Iframe. I know an Iframe is a big no-no, but the technique makes sence. Especially since it doesn't break it for screenreaders. See will backman's latest podcast. Can I fix the body and the iframe so it won't move up? Here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>futureistoday revised version</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
/* remove those scrollbars */
body {background-color: #6F99FF; overflow: hidden; }
/* styling the menu */
#menuitem {display: block; list-style-type: none; padding: 0px; padding-left: 1em; margin: 0px; white-space: nowrap; height: 0em; }
#menuitem li {position: relative; top: 1px; z-index: 2; display: block; font:bold 75% verdana;
float: left; padding: 0px; margin: 0px; xmargin-right: 0.6em; border: 1px solid; }
#menuitem li a {display: block; padding:0.2em 1em 0.2em 1em; color:#000; text-decoration:none; }
#menuitem li.inactive {margin-top: 2px; border-color: #356DDD; background-color: #9AA8CA; }
#menuitem li.active {padding-bottom: 2px; border-color:#356DDD; background-color: #8093B9;}
#menuitem .inactive a:hover {cursor:hand; background: #F8F9FB; }
/* styling the iframe */
#in_frame {position:relative; width:95%; height:70%; border:1px solid #6c6; padding:4px; background-color:#fff; clear:both;}
#in_frame iframe {width:100%; height:100%; border:solid 1px black;}
#iframeContent {position: relative; width:999px; height:200px; }
/* lets get this off the screen */
#asection {position: absolute; top: 8000px; left: 0px; height: 100px;}
#bsection {position: absolute; top: 9000px; left: 0px; height: 100px;}
-->
</style>
</head>
<body>
<ul id="menuitem" class="menuitem">
<li class="active"><a href="" target="content">home</a></li>
<li class="inactive"><a href="#section1" target="content">Products</a></li>
<li class="inactive"><a href="#section2" target="content">Services</a></li>
<li class="inactive"><a href="" target="content">Support</a></li>
<li class="inactive"><a href="http://codylindley.com/CSS/297/the-iframe-slide" target="content"> nathan smith</a></li>
<li class="inactive"><a href="http://bsdtalk.blogspot.com/" target="content">will beckman</a></li>
</ul>
<pre>
<a id="asection" name="section1">
3-Day Chargeback Workshop
The recently released VMware Chargeback Workshop provides you with an interactive knowledge
sharing workshop on IT chargeback models, including presentation of industry best practices,
special considerations relevant to virtual infrastructure, presentation of a set of chargeback
tools and an example report using third-party chargeback metering software.
The VMware Chargeback Workshop will help you:
* Accelerate the design and deployment of chargeback processes and solutions for Virtual
Infrastructure.
* Gain financial flexibility and value from a virtual environment.
* Validate feasibility of chargeback in a virtual environment with proof-of-concept.
</a></pre>
<pre>
<a id="bsection" name="section2">
Oracle Releases Oracle VM Oracle VM is free server virtualization software that fully
supports both Oracle and non-Oracle applications, and is three times more efficient than
other server virtualization products. Backed by Oracle's world-class support organization,
customers now have a single point of enterprise-class support for their entire virtualization
environments, including the Linux operating system, Oracle Database, Fusion Middleware,
and Application software. These and other Oracle products are certified with Oracle VM.
Download software and documentation, guest templates, and kernels and modules from the new
Virtualization Technology Center.
</a></pre>
<!-- screenreaders end of content. Everything else is vanity :-) -->
<div id="in_frame">
<iframe name="content" src="" id="iframeContent" frameborder="0"></iframe>
</div>
</body>
</html>
and here is a link:
HTML Code:
http://futureistoday.homeunix.net:8080/revised-version.html
A bit off-topic: after 1 post and within 9 hours my site 
(two non-linked pages) got visited by a googlebot. How is that for marketing! 
How to Fix position on hover
Reply With Quote
Originally Posted by tfit
Bookmarks