SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create a menu with gradient

    I want to create a menu using this picture: http://img10.imageshack.us/img10/3116/menueaw.jpg

    I don't really know how to slice the picture. The menu in the picture have a gradient, and this is the real problem for me.

    I have this HTML code for the menu:

    Code HTML4Strict:
    <div id="menu">
      <h2>Header</h2>
      <div class="content">
        <ul>
          <li>Menu item 1</li>
          <li>Menu item 2</li>
          <li>Menu item 3</li>
          <li>Menu item 4</li>
        </ul>
      </div>
    </div>

    And this is the CSS:

    Code HTML4Strict:
    /* =Menu
    --------------------------------------------------------------------- */
    #menu h2 {
        background: url("top.jpg") no-repeat;
        height: 74px;
     }
     
    #menu .content {
        background: url("center.jpg") repeat-y;
     }

    I don't know how to apply the gradient to bottom. Someone help me with an example or know an example website for me with a similar menu ?

    Thanks!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are the top.jpg and center.jpg graphics you have so far?

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can have an element at the very bottom of the #menu div which is cleraed. Make it 100&#37; width and apply the background image to that (make sure it has the dimensions to show the entire image).
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •