Forum Moderators: not2easy
Here's an idea: <snip>
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floating bottom right</title>
<style type="text/css">
.guidestep
{
margin-top:20px;
background-color:#efece6;
overflow:hidden;
padding:15px;
font-size:1.2em;
line-height:1.2em;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
}
.arrowtop {
background:url(img/toparrow.gif) no-repeat right bottom;
float:right;
height: 15px;
width: 23px;
}
</style>
</head>
<body>
<div class='guidestep'>
<a class="arrowtop" href="#top"></a>
Any content here, could be text or images
</div>
</body>
</html>
The code above does not work, the image/anchor is rendered right/top.....
[edited by: swa66 at 8:31 am (utc) on Sep. 25, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]
If you were to want the image in the absolute bottom right corner of the container, then drop the position on .arrowtop from the background, add position absolute; right: 0; bottom: 0;, and then wrap .guidestep in a <div> with position: relative;
<!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" />
<title>Floating bottom right</title>
<style type="text/css">
.guidestep
{
width:250px;
margin-top:20px;
background-color:#efece6;
overflow:hidden;
padding:15px;
font-size:1.2em;
line-height:1.2em;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
}
.relativ{position:relative;}
.arrowtop {
background:url(img/toparrow.gif) no-repeat;
float:right;
height: 15px;
width: 23px;
position:absolute; right: 0; bottom: 0;
}
</style>
</head>
<body>
<div class="relativ">
<div class='guidestep'>
<a class="arrowtop" href="#top"></a>
Any content here, could be text or images
</div>
</div>
</body>
</html>
This is what happens:
<snip>
Basically the wrapping DIV (relative), will hold the "arrow", outside of "guidestep"....
[edited by: swa66 at 8:32 am (utc) on Sep. 25, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]
updated the code following your tips:
You did more than that however.
Your first sample did NOT have a width on .guidestep. Comment out the width, let it flow full width, and it is fine. Move the width declaration as suggested below and the image is absolutely positioned to the bottom right of the visible .guidestep container
It's one option at any rate. You may be offered alternatives from others that are quicker and smarter at choosing the best option to achieve the results you seek.
<!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" />
<title>Floating bottom right</title>
<style type="text/css">
.relativ {
position: relative;
width: 250px;
}
.guidestep {
/*width: 250px;*/
margin-top: 20px;
background-color: #efece6;
overflow: hidden;
padding: 15px;
font: 1.2em/1.2em Arial, Helvetica, sans-serif;
text-align: left;
}.arrowtop {
background: url(yarn.gif) no-repeat;
float: right;
height: 15px;
width: 23px;
position: absolute; right: 0; bottom: 0;
}
</style>
</head>
<body>
<div class="relativ">
<div class="guidestep">
<a class="arrowtop" href="#top"></a>
Any content here, could be text or images
</div>
</div>
<!--#####
Basically the wrapping DIV (relative), will hold the "arrow", outside of "guidestep"....
-->
</body>
</html>
I will try it, thanks again
