archipuir
Jan 16th, 2010, 02:24 PM
Hi,
I would like to display a box on top of the page,
but the box won't display on top of the page. Instead it is displayed under the page.
How do I get it work?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
a.info {
text-decoration:none;
position: relative;
cursor: default;
}
a.info span {
background-color: #f0f0f0;
border: #BFBFBF 1px;
border-style: groove;
width: 250px;
display: block;
padding: 5px;
position: absolute;
left: 20px;
top: 0px;
}
</style>
</head>
<body>
<a class="info" href="#" onClick="return false">?<span>Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></a>
<a class="info" href="#" onClick="return false">Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></a>
</body>
</html>
I would like to display a box on top of the page,
but the box won't display on top of the page. Instead it is displayed under the page.
How do I get it work?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
a.info {
text-decoration:none;
position: relative;
cursor: default;
}
a.info span {
background-color: #f0f0f0;
border: #BFBFBF 1px;
border-style: groove;
width: 250px;
display: block;
padding: 5px;
position: absolute;
left: 20px;
top: 0px;
}
</style>
</head>
<body>
<a class="info" href="#" onClick="return false">?<span>Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></a>
<a class="info" href="#" onClick="return false">Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></a>
</body>
</html>