#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    9

    Exclamation Menu background image help


    Hi:

    I am having some problems getting the background image of a drop-down menu to do what I want. The drop-down menus have different lengths, and I have a gradient image which I would like to have repeat across (repeat-x) but on the y-axis, I want it to be scaled to fit the menu height which differs from drop-down to drop-down.

    I have the following code in my CSS file.

    Code:
    transparent url(../images/style1/submenu_bg.png) repeat-x 0 bottom
    I cannot figure out how to have the image scale on the y-axis.

    Any assistance would be appreciated.
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    CSS3 has a background-size property but it probably won't work for most current browsers. Try adding the following to your CSS rule:
    Code:
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    -webkit-background-size: auto 100%; 
    background-size: auto 100%;
    IE might not like it though

    [auto 100% is for horizontal and vertical sizing respectively]
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    9

    Exclamation


    Hi Andrew:

    That worked perfectly. I have an IE6 alert on my site, so that should address that issue to my satisfaction.

    I have 2 other issues which I can't figure out.

    If you take a look at the menu on my site http://trilionltd.com you will notice that on hover over "who we are" and "what we do" the level 1 menu gets a lighter background. I don't want that, and no matter what I do, I can't get rid of it.

    The other issue I have is with the side menu system on the site once you are down 2 levels (click on "what we do/Our Portfolio"). The side menu is helpful for navigating between and within pages in a section, but I am having trouble highlighting the page the viewer is on. For example, I would like either some form of a +/- or toggle arrows for opening and closing collapsable menus and a method of highlighting what page is currently being displayed (different background or a text decoration on the link to the active page).

    Can you advise?
  6. #4
  7. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    Your page links to about 20 different style sheets and 12 or more JavaScript sources. Quite amazing for such a sparse page!

    That faint background when you hover a main menu link could be either a colour or, more likely, an image. I suspect it is a very thin .png image that is repeated horizontally as a background image.

    You could search your images folder(s) to see if you can spot the image - a bit tricky when it is a thin line - and replace that image with one with the same name (and extension).

    Or install a colour-picker tool that would allow you to point at the background and it would tell you the hex value for that colour. Then search your css files for that number.

    Or search for a css rule that applies to the 'over' class - which is added when you hover over the menu.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    9
    Hi Andrew:

    That is one of the hazards of Joomla. Once I have the site fully developped, I will use a minimizer to compress and combine the css and js into a more efficient construct.

    Having said that, I don't think it is an image, but more a hex value. However, I have absolutely no idea where to find it. Firebug isn't much help there either, at least for me. If you have a way to help me identify the pesky culprit, I would very much appreciate it.

    Thanks.

    Originally Posted by AndrewSW
    Your page links to about 20 different style sheets and 12 or more JavaScript sources. Quite amazing for such a sparse page!

    That faint background when you hover a main menu link could be either a colour or, more likely, an image. I suspect it is a very thin .png image that is repeated horizontally as a background image.

    You could search your images folder(s) to see if you can spot the image - a bit tricky when it is a thin line - and replace that image with one with the same name (and extension).

    Or install a colour-picker tool that would allow you to point at the background and it would tell you the hex value for that colour. Then search your css files for that number.

    Or search for a css rule that applies to the 'over' class - which is added when you hover over the menu.
  10. #6
  11. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    Or install a colour-picker tool that would allow you to point at the background and it would tell you the hex value for that colour. Then search your css files for that number.

    Or search for a css rule that applies to the 'over' class - which is added when you hover over the menu.
    Andy.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    9
    Hi Andy:

    I have used a colour picker tool. The colour is #90829e. However I cannot find that anywhere. Likewise, there is no "over" reference in any CSS file, but tons and tons of "hover" references.

    Any other advice?

IMN logo majestic logo threadwatch logo seochat tools logo