Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question css menu that has different images

    hello. i am trying to make an horizontal css menu that has 5 intems, and each item has to have a specific image. but all that i have done so har is managed to put an image...that is shown on all of them.
    do you have any idea how to do this?
    // html code
    <div id="navcontainer">
    <ul>
    <li><a href="#" >item 1</a></li>
    <li><a href="#" >item2</a></li>
    <li><a href="#" >item3</a></li>
    <li><a href="#">item4</a></li>
    <li><a href="#" >item5</a></li>
    </ul>
    </div>
    //...

    //css code
    #navcontainer { margin-left: 0px; }

    #navcontainer ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: verdana, arial, Helvetica, sans-serif;
    }

    #navcontainer li {
    margin: 0;
    background-repeat: no-repeat;
    }

    #navcontainer a
    {
    display: block;
    padding: 1px 0px;
    width: 180px;
    height:40px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    font-weight: normal;
    font-size: 13px;
    background-image: url(images/vertical2.jpg) ;
    background-repeat: no-repeat;
    background-position: 0 0;
    }

    #navcontainer a:hover
    {
    color: #000;
    background-color: #00CCFF;
    text-decoration: none;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    background-image: url(images/vertical1.jpg);
    background-repeat: no-repeat;
    background-position: right;
    }
    //.....

    thank you!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you need to add a class or an ID to the links and then style them independently.

    Code:
    #navcontainer a
    {
    display: block;
    padding: 1px 0px;
    width: 180px;
    height:40px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    font-weight: normal;
    font-size: 13px;
    background-repeat: no-repeat;
    background-position: top left;
    }
    
    #navcontainer a:hover
    {
    color: #000;
    background-color: #00CCFF;
    text-decoration: none;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    background-repeat: no-repeat;
    background-position: top right;
    }
    
    .link1 {
    background-image: url(images/vertical1.jpg) ;
    }
    .link2 {
    background-image: url(images/vertical2.jpg) ;
    }
    .link3 {
    background-image: url(images/vertical3.jpg) ;
    }
    Code:
    <div id="navcontainer">
    <ul>
    <li><a href="#" class="link1">item 1</a></li>
    <li><a href="#" class="link2">item2</a></li>
    <li><a href="#" class="link3">item3</a></li>
    </ul>
    </div>
    the paositioning and hover effects are controlled by the link style. the lcasses allow you to give each one a different style, in this case a different background image.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mucea,
    I've put up an example here if you want to have a look.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Content, presentation

    That is not what was suggested above; since the images in this case should be considered presentational in nature, including them as content in the document is not the preferred method. It is more appropriate to use CSS background images as HarbingerOTV suggested, which would also make the use of ordinary link text instead of images for text possible.

    mucea,

    alternatively, you could move the classes/ids up a level to the li elements so you have specific control over each of their properties as well; you'll have to decide whether this is needed.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •