SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast sinco's Avatar
    Join Date
    Jul 2001
    Location
    Pittsburgh, PA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Maps and Graphic Rollover For Header

    I'm still learning CSS, so I don't know how to do some things. I've created a site layout that I like. The only problem is the header. I would like to have image rollovers for the menu somehow. I'm not used to doing this in CSS. Could you please look at my code and help me by instructing me how to code it? Thanks!

    Here is my current proposed site:

    http://www.hosterie.net/newsite2/

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No need to bother yourself with image maps or anything like that.

    Create the navigation using an unordered list tag, like so:
    Code:
    <ul>
    <li><a href="hosting.html">hosting</a></li>
    <li><a href="design.html">design</a></li>
    <li><a href="portfolio.html">portfolio</a></li>
    <li><a href="support.html">support</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
    Then style the list to make it all line up horizontally and use image-replacement to make graphical items instead of the plain text.

    I'm not going to give you all the code - you'll learn better if you write the code yourself instead of copying+pasting it. But here are some handy links:

    http://www.juicystudio.com/tutorial/css/menu.asp
    http://css.maxdesign.com.au/listamatic/
    http://www.mezzoblue.com/tests/revis...e-replacement/


  3. #3
    SitePoint Enthusiast sinco's Avatar
    Join Date
    Jul 2001
    Location
    Pittsburgh, PA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links! I was wondering how am I going to include my header image and then right under that include my five image links with the graphic CSS rollovers?

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not that this is the only way, but I would do it by creating the header graphic and setting it as the background-image for the header div:
    Code:
    <div id="header"></div>
    
    ...
    
    #header {
    background: #fff url(header.gif) no-repeat left top;
    }
    (noting that the reference to the image file should take into account where the CSS file is located)

    Then put your navigation after that header div:
    Code:
    <ul id="navigation">
    <li><a href="hosting.html">hosting</a></li>
    <li><a href="design.html">design</a></li>
    <li><a href="portfolio.html">portfolio</a></li>
    <li><a href="support.html">support</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
    and style accordingly. Remember to zero your margins and padding to avoid confusing cross-browser differences.


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
  •