TrueBlue
asked on
CSS equivalent to this side navigation vertical menu
Hi!
Any one have any idea how I convert this to CSS?
<table border="0" cellpadding="0" cellspacing="0" width="166" id="table4">
<tr>
<td>
<img name="sidebar_r1_c1" src="Web/images/sidebar_r1 _c1.gif" width="19" height="26" border="0" alt=""></td>
<td background="web/images/sid ebar_r1_c2 .gif" font-family: Tahoma; font-size: 8pt; color: #FFFFFF; font-weight: bold>
<img border="0" src="Web/images/bullet.gif " width="8" height="7" alt="">
LINKS</td>
</tr>
<tr>
<td background="web/images/sid ebar_r2_c1 .gif">&nbs p;</td>
<td bgcolor="#FFFFFF" style="border-right: 1px solid #979797">
<!--webbot bot="Navigation" S-Orientation="vertical" S-Rendering="graphics" S-Type="top" B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
</tr>
<tr>
<td>
<img name="sidebar_r3_c1" src="Web/images/sidebar_r3 _c1.gif" width="19" height="22" border="0" alt=""></td>
<td>
<img name="sidebar_r3_c2" src="Web/images/sidebar_r3 _c2.gif" width="147" height="22" border="0" alt=""></td>
</tr>
</table>
I created a file named sidenavigationment.htm
<html>
<head>
<title></title>
</head>
<body>
<div id="sidenav">
<img name="sidebar_r1_c1" src="Web/images/sidebar_r1 _c1.gif" width="19" height="26" border="0" alt="">
<img border="0" src="Web/images/bullet.gif " width="8" height="7" alt="">LINKS
<ul id="sidemenu">
<li><a href="index.htm" title="Orlando Home Security">Home</a></li>
<li><a href="https://www.secure.topsecurityinc.com/default.asp" title="Restricted Login">Restricted Login</a></li>
<li><a href="eform.asp" title="Email Us">Email Us</a></li>
<li><a href="contact-us.htm" title="Contact Us">Contact Us</a></li>
<li><a href="online-payment.htm" title="Online Payment">Online Payment</a></li>
<li><a href="about-us.htm" title="About Us">About Us</a></li>
<li><a href="security-system-esti mate-reque st.asp" title="Security System Estimate Request">Estimate Request</a></li>
<li><a href="testimonials.htm" title="Testimonials">Testi monials</a ></li>
<li><a href="false-alarm-reductio n.htm" title="False Alarm Reduction Tips">False Alarm Reduction</a></li>
<li><a href="florida-police-depar tments.asp " title="Florida Police Departments">Florida Police Depts</a></li>
<li><a href="/wwsql/guestbook.asp " title="Guest Book">Guest Book</a></li>
<li><a href="site-map.htm" title="Site Map">Site Map</a></li>
</ul>
<img name="sidebar_r3_c1" src="Web/images/sidebar_r3 _c1.gif" width="19" height="22" border="0" alt=""></td>
<img name="sidebar_r3_c2" src="Web/images/sidebar_r3 _c2.gif" width="147" height="22" border="0" alt=""></td>
</div>
</body>
</html>
Any one have any idea how I convert this to CSS?
<table border="0" cellpadding="0" cellspacing="0" width="166" id="table4">
<tr>
<td>
<img name="sidebar_r1_c1" src="Web/images/sidebar_r1
<td background="web/images/sid
<img border="0" src="Web/images/bullet.gif
LINKS</td>
</tr>
<tr>
<td background="web/images/sid
<td bgcolor="#FFFFFF" style="border-right: 1px solid #979797">
<!--webbot bot="Navigation" S-Orientation="vertical" S-Rendering="graphics" S-Type="top" B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
</tr>
<tr>
<td>
<img name="sidebar_r3_c1" src="Web/images/sidebar_r3
<td>
<img name="sidebar_r3_c2" src="Web/images/sidebar_r3
</tr>
</table>
I created a file named sidenavigationment.htm
<html>
<head>
<title></title>
</head>
<body>
<div id="sidenav">
<img name="sidebar_r1_c1" src="Web/images/sidebar_r1
<img border="0" src="Web/images/bullet.gif
<ul id="sidemenu">
<li><a href="index.htm" title="Orlando Home Security">Home</a></li>
<li><a href="https://www.secure.topsecurityinc.com/default.asp" title="Restricted Login">Restricted Login</a></li>
<li><a href="eform.asp" title="Email Us">Email Us</a></li>
<li><a href="contact-us.htm" title="Contact Us">Contact Us</a></li>
<li><a href="online-payment.htm" title="Online Payment">Online Payment</a></li>
<li><a href="about-us.htm" title="About Us">About Us</a></li>
<li><a href="security-system-esti
<li><a href="testimonials.htm" title="Testimonials">Testi
<li><a href="false-alarm-reductio
<li><a href="florida-police-depar
<li><a href="/wwsql/guestbook.asp
<li><a href="site-map.htm" title="Site Map">Site Map</a></li>
</ul>
<img name="sidebar_r3_c1" src="Web/images/sidebar_r3
<img name="sidebar_r3_c2" src="Web/images/sidebar_r3
</div>
</body>
</html>
I would think something like this. It's a little more complicated then necessary because of the rounded corners and shadows - baiscally it's a single image at the top, left, and bottom of the menu, and a single image for the link rollovers that just changes position when you hover over them.
So now you can get rid of all that FP/IE only code that won't validate :-)
http://www.pdgmedia.com/ee/tb.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Langua ge" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body
{
margin:20px;
padding:0;
background: url(http://www.topsecurityinc.com/_themes/ltmod-corp-colorful/bk1.gif) repeat top left;
}
#navlefttop
{
width:165px;
height:20px;
margin:0;
background: url(sb_top.gif) no-repeat top left;
padding:6px 0 0 30px;
color:#ffffff;
font: bold 11px verdana;
}
ul#navleft
{
padding:0 0 0 20px;
margin:0;
width:144px;
border-right:1px solid #979797;
list-style:none;
background: #ffffff url(sb_left.gif) repeat-y;
}
ul#navleft li
{
background: #ffffff url(navleft.gif) no-repeat;
background-position: 0 -21px;
}
ul#navleft li a
{
width:124px;
display: block;
text-align:center;
background: #ffffff url(navleft.gif) no-repeat;
font: 11px tahoma, verdana, sans-serif;
color:#000000;
padding:4px 0 4px 10px;
text-decoration:none;
}
ul#navleft li a:hover
{
background: none;
text-decoration:none;
}
ul#navleft li a#current
{
background: #ffffff url(navleft.gif) no-repeat;
background-position: 0 -42px;
text-decoration:none;
}
#navleftbot
{
width:165px;
height:23px;
margin:0;
background: url(sb_bot.gif) no-repeat top left;
}
</style>
</head>
<body>
<div id="navlefttop">LINKS</div >
<ul id="navleft">
<li><a href="index.htm" title="Orlando Home Security" id="current">Home</a></li>
<li><a href="https://www.secure.topsecurityinc.com/default.asp" title="Restricted Login">Restricted Login</a></li>
<li><a href="eform.asp" title="Email Us">Email Us</a></li>
<li><a href="contact-us.htm" title="Contact Us">Contact Us</a></li>
<li><a href="online-payment.htm" title="Online Payment">Online Payment</a></li>
<li><a href="about-us.htm" title="About Us">About Us</a></li>
<li><a href="security-system-esti mate-reque st.asp" title="Security System Estimate Request">Estimate Request</a></li>
<li><a href="testimonials.htm" title="Testimonials">Testi monials</a ></li>
<li><a href="false-alarm-reductio n.htm" title="False Alarm Reduction Tips">False Alarm Reduction</a></li>
<li><a href="florida-police-depar tments.asp " title="Florida Police Departments">Florida Police Depts</a></li>
<li><a href="/wwsql/guestbook.asp " title="Guest Book">Guest Book</a></li>
<li><a href="site-map.htm" title="Site Map">Site Map</a></li>
</ul>
<div id="navleftbot"></div>
</body>
</html>
So now you can get rid of all that FP/IE only code that won't validate :-)
http://www.pdgmedia.com/ee/tb.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Langua
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body
{
margin:20px;
padding:0;
background: url(http://www.topsecurityinc.com/_themes/ltmod-corp-colorful/bk1.gif) repeat top left;
}
#navlefttop
{
width:165px;
height:20px;
margin:0;
background: url(sb_top.gif) no-repeat top left;
padding:6px 0 0 30px;
color:#ffffff;
font: bold 11px verdana;
}
ul#navleft
{
padding:0 0 0 20px;
margin:0;
width:144px;
border-right:1px solid #979797;
list-style:none;
background: #ffffff url(sb_left.gif) repeat-y;
}
ul#navleft li
{
background: #ffffff url(navleft.gif) no-repeat;
background-position: 0 -21px;
}
ul#navleft li a
{
width:124px;
display: block;
text-align:center;
background: #ffffff url(navleft.gif) no-repeat;
font: 11px tahoma, verdana, sans-serif;
color:#000000;
padding:4px 0 4px 10px;
text-decoration:none;
}
ul#navleft li a:hover
{
background: none;
text-decoration:none;
}
ul#navleft li a#current
{
background: #ffffff url(navleft.gif) no-repeat;
background-position: 0 -42px;
text-decoration:none;
}
#navleftbot
{
width:165px;
height:23px;
margin:0;
background: url(sb_bot.gif) no-repeat top left;
}
</style>
</head>
<body>
<div id="navlefttop">LINKS</div
<ul id="navleft">
<li><a href="index.htm" title="Orlando Home Security" id="current">Home</a></li>
<li><a href="https://www.secure.topsecurityinc.com/default.asp" title="Restricted Login">Restricted Login</a></li>
<li><a href="eform.asp" title="Email Us">Email Us</a></li>
<li><a href="contact-us.htm" title="Contact Us">Contact Us</a></li>
<li><a href="online-payment.htm" title="Online Payment">Online Payment</a></li>
<li><a href="about-us.htm" title="About Us">About Us</a></li>
<li><a href="security-system-esti
<li><a href="testimonials.htm" title="Testimonials">Testi
<li><a href="false-alarm-reductio
<li><a href="florida-police-depar
<li><a href="/wwsql/guestbook.asp
<li><a href="site-map.htm" title="Site Map">Site Map</a></li>
</ul>
<div id="navleftbot"></div>
</body>
</html>
ASKER
Hi Sean:
For some reason my main page's side navigation menu has two columns of bullets, unlike your example.
Any ideas where I am going wrong?
Thank you in advance.
For some reason my main page's side navigation menu has two columns of bullets, unlike your example.
Any ideas where I am going wrong?
Thank you in advance.
ASKER
Hi Sean:
The only difference I see is that you have margin set to 20px in the body statement for the CSS.
I have all of your suggestions in one external CSS so I am not sure how to handle this one because the other table had a margin of 0px.
Still don't think that has to do with the double bullets though.
I also noticed that the top bar has been shifted to the left. It was positioned at the left edge of the main layer.
Thank you in advance.
The only difference I see is that you have margin set to 20px in the body statement for the CSS.
I have all of your suggestions in one external CSS so I am not sure how to handle this one because the other table had a margin of 0px.
Still don't think that has to do with the double bullets though.
I also noticed that the top bar has been shifted to the left. It was positioned at the left edge of the main layer.
Thank you in advance.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Sean:
That fixed my left navigation menu button problems:)
Actually, FP was automatically including that other css file. I accidentally left the meta name in there and FP apparently uses it to include the other css into the page. But, it is gone now.
I am now down to 8 errors with W3C and they have to do with the bottom navigation bar.
So I will make that another question.
Thank you for your expert help :)
That fixed my left navigation menu button problems:)
Actually, FP was automatically including that other css file. I accidentally left the meta name in there and FP apparently uses it to include the other css into the page. But, it is gone now.
I am now down to 8 errors with W3C and they have to do with the bottom navigation bar.
So I will make that another question.
Thank you for your expert help :)
Cd&