Solved

CSS equivalent to this side navigation vertical menu

Posted on 2004-08-08
6
671 Views
Last Modified: 2006-11-17
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/sidebar_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/sidebar_r2_c1.gif">&nbsp;</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-estimate-request.asp" title="Security System Estimate Request">Estimate Request</a></li>
    <li><a href="testimonials.htm" title="Testimonials">Testimonials</a></li>
    <li><a href="false-alarm-reduction.htm" title="False Alarm Reduction Tips">False Alarm Reduction</a></li>
    <li><a href="florida-police-departments.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>


0
Comment
Question by:TrueBlue
  • 3
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11746463
What doee the original look like? A link would help.  I have no way of knowing what the webbot code is genrating without seeing it.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11746522
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-Language" 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-estimate-request.asp" title="Security System Estimate Request">Estimate Request</a></li>
      <li><a href="testimonials.htm" title="Testimonials">Testimonials</a></li>
      <li><a href="false-alarm-reduction.htm" title="False Alarm Reduction Tips">False Alarm Reduction</a></li>
      <li><a href="florida-police-departments.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>
0
 

Author Comment

by:TrueBlue
ID: 11747124
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.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:TrueBlue
ID: 11747233
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.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 11747598
Well, you're still including FP's css:
<link rel="stylesheet" type="text/css" href="_themes/ltmod-corp-colorful/ltmo1011.css">

So, you should get rid of that - it should be safe to do so.


Here's the commented file for you. You still have a lot of inline styling and some deprecated code, but you're getting there :-)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text/javascript" src="breakframes.js"></script>



<!-- REMOVE THIS NO RIGHT CLICK SCRIPT - PLEASE -->
<script language="javascript" type="text/javascript" src="norightclick.js"></script>



<!-- REMOVE ALL THIS FROM HERE -->

<!--mstheme-->
<link rel="stylesheet" type="text/css" href="_themes/ltmod-corp-colorful/ltmo1011.css">
<meta name="Microsoft Theme" content="ltmod-corp-colorful 1011, default">

<!-- TO HERE -->



<!-- The Stylesheet you're linking to is temporarily commented out so I could include the actual css below for reference -->
<!-- <link rel="stylesheet" type="text/css" media="screen" href="http://www.topsecurityinc.com/style.css"> -->




<style type="text/css">

body
{
     margin: 0;
     padding: 0;
     background: url(_themes/ltmod-corp-colorful/bk1.gif) repeat top left;
}

#header
{
     height:100px;
     background: url(web/images/header_r1_c1.gif) repeat top left;
     letter-spacing: 4px;
     color:#ffffff;
}

#header h2{
     margin: 12px 0 0 12px;
     font: italic 700 24px "times new roman", times, serif;

}

#header p
{
     margin:0;
     padding: 2px 0 0 12px;
     font: italic 700 16px "times new roman", times, serif;
}
#topnav
{
     z-index:10;
     position: absolute;
     width: 679px;
     left:50%;
     margin-left:-339px;
     height: 44px;
     top: 67px;
}

#topnav img
{
     float:left;
}

ul#topmenu
{
     margin:0;
     padding:0;
     background: url(web/images/global_bar_bk_r1_c2.gif) repeat top left;
     list-style:none;
}

ul#topmenu li
{
     display: inline;


}

ul#topmenu li a
{
     background: url(web/images/global_bar_bk_r1_c2.gif) repeat top left;
     float: left;
     font: bold 12px verdana, sans-serif;
     color:#000000;
     padding:14px 6px 14px 4px;
     border-right: 1px solid #016394;
     border-left: 1px solid #5FABE7;
     text-decoration:none;
}

ul#topmenu li a:hover
{
     text-decoration:none;
     color:#ffffff;
}

img
{
     border:none;
}


/* MODIFIED SECTIONS */

#navlefttop
{
      width:131px;
      height:20px;
      margin:0 0 0 20px;
      background: url(web/images/sb_top.gif) no-repeat top left;
      padding:6px 0 0 34px;
      color:#ffffff;
      font: bold 11px verdana;
      text-align:left;
}

ul#navleft
{
      padding:0 0 0 20px;
      margin:0 0 0 20px;
      width:144px;
      border-right:1px solid #979797;
      list-style:none;
      background: #ffffff url(web/images/sb_left.gif) repeat-y;
}

ul#navleft li a
{
      width:134px;
      display: block;
      text-align:center;
      background: #ffffff url(web/images/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: #ffffff url(web/images/navleft.gif) no-repeat;
      background-position: 0 -21px;
      text-decoration:none;
}

ul#navleft li a#current
{
      background: #ffffff url(web/images/navleft.gif) no-repeat;
      background-position: 0 -42px;
      text-decoration:none;
}

#navleftbot
{
      width:165px;
      height:23px;
      margin:0 0 0 20px;
      background: url(web/images/sb_bot.gif) no-repeat top left;
}

</style>
</head>

<body>


<!-- REMOVE THIS CONTAINING DIV, IT'S NOT NEEDED -->
<!-- <div style="position: absolute; width: 100%; z-index: 1; left: 0px; top: 97px" id="layer2"> -->

<!-- AND REMOVE THIS ONE AS WELL -->
<!-- <div align="center"> -->


<table border="0" cellpadding="0" width="100%" id="table3" style="border-collapse:collapse;">
  <tr>

    <!-- CHANGE TO THIS -->
    <td align="right" valign="top" width="195" nowrap><br><br>

    <!--webbot bot="Include" U-Include="sidenavigationmenu.htm" TAG="BODY" startspan -->

    <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-estimate-request.asp" title="Security System Estimate Request">Estimate Request</a></li>
     <li><a href="testimonials.htm" title="Testimonials">Testimonials</a></li>
     <li><a href="false-alarm-reduction.htm" title="False Alarm Reduction Tips">False Alarm Reduction</a></li>
     <li><a href="florida-police-departments.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>

    <!--webbot bot="Include" i-checksum="12007" endspan --></td>

    etc, etc,




<!-- REMOVE THESE TWO CLOSING DIV'S -->
<!-- </div> -->
<!-- </div> -->


<img src="http://www.topsecurityinc.com/absolutels/vtrack.asp?123400" width=0 height=0 alt="">


</body>

</html>
0
 

Author Comment

by:TrueBlue
ID: 11747979
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 :)
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question