Solved

CSS equivalent to this side navigation vertical menu

Posted on 2004-08-08
6
656 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:TrueBlue
Comment Utility
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
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 …

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now