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

Thread: [Help] Css

  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [Help] Css

    Hello, i'm new on codig with html/css and i need a little help.

    I want to know how can i do this image, It's a white/grey image check:



    This is the site where i saw it: www.cloudflare.com if you click on menu the image will appear.

    Thanks if someone will help me,

    Cheers

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    I'd go over to http://www.dynamicdrive.com , if you have a little look around there, you will find something very similar to this.

    Regards,

    LC.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You can add background-image property on hover state of navigation, following is sample

    Code:
    #navi ul li a:hover {
    background:url(images/bg_img.png) center no-repeat;
    }

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    You can add background-image property on hover state of navigation, following is sample

    Code:
    #navi ul li a:hover {
    background:url(images/bg_img.png) center no-repeat;
    }
    Yes thanks, but the problem is that this is a fixed image no? I think that the image must change in base at the number of the chars of the menu. "Help" "Registration" etc...

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    use only 1 in which lengthiest text can fit

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    I saw a very similar example over on DynamicDrive the only difference was that rather than the 'border' changing on click, it changed on hover. If you take the time to look for the effect all you would need to do is change the code slightly for your needs.

    Regards,

    LC.

  • #7
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post
    http://www.alistapart.com/articles/slidingdoors/

    This will also apply to your menu.

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I like using sprite images for image-based menu changes.

    You load one image and to use as a background image for all menu items, but it is a grid-oriented composite of each individual image you would have otherwise needed. Then you just use different background-position settings for each item and then on :hover you change the background-position again to show the "hovered" state of that same single image file.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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