SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Location
    NJ
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide visibility of a menu under an image

    I am trying to style a menu under an image but have it hidden. I am using some code from another page on our website and cannot figure out what one of the attributes means. The issue is with the a after the second #standardsmenu and with the a i to make the menu invisible in the third #standardsmenu. I've searched google for an i and/or an a attribute and can only come up with the idea of pseudo-classes. Any ideas?

    #standardsmenu {
    background-color: #EFF0EC;
    background-image: url(/images/StandardsPyramid.png);
    background-repeat:no-repeat;
    height: 498px;
    width: 750px;
    position: relative;
    }

    #standardsmenu a {
    position: absolute;
    height: 30px;
    width: 30px;
    text-decoration: none;
    }

    #standardsmenu a i {
    visibility: hidden;
    }

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Hello upwithalyssa,

    Welcome to SitePoint.

    This is why CSS cannot be simply "copied" from another page it must correspond to your mark up. the "a i" part you are referring to is NOT an attribute it's a selector and would correspond to any <i> within the <a> tag with the element with the ID of "standardsmenu". My guess is that this CSS is intended to hide the visibility of TEXT ( not image) for markup that would look like this:

    Code:
    <ul id="standardsmenu">
     <li><a href="#"><i>some link</i></a></li>
     <li><a href="#"><i>some link</i></a></li>
     <li><a href="#"><i>some link</i></a></li>
    </ul>

    This technique has it's own accessibility and SEO issues. But it not used to hide menus ( as in drop downs) just merely the text ( as in image replacement)

    I was not exactly clear in what your actually trying to do overall and you didn't post your HTML mark up but i hope this helps somehow.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Location
    NJ
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi dresen_phoenix,
    Thanks for your suggestion. I was able to work out what needed to be done. Yes, you were correct in that I wanted to hide the text. The i was an old reference to italics so I just removed that. It wasn't needed. Your suggestion to make a list was useful too. Thanks for taking the time to answer my plea!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •