SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    looking for a good navigation bar for a website

    Hey guys,
    First let me say that my luck is amazing, its not enough that im not good at all with programs like photoshop and such, even guides hate me!
    I've been surfing through a list of about 150 navigation bar examples, i choosen one, and what i found out, the guide doesnt work!
    when i checked all the rest everything worked, but excactly what i wanted doesnt......

    So now i want to ask here, if anyone knows where i can find a guide to do such a thing or can kindly do it for me, i'd be thankful
    image added.

    I probably need only 1 of the buttons without the text.

    green-button-photoshop-navigation-tutorial.jpg

    Thanks,
    Ulthane

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    another navbar which i liked but guide didnt work, amazing..

    181.jpg

    I'm still locked on that green one though......... someone help :P

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Sadly, your images are still pending approval so we can't offer as much analysis as we'd like.

    If, by 'guide' you mean a tutorial? then we can tell you how to do it or just give you the code. I'm all for telling you how to do it with annotated code snippets (a tutorial) as it'll be easier for you to learn.

    Once your images show up, we'll be able to help you better.

    Good luck.
    ~TehYoyo

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hey tehyoyo, thanks for the note ill wait for them to be approved
    and yes when i said guide i made tutorial, when you will be able to see the image i would like some help achieving one of the buttons from the green menu

  5. #5
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    The images have been approved.
    What were the guides/tutorials you were following?
    Where did you get stuck?
    In what way didn't they 'work'?

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i just searched on google on a list of more than 200 navbars and buttons, didnt find anything similar, and without a guide i cannot do it on my own

    By not working i mean that the guide did not exist
    for example from here:
    http://www.1stwebdesigner.com/tutori...enu-tutorials/

    Go to the 5th navbar which i what i wanted, link doesnt work.

  7. #7
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Alright. I can see it.

    Those are quite beautiful navigation bars.

    The way to achieve such an effect is through a background-image. You may be able to achieve such an effect via pure CSS3, but that'd be very difficult and isn't something that I think you want.

    Tutorial:

    This effect has been achieved with a background-image. It was most likely done in a program like Photoshop or GIMP. I won't go through exactly how to achieve this, as it's equally if not more complicated than this tutorial. If you want help, post a new thread or ask in here.

    Step 1 - Basic HTML layout

    The basics of the HTML layout will be an unordered list. This is how most navigation bars are done, so you should become acquainted with them.

    You'll want something like this (assuming you've finished all of the <head> stuff, etc):

    Code:
    <ul>
    <li>TehYoyo</li>
    <li>Ulthane</li>
    <li>SitePoint</li>
    <li>Forums</li>
    </ul>
    That's all! Now for the CSS:

    Code:
    li
    {
     display:inline-block;
     font-size:16px;
     margin-left:0;
     text-align:center;
     color:#FFFFFF;
     border:1px solid #00FF00;
     padding-top:10px;
     padding-bottom:10px;
     font-family:Arial, sans-serif;
     height:36px;
     width:80px;
     background-image:url('yourbackground.jpg');
    }
    And that's it. Substitute the values that you want. Substitute yourbackground.jpg with the background image of your choice.

    I don't know how much of a tutorial that was so much as an explanation of what to do. Post if you have questions about certain things I did.

    There is one problem that I, myself, would like the answer to. I can't figure out a way to stop there being space between the different list items. How do I fix that?

    Thanks.
    ~TehYoyo
    Last edited by TehYoyo; Mar 1, 2012 at 17:36. Reason: I just realized that we were in the graphics part...and edited my post accordingly.

  8. #8
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ulthane View Post
    i just searched on google on a list of more than 200 navbars and buttons, didnt find anything similar, and without a guide i cannot do it on my own

    By not working i mean that the guide did not exist
    for example from here:
    http://www.1stwebdesigner.com/tutori...enu-tutorials/

    Go to the 5th navbar which i what i wanted, link doesnt work.
    Ah I see what you mean about broken links. Unfortunately that's often a problem with collection posts like "50 top this" or "20 top that" - the page is still alive but sometimes the link they refer to aren't.

    I was able to retrieve some of the tutorial you were looking for from the wayback web machine - take a look here: Green Navigation
    However, some of the images are missing, but the words are still there. See how you go. If you get stuck at all, post in here at where you're stuck and we can try to help you out.
    Later tonight I will try this for myself at home and see if I can instruct you further.

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Tehyoyo i know how to do the html+css i need the image itself

    bo5ton your link doesnt work for me

  10. #10
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    nvm it loaded now, thanks, going to try it

    Going to need some help with the inner glow at step 4 where the image is missing...

  11. #11
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ulthane View Post
    nvm it loaded now, thanks, going to try it

    Going to need some help with the inner glow at step 4 where the image is missing...
    Sure. I'll do this using Photoshop CS5, as that's what I have.

    Select the layer that you want to add an inner glow to (if you don't know how to do that, it should be in the bottom right of the screen. Look for rectangles or a single rectangle stacked on top of each other or just Google 'layers panel Photoshop'.)

    After that, you'll want to double click the gray area to the right of it (Not the name or the thumbnail). You'll get the blending options screen. Alternatively, you can right-click the layer (control+click on the mac) and select blending options.

    Look on the left side where all the checkboxes are. There should be an inner glow there. You'll need to check the box and click 'inner glow' text.


    If you want the image, I can make it for you if you want.
    ~TehYoyo

  12. #12
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hey tehyoyo i appreciate your help but i know all the basics I dont know which properties he used inside the inner glow option to achieve that glow effect on the button because the image is missing.

  13. #13
    SitePoint Wizard silver trophybronze trophy mizwizzy's Avatar
    Join Date
    Apr 2006
    Location
    Ireland
    Posts
    1,322
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if it's the same designer or not, there is a cc license attached with this but if I'm not mistaken it's remarkably similiar! I've just had a look at the PSD and it has your glow affect & image that you're after too, hope this helps you out!

    http://thetmyster.deviantart.com/art...-PSD-127509699

  14. #14
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    wow amazing! thanks!

  15. #15
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    The only thing that differs is the font.

    Both are sans-serif but the original is more upright/straight.

    My guess is the deviant art guy just used the tutorial?

    ~TehYoyo

  16. #16
    SitePoint Wizard silver trophybronze trophy mizwizzy's Avatar
    Join Date
    Apr 2006
    Location
    Ireland
    Posts
    1,322
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @Yoyo - I've no idea, maybe it's his own work or the same person? The only way to find out for sure is to contact him, but it seems perhaps ultane is sorted now?

  17. #17
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes im fine now, i dont need the font thought so its not a problem, i only needed the button which is excactly the same as in the guide i was looking for.

  18. #18
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Although be very careful of plagiarism...I don't know if either author claims any rights to the images, but I'd check and make sure.

    ~TehYoyo


Bookmarks

Posting Permissions

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