Page 1 of 1

CSS Left Nav

Posted: Sat Sep 24, 2005 8:10 pm
by hawleyjr
I'm (trying) creating left nav using CSS and HTML lists.

My problem is I need the table cell holding the navigation to expand/contact to the list size. To no prevail, I tried looking through and using CSS Border Box Model...but...no luck.

There is a link under Fire Fox’s Web Developer Extension (CSS->Use Border Box Model) which when selected gives me the desired result, however, I can't figure out how to make it happen in CSS.

The following is an example of what I'm trying to do....

Code: Select all

<style>

/*
	LEFT NAVIGATION
*/

#nav_holder{
	clear: both;
	padding: 0 0 1em 0;
}
#nav_hchild{
	float: left;
	width: 160px;
	margin-bottom: 1em;
	white-space: nowrap;
}

/* PADD LIST TO LEFT */
#ul_nav, #ul_nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* REMOVE LI DOT */
#ul_nav li {
	display: inline;
	padding: 0;
	margin: 0;
}
#ul_nav li a {
	display: block;
	padding: 8px 10px;
	font-family:arial;
	font-size:10pt;
	color: #7d8995;
	font-weight: bold;
	text-decoration: none;
	text-align:  left;

	border-right:1px #7d8995 solid; 
	border-bottom:1px #7d8995 solid; 
	width: 100%;
}

#ul_nav li a:hover {
	background-color: #FFF9F1;
	width: 100%;
	text-decoration:underline;
	color:#A26103;
}

td.left_nav_holder{
background-color: #F3F0E9;
}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="160" class="left_nav_holder"> <div id="nav_holder"> 
        <div id="nav_hchild"> 
          <ul id="ul_nav">
            <li><a href="#1">Link 1</a></il> 
            <li><a href="#2">Link 2</a></il> 
            <li><a href="#3">Link 3</a></il> 
            <li><a href="#4">Link 4</a></il> 
            <li><a href="#5">Link 5</a></il> 
          </ul>
        </div>
      </div></td>
    <td width="100%">&nbsp;</td>
  </tr>
</table>