Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS equivalent to this side navigation vertical menu

Posted on 2004-08-08
6
Medium Priority
?
709 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

722 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