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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image and Text Dual Navbar

    Hey guys! I'm a HTML and CSS newbie and figured that joining this site would be the logical thing to do if I run into a un-google'able predicament!

    Anywho, I designed a navbar in Photoshop, it is 960 pixels in length and 45 pixels in height (excluding the border).



    The idea was to hover over each individual button and have the text AND the gif change to their opposite colors.

    Not only did that prove too difficult for me, I couldn't even get the base design set up. I can't even set up the images and links in their proper location!

    I'm rolling the dice here and hoping someone would recreate or atleast give me an overview of how I'm supposed to do this.

    I'd be extremely grateful for any help provided. Kudos.

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Post your code or a link to the page please.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, it's not like my code is of any worth. It doesn't even remotely look like what I wanted or work even. I'd rather someone shows me the proper way to do it, from scratch.

  • #4
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    I'd rather someone shows me the proper way to do it, from scratch.
    Of course you would. Anytime you can get someone else to do your work for you it is great. However that is generally not how these kind of sites work.

    I will advise, consult, mentor, guide, and do what I can to help you learn how to do what you need, but I am not going to do it for you, because you will learn nothing and the simple code required has very little intrinsic value.

    The only way the thread has value is if you get your hands dirty with a little code and learn from the experience.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    What you want to do is sprite all of the icons in to one large png file i.e http://s.ytimg.com/yts/imgbin/www-hi...-vflmnaCdT.png

    Then edit the icons for a color change icon and do the same.

    Then for each menu li you will assign a class i.e

    Code:
    <li class="home"><a href="home">Home</a></li>
    Now using the image file you have added all the icons to..

    CSS:

    Code:
    .home {
    background: no-repeat url(//imagelocation) -90px -108px; /* these will hide the other icons */
    width: 16px;
    height: 16px;
    Understand what I mean?

  • #6
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understood that! Thanks! Ill go give it a shot and post my code. Because I will have undoubtedly made another mistake.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Dirty Dan,
    I'm not sure what your reason for text is, it's not like those menu items will need to change. I would make the menu buttons icon and word both an image.

    I have a demo of a sprite menu like this. It's a three state menu so there is a third part of the image that is used to show what page you're on. Maybe more complicated than what you're looking for...

    This is the image it uses -


    See the demo here. Click on the Markup and CSS links to see how it's done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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