Hovering elements over each other

Discussion in 'HTML' started by Shannon Cayze, Dec 9, 2008.

  1. Hello all,

    Is there a way to hover one HTML element over another and reliably
    position it within the page? I know how to set the z-index and
    position style attributes to get the element to hover, but positioning
    it accurately is another issue.

    I got it to work in a standard HTML page, but when I sent that page to
    my client they imported it to SharePoint. Since SharePoint adds
    additional content to the page, all of my elements that were
    absolutely positioned were offset. Also, since the z-index was set
    manually, using javascript to set the position based on the
    offsetParent doesn't work (I can't iteratively retrieve all offset
    parents).

    Is there a way to hover an element over another without setting the "z-
    index" and "position" style attributes so that it maintains the same
    parent structure?

    Thanks,
    Shannon
     
    Shannon Cayze, Dec 9, 2008
    #1
    1. Advertising

  2. Thanks, Ben. I'll give that a shot.

    What happened was that my client sent me a PowerPoint presentation
    with samples of what they wanted menu buttons to look like. When I
    right-clicked in PowerPoint and chose "Save as Image", the text on the
    buttons looked awful. Therefore, I tried saving just the menu button
    background as an image and hovering an <a> element with the button's
    text over the background image. I was able to position them absolutely
    and exactly where I wanted them. However, as described in my original
    post, any slight change of the content threw everything off, so it was
    pretty unreliable.

    I fixed the problem by doing a print screen of the PowerPoint
    presentation and using Photoshop to save the images. Then the text
    looked fine. However, this is something that may come in handy another
    time and is helpful to know.

    Thank you for your help,
    Shannon
     
    Shannon Cayze, Dec 10, 2008
    #2
    1. Advertising

  3. Shannon Cayze

    ksamdev Guest

    On Dec 9, 3:50 pm, Shannon Cayze <> wrote:
    > Hello all,
    >
    > Is there a way to hover one HTML element over another and reliably
    > position it within the page? I know how to set the z-index and
    > position style attributes to get the element to hover, but positioning
    > it accurately is another issue.
    >
    > I got it to work in a standard HTML page, but when I sent that page to
    > my client they imported it to SharePoint. Since SharePoint adds
    > additional content to the page, all of my elements that were
    > absolutely positioned were offset. Also, since the z-index was set
    > manually, using javascript to set the position based on the
    > offsetParent doesn't work (I can't iteratively retrieve all offset
    > parents).
    >
    > Is there a way to hover an element over another without setting the "z-
    > index" and "position" style attributes so that it maintains the same
    > parent structure?
    >
    > Thanks,
    > Shannon


    Suppose you want to add title to image. This is similar to your
    problem, right?

    Then I'd do next thing:

    <div style='position:relative'>
    <img style='width:100px' src='url'>
    <span style='position:absolute;left:0px;right:0px;bottom:0px'>Title</
    span>
    </div>

    The idea is that you add wrapper as div around element. In given
    solution you do not even need to play with z-index and Title is
    automatically fixed to the bottom of wrapper that makes effect of
    hovering one element by another.
     
    ksamdev, Dec 14, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. GD
    Replies:
    4
    Views:
    2,233
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 13, 2005
  2. Tjerk Wolterink

    xsl:for-each for each 3 elements problem

    Tjerk Wolterink, Nov 3, 2004, in forum: XML
    Replies:
    3
    Views:
    455
    Tjerk Wolterink
    Nov 3, 2004
  3. jef
    Replies:
    1
    Views:
    126
    Eliyahu Goldin
    Apr 12, 2005
  4. Paul M.
    Replies:
    1
    Views:
    127
    Vjekoslav Begovic
    Jul 24, 2003
  5. Replies:
    4
    Views:
    175
Loading...

Share This Page