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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Location
    France
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    List icon problem

    I'm new with all that HTML and CSS and I need a little help.

    I tried to add an image as a list item marker but it didn't work and I'm not really sure actually where do i have to put it in. Could someone please help me out here?

    HTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
        <title>Website test</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection">
    </head>
    <body bgcolor="black">
    <div align=top right>
    
            <ul id="nav">
                <li><a href="#" title="Go to the front page">Home</a></li>
                <li><a href="#" title="Retrieve support from staff">Support</a></li>
                <li><a href="#" title="Send an email to us">Contact</a></li>
                <li><a href="#" title="View company info">About</a></li>
            </ul>
    </div>
    
    </body>
    </html>
    CSS

    Code:
    #nav {
            list-style-type: none;
            width: 200px;
            background: #141414;
            float: right;
            border-style:solid;
            border-width:1px;
            border-color:white;
            }
            
    #nav li {
            display: inline;
            }
            
    #nav a {
            display: block;
            height: 23px;
            padding: 9px 0 0 9px;
            font-size: 13px;
            text-decoration: none;
            color: #FFF;
            border-bottom: 1px solid #090909;
            border-left: 1px solid #090909;
            }
            
    #nav a:hover {
            background: #242424;
            border-style:solid;
            border-width:1px;
            border-color:white;
            }
    Last edited by Banana; 10-31-2009 at 09:34 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Banana,
    Have a look at an example page of mine - http://nopeople.com/CSS/li_image/index.html
    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

  • Users who have thanked Excavator for this post:

    Banana (10-31-2009)

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Location
    France
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you! I think i figured it out


  •  

    Posting Permissions

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