tfit
03-12-2008, 11:07 AM
Hi all
I searched a reasonable time to find an answer for my problem;
I have a menubar and when I hover over the links it shows the content. My problem is that the data moves around with the link. I like it to remain on a fixed place. Is this possible with css?
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>futureistoday homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
#menuitem {list-style: none; margin: 0; padding: 0;
}
@media all {
#menuitem { text-align: center; }
}
#menuitem li {bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0;
position: relative;
}
#menuitem a, #menuiten a:link, #menuitem a:visited {background: #900; border: 1px solid #FFF;
bottom: 2px; color: #FFF; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px;
position: relative; right: 2px; text-decoration: none;
}
#menuitem #active a, #menuitem #active a:link, #menuitem #active a:visited, #menuitem #active a:hover {
background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC;
border-top: 1px solid #9CC; bottom: 0; color: #FFF; margin: 0;
}
#menuitem a:hover {background: #C00; bottom: 1px; color: #FFF; right: 1px;
}
#menuitem li a span {display: none;}
#menuitem li a:hover span {display: block; position: absolute; top: 190px; left:0px; width: 150px; height: 150px; color: #AAA; background: black; text-align: center; padding: 5px; margin: 10px;
z-index: 1; font: 10px Verdana, sans-serif;
}
-->
</style>
</head>
<body>
<ul id="menuitem">
<li><a href="#">Home<span> text to be shown </span></a></li>
<li><a href="#">Products<span> some other values </span></a></li>
<li><a href="#">Services<span> info about services </span></a></li>
<li><a href="#">Support<span> contact information </span></a></li>
</ul>
</body>
</html>
I searched a reasonable time to find an answer for my problem;
I have a menubar and when I hover over the links it shows the content. My problem is that the data moves around with the link. I like it to remain on a fixed place. Is this possible with css?
Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>futureistoday homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
#menuitem {list-style: none; margin: 0; padding: 0;
}
@media all {
#menuitem { text-align: center; }
}
#menuitem li {bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0;
position: relative;
}
#menuitem a, #menuiten a:link, #menuitem a:visited {background: #900; border: 1px solid #FFF;
bottom: 2px; color: #FFF; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px;
position: relative; right: 2px; text-decoration: none;
}
#menuitem #active a, #menuitem #active a:link, #menuitem #active a:visited, #menuitem #active a:hover {
background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC;
border-top: 1px solid #9CC; bottom: 0; color: #FFF; margin: 0;
}
#menuitem a:hover {background: #C00; bottom: 1px; color: #FFF; right: 1px;
}
#menuitem li a span {display: none;}
#menuitem li a:hover span {display: block; position: absolute; top: 190px; left:0px; width: 150px; height: 150px; color: #AAA; background: black; text-align: center; padding: 5px; margin: 10px;
z-index: 1; font: 10px Verdana, sans-serif;
}
-->
</style>
</head>
<body>
<ul id="menuitem">
<li><a href="#">Home<span> text to be shown </span></a></li>
<li><a href="#">Products<span> some other values </span></a></li>
<li><a href="#">Services<span> info about services </span></a></li>
<li><a href="#">Support<span> contact information </span></a></li>
</ul>
</body>
</html>