SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Need Code

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Code

    I just bought the book THE CSS ANTHOLOGY and in the book there is a program call listnav_button.html. I need the code to center the haoizontal buttons and have dropdown menus for the button. Can anybody help me.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to post the code you are using or give us a link to the problem as not everybody here has that book at hand and chances are that you have changed the code from the book anyway

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Code

    Here is the code that is in the book

    listnav_button.css
    #navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 4px;
    }
    #navigation li {
    display: inline;
    }
    #navigation a:link, #navigation a:visited {
    margin-right: 2px;
    padding: 3px 10px 2px 10px;
    color: #A62020;
    background-color: #FCE6EA;
    text-decoration: none;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #717171;
    border-right: 1px solid #717171;
    }
    #navigation a:hover {
    border-top: 1px solid #717171;
    border-left: 1px solid #717171;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    }

    listnav_button.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Lists as navigation</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="listnav_button.css" />
    </head>
    <body id="contact">
    <div id="navigation">
    <ul>
    <li class="recipes"><a href="#">Recipes</a></li>
    <li class="contact"><a href="#">Contact Us</a></li>
    <li class="articles"><a href="#">Articles</a></li>
    <li class="buy"><a href="#">Buy Online</a></li>
    </ul>
    </div>
    </body>
    </html>

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi, the centering part is easy:
    Code:
    #navigation ul {
      list-style: none;
      margin: 0;
      padding: 0;
      padding-top: 4px;
      text-align: center;
    }
    However dropdown menus come in many shapes and sizes, have a look at the drop down low down and choose one that fits your requirements.


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
  •