SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Converting menu list to css

    I did a menu some time ago using tables, spacers etc and I now want to replicate using css. Here's the code for the original table
    Code:
    <table summary="Main navigation links" width="180" border="0" cellspacing="0" cellpadding="0" align="right">
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/index.asp" class="menu"><strong>Home</strong></a></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td>
    </tr> 
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/aims.asp" class="menu"><strong>Aims & Objectives</strong></a></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td>
    </tr> 
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/areas.asp" class="menu"><strong>Areas of Responsibility</strong></a></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td> 
    </tr>
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/govdepartments.asp" class="menu"><strong>Government Departments</strong></a></td>
    </tr>
    </table>
    </td> 
    </tr>
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td> 
    </tr>
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/budget.asp" class="menu"><strong>Budget</strong></a></td>
    </tr>
    </table>
    </td> 
    </tr>
    
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td> 
    </tr>
    
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/legislation.asp" class="menu"><strong>Legislation</strong></a></td>
    </tr>
    </table>
    </td> 
    </tr> 
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/pressreleases.asp" class="menu"><strong>Press Releases</strong></a></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/publications/index.htm" class="menu"><strong>Freedom of Information</strong></a></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/structures.asp" class="menu"><strong>Structures & Functions</strong></a></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td> 
    </tr>
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/links.asp" class="menu"><strong>Links</strong></a></td>
    </tr>
    </table>
    </td> 
    </tr>
    <tr>
    <td bgcolor="#ffffff"><img src="/pics/space.gif" width="1" height="1" border="0" alt=""></td> 
    </tr>
    <tr>
    <td height="20" bgcolor="#999966">
    <table summary="" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;&nbsp;</td>
    <td><a href="/contactinfo.asp" class="menu"><strong>Contact Information</strong></a></td>
    </tr>
    </table>
    </td> 
    </tr>
    </table>
    
    My new css menu isn't quite the same yet and I need help adjusting certain values, can anyone help? I've adjusted widths slightly allowing for changes to the template but basically I want the same menu, green buttons, 1px high white space between each link and I want them properly aligned so when the text wraps its aligned with the text above it. Here's the css and html for the new menu.
    Code:
    <style>
    #menu {
    width: 186px;
    padding-left: 10px;
    }
    #menu ul {
    margin: 0px;
    padding: 0px;
    list-style-type : none;
    }
    #menu li {
     width: 182px;
     background-color: #999966;
     font-weight: bold;
     padding: 2px 2px 2px 2px;
     border-bottom: 1px solid #ffffff;
    }
    #menu li a {
    color: #ffffff;
    display: block;
    }
    #menu li a:link {
    text-decoration: none;
    }
    #menu li a:visited {
    text-decoration: none;
    }
    #menu li a:hover {
    color: #ff0000;
    text-decoration: underline;
    }
    </style>
    </head>
    <body>
    <div id="menu">
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </ul>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not a CSS expert and I learned a lot about using CSS styled lists for navigation buttons form Listamatic.
    They have a lot of different styles (both Vertical and horizontal) with clear CSS to show how it was done.

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course, there's also Ian's Lloyd's List-o-Matic - http://www.accessify.com/tools-and-w...st-o-matic.asp

    Thanks, I'll see if either can help.

  4. #4
    SitePoint Member
    Join Date
    Aug 2003
    Location
    London
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had a quick look at your code but I'm not too sure what your problem is. You haven't specified any <a> tags in your new html & css, but apart from that it seems to do what you want.

    Anne Marie

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right Anne, it was offending padding on the general style for <a> that messed things up.
    Last edited by Daz; Oct 3, 2003 at 03:10.


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
  •