Web Analytics Made Easy -
StatCounter Table based left nav to css - CodingForum

Announcement

Collapse
No announcement yet.

Table based left nav to css

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Table based left nav to css

    Hi

    I'm having probs trying to convert my table based left nav to tableless css.

    My nav is as follows:

    <table width="160" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="redleft"><img src="spacer.gif" width="5" /></td>
    <td class="redmid"><a href="index.htm" class="navlinkselected">Homepage</a></td>
    <td class="redright"><img src="spacer.gif" width="10" /></</td>
    </tr>
    <tr>
    <td class="redleft"><img src="spacer.gif" width="5" /></td>
    <td class="redmid"><a href="test.htm" class="navlink">Test</a></td>
    <td class="redright"><img src="spacer.gif" width="10" /></</td>
    </tr>
    ....
    </table>

    The 'redleft' class is an 5px width image
    The 'redmid' class sets the background to an image which is 1px width but will repeat
    The 'redright' class is an 10px width image

    How can I do this? I've looked on the web but haven't found an example where 3 images are used - any ideas?

  • #2
    In place of the spacer images you can just use padding in the li's. Margin will probably work best. Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    #nav {
    width:160px;
    }
    #nav ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    #nav ul li {
    width:145px;
    background:#000000;
    padding-left:5px;
    padding-right:10px;
    }
    #nav ul li a, #nav ul li a:link {
    display:block;
    background:#FF0000 url(redmid.jpg) repeat-x;
    padding:3px;
    width:139px;
    }
    </style>
    </head>
    
    <body onload="alert(document.getElementById('nav').offsetWidth)">
    <div id="nav">
    <ul>
    	<li><a href="index.htm" class="navlinkselected">Homepage</a></li>
    	<li><a href="#" class="navlink">Test</a></li>
    	<li><a href="#" class="navlink">Test2</a></li>
    	<li><a href="#" class="navlink">Test3</a></li>
    </ul>
    </div>
    </body>
    </html>
    I didn't know what the background image looked like but I think you should understand where to put it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Hi thanks for the reply..

      Its not displaying the images either side of the background image.

      The nav is like a lozenge..

      There is a left curve then a background image and then a right curve.

      Any ideas how to do this?

      Comment


      • #4
        Attach the images to a post or give us a link to your site. That was just an example, how do you expect us to know what your images look like if you haven't given them to us? You can just place the images directly inside the li and get rid of the padding on the li and make the width of the links 145.
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment

        Working...
        X