MozillaZine

relative float that doesn't take up space

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Racer
 
Posts: 6108
Joined: November 18th, 2002, 11:07 am

Post Posted June 8th, 2004, 1:12 pm

I'm trying to create floating text (kind of like what happens with the title attribute) using CSS. Can this be done in Mozilla? This code almost works...
Code: Select all
<html>
<head>
<title>CSS hover test</title>
<style>
   span.hov { color: red; }
   span.hov:hover { color: red; position: relative; }
   span.hov span { display: none; color: blue; }
   span.hov:hover span { display: inline; position: relative; top: 1.1em; left:-1em; width: 100px; background: #eeeeee; color: blue; z-index: 10; }
</style>
</head>
<body>
<br>Filler
<br>This is <span class="hov">Test 1<span class="hov2">Hover test 1<br>Line 2</span></span> which should show hovering text.
<br>More Filler
<br>This is <span class="hov">Test 2<span class="hov2">Hover test 2</span></span> which should also show hovering text.
<br>Even More Filler
<br><br>The intent is to create floating text that shows <u>below</u> the item.
</body>
</html>

(Edited to show working method. Added position:relative to containing span AND z-index: 10 to hover span. I also added a 2nd hover line for effect.)
Last edited by Racer on June 8th, 2004, 10:46 pm, edited 4 times in total.

twanno
 
Posts: 284
Joined: February 10th, 2004, 8:58 am

Post Posted June 8th, 2004, 7:17 pm

This worked for me:
adding this
Code: Select all
 margin-right:-4.7em;
to the span.hov:hover span rule
I don't know why it is 4.7em, but I just tested a few values, and this seems to work

MonkeeSage

User avatar
 
Posts: 1011
Joined: December 20th, 2002, 8:15 pm

Post Posted June 8th, 2004, 7:30 pm

The problem is how to get the co-ordinates for where to place it since people may be using different fonts at different sizes or different zoom levels...for that you need JavaScript I think.

Code: Select all
<style type="text/css">
span.hov {
   color: red;
}
span.hov span {
   display: none;
   position: absolute;
   width: 100px;
   background: #eeeeee;
   color: blue;
}
</style>

<script type="text/javascript">
// <![CDATA[
function getPos(elm, side) {
   var pos, pElm;
   side = side.substring(0, 1).toUpperCase() + side.substring(1);
   eval('pos = elm.offset' + side);
   pElm = elm.offsetParent;
   while (pElm) {
      eval('pos += pElm.offset' + side);
      pElm = pElm.offsetParent;
   }
   return pos;
}

function hover(e) {
   if (e.target.className == 'hov') {
      var elm    = e.target.childNodes[1];
      var top    = getPos(e.target, 'top');
      var left   = getPos(e.target, 'left');
      var bottom = e.target.offsetHeight + top;
      elm.style.top     = bottom + 'px';
      elm.style.left    = left + 'px';
      elm.style.display = 'inline';
   }
}
   
function unhover(e) {
   if (e.target.className == 'hov') {
      var elm = e.target.childNodes[1];
      elm.style.display = 'none';
   }
}

function makeHovers() {
   var spans = document.getElementsByTagName('span'), i;
   for (i = 0; i < spans.length; ++i) {
      if (spans[i].className == 'hov') {
         spans[i].onmouseover = hover;
         spans[i].onmouseout  = unhover;
         spans[i].removeAttribute('title');
      }
   }
}

window.onload = makeHovers;
// ]]>
</script>

...

<div>
   <br />Filler
   <br />This is <span class="hov">Test 1<span class="hov2">Hover test 1</span></span> which should show hovering text.
   <br />More Filler
   <br />This is <span class="hov">Test 2<span class="hov2">Hover test 2</span></span> which should also show hovering text.
   <br />Even More Filler
   <br/ >
   <br />The intent is to create floating text that shows <u>below</u> the item. Is there a way to remove that added space?
</div>


Should degrade relatively gracefully and use the title attribute if JavaScript is turned off or unsupported.


Shelumi`El
Jordan

S.D.G
"[M]en are usually satisfied with bad argument only when their convictions rest on other grounds." --John Oman

Racer
 
Posts: 6108
Joined: November 18th, 2002, 11:07 am

Post Posted June 8th, 2004, 8:03 pm

Um the float is working fine. The weirdness is that its adding a space after the original tag. Am I the only one that is seeing this? Are you telling me that a position: relative CSS styled tag is SUPPOSED to take up space even though it is floating at a place almost completely unrelated to that space?

old momokatte
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted June 8th, 2004, 8:20 pm

Yes, Racer. A relatively-positioned element is first rendered in the flow of the page, then removed from it and repositioned according to where it was rendered.

A true "floated" element (float: left; or float: right;) is removed from the flow of the page first, then rendered in relation to other elements that can clear it.

Racer
 
Posts: 6108
Joined: November 18th, 2002, 11:07 am

Post Posted June 8th, 2004, 8:59 pm

So can I make a position: absolute that is positioned relative to the item that contains it?

old momokatte
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted June 8th, 2004, 9:06 pm

Racer wrote:So can I make a position: absolute that is positioned relative to the item that contains it?

Only if the item that contains it has been positioned (or else it will be relative to the viewport). A solution is to put "position: relative;" on the container and give it no offsets.

Racer
 
Posts: 6108
Joined: November 18th, 2002, 11:07 am

Post Posted June 8th, 2004, 10:21 pm

Yay momokatte - that did it. Thanks.
..and best of all, it was done entirely with CSS.
I'll update the code above to reflect the working version.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: Google [Bot] and 2 guests