Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question Trouble with menu CSS

    Hi there,

    This is my first post here.

    I'm having difficulty modifying some code for a template I'd purchased. It's a template designed specifically for a Joomla site, but for the next few weeks it's going to basically be a single-page, html/css/js set of pages (long story short, the original Joomla installation is several years old and will require a lot of upgrading to the added modules in addition to the core site itself, so it was decided to just get SOMEthing nice looking up in the meantime.

    Here's the test page: http://www.YourBusyBee.com/fb/

    Ok, so I'm working in Dreamweaver CS5 for this stuff. In Live View, my parent menu items are not showing up correctly - the text appears white on the hover. But after I uploaded to my testing page, that first level menu appears correctly. However, the sub-level is still showing up wrong in BOTH Dreamweaver Live View AND in FF (I haven't checked IE yet) - upon hover of the "About" menu item, the sub menu items *should* show up below in the color black. The hover styling shows up correctly though - a red background with white text.

    I have gone over and over the CSS for this portion of the page, and just can't for the LIFE of me figure out what's wrong with it.

    As a lesser issue, I would prefer for the white boxes behind the sub-menu items to appear at 50% transparency. I *think* this would need to be done in the js, but I'm not familiar enough with that to know how to solve it.

    Can anyone assist me with this? I suspect it's a pretty quick fix.

    Thanks in advance.

    All the best,
    ~Laura

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you never specified a background-color:



    * try adding:
    Code:
    #header .main_menu ul.menu ul li a {
    display: block;
    background: none;
    padding: 0 0 0 20px;
    font-weight: normal;
    line-height: 26px;
    text-align: left;
    font-size: 16px;
    width: 156px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #fff; <------------------ white
    background-color: #000;
    or
    color: #000
    }
    * for a transparency: http://css-tricks.com/2151-rgba-browser-support/

    Code:
    background: rgb(180, 180, 180); /* fallback */
    background: rgba(180, 180, 180, .5);
    
    /* fallback ie - converted rgb to hex */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b4b4b4,endColorstr=#b4b4b4);
    rgba is not cross browser supported, but if you wanted a background transparency that is, you would use opacity, however this is a lot more complicated

    * for dreamweaver, try posting in the dreamweaver forum along with some pictures of the problem. I don't use dreamweaver, I use notepad
    Last edited by Sammy12; 11-07-2011 at 12:41 AM.

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    ahhhhhhh! THANK you! I must've been looking at the code for too long and just totally missed it. Thank you Thank you Thank you!

    Only thing is, the transparency code did not work. I'm still suspicious that it's something within the js on the index page. I shall keep trying though.

    One additional question: I tried to create a 2nd version of the Readon class in order to create a smaller button in the "Featured Author" box, but it had come out very very odd. Is there anything I should be doing differently with that code? I believe it's still in the layout.css file, called Readon2, I just haven't used it on the index page now.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    * PROBLEM 1: transparency code not working



    Code:
    rgba(255, 255...
    ^ no space

    --------------

    * PROBLEM 2: Button malfunction



    you want it pushed down?

    --------------

    Quote Originally Posted by operapixie View Post
    Only thing is, the transparency code did not work. *I'm still suspicious that it's something within the js on the index page.
    I did not check but im 99% its not in the js

    Q: did you want the text or the background 50% transparent?.
    Last edited by Sammy12; 11-07-2011 at 12:55 AM.

  • #5
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Many thanks, Sammy! I don't think it's really a Dreamweaver issue. But since the CSS changes haven't done anything to the background transparency, I'm still thinking it's a javascript issue. I'm assuming there's a forum category for that here too though, so I shall just head on over there for that issue.

    THANKS AGAIN! You rock!

    ~Laura

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    it's not a js issue... js is for effects, css is for style (background color is a style)

    1. add the transparency background code to replace the background: #fff on line 123 in layout.css





    2. remove background-color: #fff at the bottom of line 201 in layout.css




    END RESULT:


    the drop down needs to be slightly lower:


    change top: 26; to top: 28;

    ---------------

    if you want to decrease the transparency amount, just change the .5 at the end of background: rgba(180, 180, 180, .5); to .8 or so
    Last edited by Sammy12; 11-07-2011 at 01:08 AM.

  • #7
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Ah, ok. For some reason I wasn't able to get the transparency to work the way I was imagining it that way, so I replaced it with some opacity code. I will, however, keep playing with it since you mentioned difficulties with this way of doing it.

    In the meantime, regarding the button issue:

    I really just want the button itself it be smaller in height, and the font proportionately smaller as well. Basically, the white box behind this section should have the same amount of space to the top of the picture as from the bottom of the picture, and right now there's too much space below. If that means it needs to be set more to the right as well, so be it. But I would prefer for it to be left aligned under the text, next to the image.

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    go ahead and post the full html script for the page and the css files, if it exceeds the codingforums character limit (is there even one?), put it on mediafire. I find step by step instructions to be strenuous, I can just fix the mistakes myself with the script


  •  

    Posting Permissions

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