Solved

CSS equivalent to this side navigation vertical menu

Posted on 2004-08-08
6
691 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

751 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