Floating an href over part of a background image... from outside the div? (5 posts)

  1. tovlakas
    Posted 6 years ago #

    Hi all, first post here! I am creating a WordPress template for my company, and running into somewhat of a game-ender here. I will try to make this as clear as possible, but please ask if something isn't clear.

    If you go to http://www.turbosocialmedia.com/dev-environment/ you will see a red "FREE VIDEOS" button at the right side of the navigation menu at the top. This is actually just part of the background image, and currently not clickable. I want to put a clickable area over it to give the impression of a clickable button.

    Because the navigation bar is controlled within a core file of WordPress, I am not able to directly edit the html of the nav bar, (otherwise this issue would be easily-solved) and if I were to do so, a WordPress upgrade would overwrite my changes (since it's a core WP file, not a theme file that controls the nav).

    Within the header template file, all I can see regarding the menu is the following call: <?phpwp_page_menu(); ?>

    So, my question is, can I float an href over that area from OUTSIDE of the menu html? My header file essentially ends at the bottom of my header image, and then the menu is simply called by the line above, so if I put something between the menu call and the header div, is it possible to manipulate it to cover the red button within the menu?

    I will attach both the header php file and some visual aids for reference. I apologize if this request is unclear; I'm having trouble wording it properly. Any help is greatly appreciated!


    Header file: http://php.pastebin.com/m449ba191
    Site homepage: http://img11.imageshack.us/img11/3136/originalku.jpg
    Site homepage with section and notes overlay: http://img238.imageshack.us/img238/1056/overlayo.jpg

  2. esmi
    Forum Moderator
    Posted 6 years ago #

    can I float an href over that area from OUTSIDE of the menu html?

    It should be possible. Since you're using a fixed width menu that follows a header whose height is known, you can add your video link as a div in the footer and then use absolute positioning to move that div into position over the end of the menu bar.

    You'll need to define the width & height of the div to match the image and place the link plain text inside span tags. You can then use the span to move the link text off the page using something like:

    #video a span {

    The end result should be a clickable box over your video graphic.

  3. tovlakas
    Posted 6 years ago #

    esmi, thank you so much for your help. Just so I make sure I understand correctly:

    1. add a div to the footer, containing <a href="#"><span>test here</span></a>.
    2. in the stylesheet, define width/height of this div to match red "button"
    3. in the stylesheet, define positioning of the div's <a> class to be positioned over the button.
    4. in the stylesheet, define positioning of span class for text to be way off the page as you've shown.

    Is this correct or am I missing something?


  4. esmi
    Forum Moderator
    Posted 6 years ago #

    That sounds like you've got it covered. :-)

  5. tovlakas
    Posted 6 years ago #

    esmi, you are awesome, that totally worked. Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic