ThemeShaper Forums » Thematic

[closed]

Superfish menu, with image: CSS wrong 2nd level

(8 posts)
  • Started 13 years ago by Baudesign
  • Latest reply from Baudesign
  • This topic is not resolved

  1. Baudesign
    Member

    Hi everyone,

    I am trying to build a nice menu with Superfish JQuery script where my
    top level is made with images, but where the second, third, etc. are
    displayed simply with default text tabs.

    For the moment, I am stuck:
    http://www.mulibwanji.com/ma/?page_id=9

    "Hi-Fi Set-Up" is the only page with submenus, for testing purposes.
    If you put your curor over this tab and wait half a second, the other
    tab appears, which is fine. It overlaps the main level, with the same image sprite:
    http://www.mulibwanji.com/ma/wp-content/themes/ma/images/menu-bg.png

    Here is the complete CSS code at the present moment:
    http://www.mulibwanji.com/ma/wp-content/themes/ma/style.css

    If someone could guide me a bit, I am going crazy pulling my hair off.

    Thanks

    Pat

    Posted 13 years ago #

  2. crippletoe
    Member

    Hi,
    I am having the same problem and i dont knwo quite how to approach it, i mean , i cannot really figure out how to dispplay the images in the 1st level. if these are backgrounds, how do you get rid of the text?
    i am asking this because i noticed after visiting your likns that you solved the problem...
    :)

    Posted 13 years ago #

  3. Baudesign
    Member

    Hello crippletoe,

    Yes, I have solved the problem.

    Look at my CSS code, you will see:

    /* Niveau 1 */
li.page-item-3{text-indent:-9999px;width:170px;}
li.page-item-5{text-indent:-9999px;width:150px;}
li.page-item-7{text-indent:-9999px;width:200px;}
li.page-item-9{text-indent:-9999px;width:140px;}
li.page-item-11{text-indent:-9999px;width:140px;}
li.page-item-13{text-indent:-9999px;width:140px;}
li.page-item-3 a:hover{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) 0px -59px no-repeat;}
li.page-item-5 a:hover{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -170px -59px no-repeat;}
li.page-item-7 a:hover{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -320px -59px no-repeat;}
li.page-item-9 a:hover{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -520px -59px no-repeat;}
li.page-item-11 a:hover{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -660px -59px no-repeat;}
li.page-item-13 a:hover{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -800px -59px no-repeat;}
li.page-item-3.current_page_item{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) 0px -118px no-repeat;}
li.page-item-5.current_page_item{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -170px -118px no-repeat;}
li.page-item-7.current_page_item{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -320px -118px no-repeat;}
li.page-item-9.current_page_item{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -520px -118px no-repeat;}
li.page-item-11.current_page_item{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -660px -118px no-repeat;}
li.page-item-13.current_page_item{background:transparent url(/ma/wp-content/themes/ma/images/menu-bg.png) -800px -118px no-repeat;}

    You get rid of the text this way: text-indent:-9999px; This says move the text 9999 pixels away to the left. ;-)

    Good luck.

    Posted 13 years ago #

  4. crippletoe
    Member

    fantastic! i will give it a go!
    thanks.

    Posted 13 years ago #

  5. crippletoe
    Member

    Hey.
    thanks a lot!
    the text-indent thing worked but now i am getting a background image on all levels of the menu when i only wanted to get it on the first level. i tried to define the higher levels to have no background but it doesnt seem to work. also the text is gone from there.. any idea?

    Posted 13 years ago #

  6. crippletoe
    Member

    Hi again,
    i encountered yet another problem, IE doesnt show my images for some reason...
    any idea why? did you have such problem?

    Posted 13 years ago #

  7. crippletoe
    Member

    hey Baudesign,
    did you ever get this css code to work in IE6? i have been fighting with it for a few weeks now. its unbelievably frustrating..

    Posted 13 years ago #

  8. Baudesign
    Member

    @crippletoe: I am sorry for I do not follow closely my forum threads. As for your last question, frankly, I do not give a damn about IE6. I do not have it, I do not test for it, and I really don't care. Moreover, I installed this plugin: http://www.sandaru1.com/2009/10/17/reject-ie6/ I suggest you do the same and stop wasting time with this obsolete browser.

    Now, if you want to send me a link to your css, I might be able to help on my free time.

    Posted 13 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.