Grow your CSS skills. Land your dream job.

Garage Door Menu

  • # March 23, 2009 at 12:34 am

    I can see that the CSS and images would have to be resized to make the garage door menu smaller as I would like to put in my WordPress Blog. Will any of the JS files need changing?

    Thanks

    Jim

    Rob
    # March 23, 2009 at 6:38 am

    it should work dude, there are no sizes set in the JS just positioning. :)

    # March 23, 2009 at 7:49 am

    Thanks, I finally got it to downsize. Your pixels just have to be pretty darn exact. It should go in WordPress nicely hoping no conflicts between J-query and other scripts.

    Jim

    # March 23, 2009 at 1:30 pm

    Sure could use some help here. Trying to add ‘garage door’ menu to WordPress theme. Here is what I did

    1. Added images to image folder
    2. Added CSS to my ‘style.css file’
    3. copied .js files to root folder, not in js folder though.
    4. Modified header.php file

    If someone has time just email me please

    Thanks

    Jim

    wpobsessions@gmail.com

    # March 23, 2009 at 2:15 pm

    What’s the problem?

    Rob
    # March 23, 2009 at 2:17 pm

    could you give us a live link?

    # March 25, 2009 at 1:57 am

    Thanks All. I got it in my Site ans assigned a link to the ‘Contact Door’. But when you click it something weird happens. You will see it and hopefully have some advise. Just added same link to the HTML file that is in the download from CSS Tricks. And when I click it there is no duplication of the menu like online.

    FYI – I took off the (overflow: auto) in the CSS ul#menuback. The menu does not duplicate and link works, but when clicked I get 2 lines on the left of the menu, the same height as the menu.

    http://blackhat-photography.com/wordpress/

    Thanks

    Jim

    # March 25, 2009 at 6:51 am

    The only thing that I can see is wrong is margin: 0 auto. That is to center it inside a div but you have floated it right.
    Perhaps that is confusing the issue?

    EDIT:
    It just occurred to me that where you call the slider function in the page head you might want to replace every instance of $ with "jQuery"

    # March 25, 2009 at 2:08 pm

    Thanks Apostrophe,

    You are always willing to help. I will look into that for sure. Not sure if it is right but I changed the overflow to HIDDEN and now it works fine, but that may just be a bandaid so I will look at the DIV you mentioned

    Jim

    # March 27, 2009 at 7:28 pm

    I am now at the last stage of this. All is in and working great, but to further my learning I want to make a sprite from all the images that make up the menu. Just use one image. I have not been able to find help on this. I fully understand the propcess but am hung up at one point.

    This line of code is for images in the CSS

    Code:
    background: url(images/shutter-arcticzone.jpg) no-repeat;

    and

    This is code for my Sprite for the background image

    Code:
    .sprite-shutter-arcticzone { background-position: 0 -167px; }

    How is the new sprite code merged into the URL code???? and

    This is the script for the whole sprite image. Where do we put it?????

    thats it, hope someone has been gurued with this

    Thanks so much

    JIM

    Rob
    # March 28, 2009 at 4:13 am

    How do you mean merged into?

    Your CSS Styles your HTML, so personally I would style my a tags to be blocks with the correct width and height and the correct background image at the right position – then I would use the a:hover class to change the background position on the correct elements…

    So – yea – how do you mean merged? lol

    # March 29, 2009 at 10:25 pm

    Robski, it was a laymens term. Here is what I was thinking but i can not get it to work

    Code:
    background: url(images/mysprite.png) 0 -99px;

    Jim

    Rob
    # March 30, 2009 at 4:25 am

    Ok – still not too clear on what exactly you are trying to do other than use sprites lol, a little more description or code would be useful – a live link would be awesome.

    what dosnt work about it? what tag/class/id are you styling with it?

    what I would recomend, because I dont really have anymore info, have a look at this video:

    http://www.from-the-couch.com/post.cfm/ … ss-sprites

    There is also on on CSS Tricks

    http://css-tricks.com/css-sprites-what- … -use-them/

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".