SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Lost
    Join Date
    Dec 2002
    Location
    Norway
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing menu to css

    I've got this site, http://www.top-template.com that was created in a bit of hurry. When I looked closer I realized that in creating it in a hurry, it had became about 3 times the size (as in KB) as i should. So, what I'm trying to do now is to create the entire left menu into css, as it would probably remove about 600 lines of bad html code

    Problem is, I've never worked with css that way, using images etc. All help or redirections would be greatly appreciated.

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

    I think you can do most of that left menu without images.

    Here's a rough example for IE6, Mozilla 12. etc.
    Code:
    <!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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul#menu {
     position:relative;
     list-style-type: none;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:x-small;
     color: #666666;
    }
    #menu li {
     position:relative;
     width:150px;
     text-align:right;
     border-bottom:1px solid #999999;
     line-height:25px;
    }
    #menu li a {
     text-decoration:none;
     color: #666666;
     background-color: #FFFFFF;
    }
    #menu li a:hover {
     text-decoration:underline;
     color: #000000;
    }
    span {
     display:block;
     width:2px;
     position:absolute;
     left:155px;
     top:0px;
     border-left:5px solid #999966;
     height:25px;
     border-right:1px solid #CCCCCC;
    }
    </style>
    </head>
    <body>
    <ul id="menu">
      <li><a href="#">Home</a><span></span></li>
      <li><a href="#">Templates</a><span></span></li>
      <li><a href="#">3D Templates</a><span></span></li>
      <li><a href="#">Flash Templates</a><span></span></li>
      <li><a href="#">Agriculture Templates</a><span></span></li>
      <li><a href="#">Animals & Pets Templates</a><span></span></li>
    </ul>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    Lost
    Join Date
    Dec 2002
    Location
    Norway
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot, that solved more or less everything
    just one thing, how can I push it more to the left? Tried changing the code, but wasn't able to move the menu all the way left.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Glad it helped.

    To move the menu left you can loose the default margins and padding.
    Code:
    ul#menu {
     position:relative;
     list-style-type: none;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:x-small;
     color: #666666;
     padding:0;
     margin:0; 
    }
    Hope that helps.

    Paul

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Of course you will need to take the broken box model into consideration for ie5 etc.

    This should make it look more or less the same.
    Code:
    ul#menu {
     position:relative;
     list-style-type: none;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:x-small;
     color: #666666;
     padding:0;
     margin:0; 
    }
    *html ul#menu {
      font-size:xx-small;
      f\ont-size:x-small; 
    }
    #menu li {
     position:relative;
     width:150px;
     text-align:right;
     border-bottom:1px solid #999999;
     line-height:25px;
    }
    #menu li a {
     text-decoration:none;
     color: #666666;
     background-color: #FFFFFF;
    }
    #menu li a:hover {
     text-decoration:underline;
     color: #000000;
    }
    #menu li span {
     display:block;
     width:2px;
     position:absolute;
     left:155px;
     top:0px;
     border-left:5px solid #999966;
     height:25px;
     border-right:1px solid #CCCCCC;
    }
    *html #menu li span{
     width:8px;
     w\idth:2px;
    }
    Paul

  6. #6
    Lost
    Join Date
    Dec 2002
    Location
    Norway
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just brilliant, everything I needed to fix is fixed, sites load about 70% faster.. Can't thank you enough really.


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
  •