SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: List Background

  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    List Background

    Looking through Art and Science of CSS, and trying to follow along with example in the "Navigation" chapter.
    Their example appears to have a brown background (box) but mine does not. Here is what I have


    html>
    <title>DIVISION EXPERIEMENT</title>
    <head>




    <style type="text/css">







    html {
    font: small/1.4 "Lucida Grande" Tahoma, sans-serif;
    }

    body {
    font size: 92%;
    }

    #nav {
    margin: 0;
    padding: 0;
    backgound: #6F6146;
    list-style-type: none;
    width: 180px;

    }

    #nav li {
    margin: 0;
    padding: 0;
    }

    #nav a {
    display: block;
    color: red;
    text-decoration: none;
    padding: 0 15px;
    line-height: 2.5;
    border-bottom: 1px solid #000;
    }


    #nav #nav_con a [
    border: none;
    }
    #nav a: hover {
    background: #4F4532;
    }







    </style>

    </head>

    <body>

    <ul id="nav">
    <li id="nav_hom"><a href="/">Home</a></li>
    <li id="nav_map"><a href="/">Maps</a></li>
    <li id="nav_jou"><a href="/">Journals</a></li>
    <li id="nav_his"><a href="/">History</a></li>
    <li id="nav_ref"><a href="/">References</a></li>
    <li id="nav_con"><a href="/">Contact</a></li>
    </ul>





    </body>
    </html>

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,220
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    In the code you've given above, you're missing the "r" of background here:
    Code:
    #nav {
    margin: 0;
    padding: 0;
    backgound: #6F6146;
    list-style-type: none;
    width: 180px;
    
    }

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you. That was really stupid on my part....

  4. #4
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's actually a common stupidity, happens all the time and it's always the small stuff people overlook.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    In this case I would think about running code through a validator to aviod situations like these

    jigsaw.w3.org/css-validator
    validator.w3.org

    Validating is the first step to debugging!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Easy Fix there. Smiley Face.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What was the issue?

    Glad you got it fixed .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •