Chief Delphi - CSS help: "hovering" boxes

Chief Delphi (http://www.chiefdelphi.com/forums/index.php)

- Website Design/Showcase (http://www.chiefdelphi.com/forums/forumdisplay.php?f=64)

- - CSS help: "hovering" boxes (http://www.chiefdelphi.com/forums/showthread.php?t=48018)

Astronouth7303

22-06-2006 16:43

CSS help: "hovering" boxes

I'm working on getting the box next to the "slug" to display properly. http://www.astro73.com/slugs.html (Shut up about the tables, they'll go away.)

Basically, when you click the slug icon, it toggles the visibility of the box. When the box is hidden, the page should flow as if it were just an image. (It does.) When the box is visible, it should "float" or "hover" over the content following the icon (much like the image on the page). (Note that the red border is just for debugging.)

Any ideas?

Ryan M.

22-06-2006 17:08

Re: CSS help: "hovering" boxes

Do something like this:

Code:

<p>

        By clicking the slug at left, a you can hide and show a little box that displays the slug you can use in posts.

        <span class="slug" style="position: relative;"><img src="slugs_files/images/slug.gif" alt="(SLUG)" title="Show/Hide slug" /><span class="show" style="position: absolute; top: 0; left: 10px;">slug:this/should/hover/over/the/text@right</span></span>

        The slug address, when shown, should cover up this text (or at least the start of it).

</p>

The styles are inline. Basically, you just give the box an absolute positioning X (didn't check how many) pixels left. Because of a CSS quirck/firefox bug, you have to specify explicitly that the containing span (class="slug") is positioned relatively.

Astronouth7303

22-06-2006 17:18

Re: CSS help: "hovering" boxes

Quote:

Originally Posted by Ryan M.

Dang, you're good. Works perfectly in Firefox. (Too bad Opera has width problems. Working on that one...)
EDIT: Fixed Opera issues. Just white-space: nowrap.

All times are GMT -5. The time now is 16:36.