SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to make a nav with images and css

    I want to have a horizontal nav that consists of 5 buttons. I have images that I would like to use for the buttons. Can I do this via a style sheet and still have rollovers? I am not sure how to go about doing this.

    Also I am having problems lining up 5 images in a horizontal line with each image next to one another. I want to do this in Divs not using a table with 5 cols(which would be easy).

    Any info greatly recieved.

    Thanks
    ****************
    The Webmistress

  2. #2
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You may want to have a quick look through this thread.
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  3. #3
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would this work for you?

    Code:
    /* CSS */
    ul#nav{
    
      list-style-type:none;
      margin: 0; padding: 0;
     
     }
    
    ul#nav li a{
    
      margin: 0; padding: 0;
      display: inline;
      float: left;
    
    }
    HTML Code:
    <!-- Obviously you would change the images -->
    <ul id="nav">
      <li><a href="foo.html"><img src="foo.jpg" /></a></li>
      <li><a href="foo.html"><img src="foo.jpg" /></a></li>
      <li><a href="foo.html"><img src="foo.jpg" /></a></li>
      <li><a href="foo.html"><img src="foo.jpg" /></a></li>
      <li><a href="foo.html"><img src="foo.jpg" /></a></li>
      <li><a href="foo.html"><img src="foo.jpg" /></a></li>
    </ul>
    I have no idea what that looks like for your image but it should help you get started.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here's another example to play with that allows for a different image to be used for each item.

    http://www.pmob.co.uk/temp/cssrollover-horizontal.htm

    Paul

  5. #5
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I will have a look through these and get back to you.
    ****************
    The Webmistress

  6. #6
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the code above but It didnt layout right...
    I tried this link http://www.redmelon.net/tstme/roll/ and it is ace. although it doesnt work on a mac in internet explorer.

    hmm must go play some more...


    thanks ppl.
    ****************
    The Webmistress

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by webmistress
    I tried the code above but It didnt layout right...
    I'm not sure what you mean as the example link I gve you was to show the technique which can be used in any layout and any form you like

    Dougs techniques and mine are similar and I would have thought Dougs could be made to work in iemac although I haven't had time to test. Mine works fine in ie mac so Im sure dougs could be made to work (if it doesn't already). I've been out all day so I haven't got time to test right now bit if you want me to look again then let me know

    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
  •