Solved

CSS equivalent to this side navigation vertical menu

Posted on 2004-08-08
6
681 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
Technology Partners: 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

740 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