#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    1
    Rep Power
    0

    Lightbulb CSS Newbie - Help with navigation bar.


    Hello, I want to make an Image based navigation bar using CSS, but I just cant seem to get it working. No Images are showing.

    I would ultimately like to show 3 images per button:
    -Unhovered (can't get to work)
    -Hovered (haven't attempted yet)
    -Clicked (a different image for when a user in holding down the button. I haven't even attempted this one.

    I have a very basic skill level using CSS and HTML so any help would be appreciated, thanks.


    HTML:

    <body>
    <ul id="navigation">
    <li id="1home"><a href="#"></a></li>
    <li id="2info"><a href="#"></a></li>
    <li id="3shop"><a href="#"></a></li>
    <li id="4cont"><a href="#"></a></li>
    </ul>



    CSS:

    body {
    background-color: #878485;
    font-family: Verdana, Arial, sans-serif;
    font-size: small;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0%;
    margin-bottom: 0%;
    width: 800px;
    }
    #navigation {
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    text-align: center;
    list-style: none;
    width: 400px;
    height: 100px;
    float: top;

    }
    #navigation li {
    display: inline-block;
    width: 400px;
    height: 100px;
    }
    #navigation a {
    display: inline-block;
    width: 400px;
    height: 100px;
    }

    /* NAV BAR */

    #1home
    { background-image: url('file:///C:/Users/User/Desktop/Website/images/nav/home.png'); no-repeat; width: 100px; height: 100px;}
    #2info
    { background-image: url('file:///C:/Users/User/Desktop/Website/images/nav/info.png'); no-repeat; width: 100px; height: 100px;}
    #3shop
    { background-image: url('file:///C:/Users/User/Desktop/Website/images/nav/shop.png'); no-repeat; width: 100px; height: 100px;}
    #4cont
    { background-image: url('file:///C:/Users/User/Desktop/Website/images/nav/cont.png'); no-repeat; width: 100px; height: 100px;}

    I know I haven't put any hyperlinks in yet, I just want the navigation bar to work first.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    95
    Rep Power
    11
    ID's cannot start with numbers

    if you change:
    1home
    2info
    3shop
    4cont

    To:
    home1
    info2
    shop3
    cont4

    In both your CSS and your main UL LI then you should not have a problem.

    You may want to drop the numbers altogether and just have the labels, that way should you wish to swap the order or insert a new item at a later date the numbering won't matter as it has gone.

IMN logo majestic logo threadwatch logo seochat tools logo