How Can I Create A Simple Links Bar?

Discussion in 'CSS' started by garrettaren, Nov 27, 2007.

  1. #1
    I am a newbie CSS'er but I feel like I have got a fairly good grasp on it.

    I've got photoshop and am able to create a 780px-100px bar very easily.

    I've also got Dreamweaver to build my site...hehe I have all the tools now.

    After I insert my links graphic in to Photoshop, how do I place links on top of the images?

    Would I use some sort of absolute positioning using CSS? (Like x px from the top and x px from the left?)
     
    garrettaren, Nov 27, 2007 IP
  2. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    if you are using images in the bar to define a link, make them links directly (you can't define links in css). If you're using the images as backgrounds you're doing it wrong. No link can be defined in CSS. I could give you better advice if I could see the page itself.
     
    Crimsonc, Nov 27, 2007 IP
  3. Lpdesigner

    Lpdesigner Peon

    Messages:
    86
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hmm.. from what I understand, I think you would need to slice up the images in Photoshop first - from there you would add the images to Dreamweaver to make your nav bar.
     
    Lpdesigner, Nov 27, 2007 IP
  4. garrettaren

    garrettaren Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks for the responses.

    Take www.sitepoint.com for example.

    Is the links bar multiple single images (with a link inside the image) placed next to each other?
     
    garrettaren, Nov 27, 2007 IP
  5. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #5
    No its not that site is done by making a list with the list items being links, so the links are real text, just with a background inplace behind the list.

    Done the same way the nav is done in the contract hire website I work on.
     
    johneva, Nov 28, 2007 IP
  6. Lpdesigner

    Lpdesigner Peon

    Messages:
    86
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    It's basically a list like this (see the tutorial) except with a background image:
    css.maxdesign.com.au/listutorial/horizontal_master.htm
     
    Lpdesigner, Nov 28, 2007 IP
  7. garrettaren

    garrettaren Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Awesome. Just what I needed
     
    garrettaren, Nov 28, 2007 IP