SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS Nav Bars

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Middlesbrough, UK
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Nav Bars

    How can I create a vertical CSS nav bar, using images with a slight gap in between as the links? Do I need a new element for each button?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Have a look here for some examples that should start you in the right direction.

    http://css.maxdesign.com.au/listamatic/

    Paul

  3. #3
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    you could also have a look at this example from simple bits

    http://www.simplebits.com/bits/css_tabs.html

    /Ox
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Middlesbrough, UK
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help.

    None of those examples use images as the actual buttons however, which is what I need. Would it be acceptable to use tables in this instance given that it appears more flexible than CSS, or should I be aiming to steer completely clear of tables in terms of layout?

    Cheers.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is no difference from using images as you just set the images in the background (preferably). All the rest of the coding still applies.

    The simplest way is to use a list structure and lod the rollover state into the background of the list and then load the normal image in the background of the anchor. You just then set the anchor to transparent on rollover.

    If you have a different image for each item then you need to set up a different class for each so that you tag the image to it.

    If you copy any of those vertical lists from the link above and then you will have something to work with.

    Here is a more advanced example that avoids any flicker and preloads the images by loading them on top of each other.(Although it has the drawback of having an image in the html - it only uses the same image for rollover but could be amended by adding extra classes etc).

    http://www.pmob.co.uk/temp/cssrollover4.htm

    Paul


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
  •