Navigation Height Issue

CyberA

newbie

Posts: 1
Joined: 2008-05-08

Posted: Thu, 2008-05-08 23:38

I've made a page on our website referring to the issue:

Page: http://dev.publichealthforums.com/mytest.asp

The problem is the left side where it shows "MENU". Here is the HTML of the menu:

<!--  #### LEFT SIDE MENU #### -->
		
		<div id="4pxspacerhigh"></div>
		
		<div id="lsmLeftSideMenu">
			
			<h1>Product Menu</h1>
			
			<div id="lsmLeftBorder">
				<!-- #LEFT SIDE BORDER SHOWING -->
			</div>
			
			<a href="#">Test Link 1</a>
			<a href="#">Test Link 2</a>
			<a href="#">Test Link 3</a>
			<a href="#">Test Link 4</a>
			<span><b>Select Link</b></span>
			<a href="#">Test Link 5</a>
			<a href="#">Test Link 6</a>
			<a href="#">Test Link 7</a>
			<a href="#">Test Link 8</a>
			<a href="#">Test Link 9</a>
			<a href="#">Test Link 10</a>
			<a href="#">Test Link 11</a>
			<a href="#">Test Link 12</a>

			<div id="clear"></div>
			
			<div id="lsmBottomClosing">
				<!-- #BOTTOM MENU CLOSING -->
			</div>
			
		</div>

The problem is in:

                        <div id="lsmLeftBorder">
				<!-- #LEFT SIDE BORDER SHOWING -->
			</div>

The css is:

#lsmLeftSideMenu {width:163px;height:200px;}
#lsmLeftSideMenu h1 {background-position:left;background:url(/images2/leftSideMenu/leftSideMenu-TL.gif) #333333 no-repeat;margin:0px;padding-left:24px;padding-top:4px;font-size:12px;color:#ffffff;}

#lsmLeftBorder {width:16px;float:left;height:inherit;background:url(/images2/leftSideMenu/Menu-Icon.gif) #DF6061 no-repeat;}
#lsmLeftSideMenu a {display:block;padding:2px 0px 2px 23px;color:#006699;font-size:12px;border-bottom:#AEABA6;}
#lsmLeftSideMenu span {display:block;padding:2px 0px 2px 23px;color:#333333;font-size:12px;border-bottom:#AEABA6;}

#lsmBottomClosing {height:5px;background:url(/images2/leftSideMenu/bottom-left.gif) #333333 no-repeat;background-position:left;}

The problem is I don't want to set a height to the menu because I don't know how high it will be.
In this example I have had to set a height in the first line of the css because if I hadn't nothing
would show in there.

Thank you for your help.

gary.turner

Moderator

Posts: 5517
Joined: 2004-06-25
Location: Dallas

Make the left side

Posted: Fri, 2008-05-09 05:19

Make the left side background image tall enough to cover your bases, and put it on the menu container, left top.

The div that holds the links should be a <ul>. A menu is a list.

cheers,

gary

A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.

My site is slo-o-owly being reconstructed; visit anyway.