Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Need CSS equivalent of bottom navigation bar

Posted on 2004-08-08
11
Medium Priority
?
459 Views
Last Modified: 2008-02-01
Hi!

I need to translate the below listed code into its CSS equivalent.

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table11">
  <tr>
   <td rowspan="3">
   <img name="bottom_r1_c1" src="Web/images/bottom_r1_c1.gif" width="17" height="42" border="0" alt=""></td>
   <td background="Web/images/bottom_r1_c2.gif" width="100%">
   <img name="bottom_r1_c2" src="Web/images/bottom_r1_c2.gif" width="480" height="8" border="0" alt=""></td>
   <td rowspan="3">
   <img name="bottom_r1_c3" src="Web/images/bottom_r1_c3.gif" width="20" height="42" border="0" alt=""></td>
   <td>
   <img src="Web/images/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr>
   <td background="Web/images/bottom_r2_c2.gif" width="100%" style="font-family: Tahoma; font-size: 8pt; font-weight: bold">
   <p align="center">
   <!--webbot bot="Navigation" S-Orientation="horizontal" S-Rendering="html" S-Bar="Bars" S-Btn-Nml="&lt;A HREF=&quot;#URL#&quot; TARGET=&quot;#TARGET#&quot; STYLE=&quot;{text-decoration: none;}&quot;&gt;#LABEL#&lt;/A&gt;" S-Btn-Sel="#LABEL#" S-Btn-Sep="&amp;nbsp;|&amp;nbsp;" S-Type="global" B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
   <td>
  <img src="Web/images/spacer.gif" width="1" height="19" border="0" alt=""></td>
  </tr>
  <tr>
   <td background="Web/images/bottom_r3_c2.gif">
   <img name="bottom_r3_c2" src="Web/images/bottom_r3_c2.gif" width="480" height="15" border="0" alt=""></td>
   <td>
    <img src="Web/images/spacer.gif" width="1" height="15" border="0" alt=""></td>
  </tr>
</table>

Here is my attempt at creating an html page to include in my home page. I called the page bottomnavigationmenu:

<html>
<head>
<title></title>
</head>
<body>
<div id="botnav">
<img name="bottom_r1_c1" src="Web/images/bottom_r1_c1.gif" width="17" height="42" border="0" alt="">
<img name="bottom_r1_c2" src="Web/images/bottom_r1_c2.gif" width="480" height="8" border="0" alt="">
<img name="bottom_r1_c3" src="Web/images/bottom_r1_c3.gif" width="20" height="42" border="0" alt="">
<ul id="bottommenu">
    <li><a href="monitoring.htm" title="Orlando Security Monitoring">Security Monitoring</a></li>
    <li><a href="systems.htm" title="Orlando Security Systems">Security Systems</a></li>
    <li><a href="featured-products.htm" title="Orlando Security Products">Security Products</a></li>
    <li><a href="cctv.htm" title="Orlando CCTV Systems">CCTV Systems</a></li>
    <li><a href="intercoms.htm" title="Orlando Intercom Systems">Intercom Systems</a></li>
</ul>
<img name="bottom_r3_c2" src="Web/images/bottom_r3_c2.gif" width="480" height="15" border="0" alt="">
</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
  • 6
  • 5
11 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 11748108
So now I have a question for you...

We've been going through different parts of your page, and converting old deprecated code into CSS.

The top navigation is "very" similar to the bottom, with just a few minor modifications. My hope (apart from you not being able to maintain the page afterwards) is at this point you are HEAVILY into experimenting with what's going on.

So, while I could whip up the code for you in a few minutes, I prefer you to post what you have tried so far, so I know you're getting it.

>>Here is my attempt at creating an html page to include in my home page
That's just basic html, and really just a cut and paste of the other navigations. My definition of "attempt" is the CSS that you're using to try and get it to work. So that's what I would prefer to see.

Don't get me wrong, you're doing a good thing by wanting to change the site over. But now you need to do a great thing and start getting your hands really, really dirty.

Here's some very good reference material for you:
http://css.maxdesign.com.au/listamatic/index.htm
0
 

Author Comment

by:TrueBlue
ID: 11748607
Hi Sean:

Here is my second attempt at the html part:

<html>
<head>
<title></title>
</head>
<body>
<div id="botnav">
<img name="bottom_r1_c1" src="Web/images/bottom_r1_c1.gif" width="17" height="42" border="0" alt="">
<ul id="bottommenu">
    <li><a href="monitoring.htm" title="Orlando Security Monitoring">Security Monitoring</a></li>
    <li><a href="systems.htm" title="Orlando Security Systems">Security Systems</a></li>
    <li><a href="featured-products.htm" title="Orlando Security Products">Security Products</a></li>
    <li><a href="cctv.htm" title="Orlando CCTV Systems">CCTV Systems</a></li>
    <li><a href="intercoms.htm" title="Orlando Intercom Systems">Intercom Systems</a></li>
</ul>
<img name="bottom_r1_c3" src="Web/images/bottom_r1_c3.gif" width="20" height="42" border="0" alt="">
</div>
</body>
</html>

Do I have it correct?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11749108
What CSS are you using?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:TrueBlue
ID: 11749301
Hi Sean:

This is what I have for the CSS:

#botnav
{
     position: absolute;
     width: 100%;
     left:50%;
     margin-left:-339px;
     height: 44px;
     top: 67px;
}

#botnav img
{
     float:left;
}

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

ul#botmenu li
{
     display: inline;


}

ul#botmenu li a
{
     background: url(web/images/bottom_r2_c2.gif) repeat bottom 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#botmenu li a:hover
{
     text-decoration:none;
     color:#ffffff;
}

img
{
     border:none;
}

Thank you in advance.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11753075
Well, the first thing I see is your css is using botmenu instead of bottommenu...
0
 

Author Comment

by:TrueBlue
ID: 11753910
Hi Sean:

That is what I get for working so late on something.

I posted the page as it looks so far:

http://www.topsecurityinc.com/_test.htm

Not sure why it is displaying in the middle of the page, I replaced the original html table code with the webbot.

It is also distorted which I noticed the original code is as well on non-IE browers.

Hope there is a way to fix this in CSS.

I looked at the link you provided, but I did not see any examples of how to place bars at certain locations.

Any ideas?

Thank you in advance.

0
 

Author Comment

by:TrueBlue
ID: 11757085
Hi!

This is as far as I can get without help.

#botnav
{
     z-index:10;
     position: absolute;
     width: 100%;
     left:50%;
     margin-left:-310px;
     bottom: 0px;
}

#botnav img
{
     float:left;
}

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

ul#bottommenu li
{
     display: inline;
}

ul#bottommenu li a
{
     background: url(web/images/bottom_r2_c2.gif) repeat top left;
     float: left;
     font: bold 8pt Tahoma;
     color:#000000;
     padding: 8px;
     border-right: 1px solid #016394;
     border-left: 1px solid #5FABE7;
     text-decoration:none;
}

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

img
{
     border:none;
}

I would greatly appreciate assistance with correcting this code.

The current version of the page using the above CSS is located at http://www.topsecurityinc.com/test.htm.

The bottom bar should look like the on the home page at http://www.topsecurityinc.com

Thank you in advance.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11757266
Having a crazy day - I will be in touch shortly :-)
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 2000 total points
ID: 11759280
You're almost there...

Just a few things - you had multiple background images, so only the last was being read. Also, you don't need any absolute positioning, becasue the nav is sitting inside a table cell, so just let it sit where it needs to.

Note - you'll need to create a new background image, one the same height as the nav bar. The current one only goes part of the way down, as you'll see...


<!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">

#botnav
{
     z-index:10;
     width: 100%;
}

#botnav img
{
     float:left;
}

ul#bottommenu
{
     float: left;
     margin:0;
     padding:0;
     height:42px;
     background: url(web/images/bottom_r1_c2.gif) repeat-x top left;
     list-style:none;
}

ul#bottommenu li
{
     display: inline;
}

ul#bottommenu li a
{
     background: url(web/images/bottom_r2_c2.gif) repeat-x 0 1px;
     float: left;
     font: bold 8pt Tahoma;
     color:blue;
     margin:6px 0 0 0;
     padding: 0px 8px 4px 12px;
     text-decoration:none;
     border-right:1px solid black;
}

ul#bottommenu li a:hover
{
     text-decoration:none;
     color:black;
}

img
{
     border:none;
}


</style>
</head>
<body>

<div id="botnav">
<img name="bottom_r1_c1" src="Web/images/bottom_r1_c1.gif" width="17" height="42" alt="">
<ul id="bottommenu">
    <li><a href="monitoring.htm" title="Orlando Security Monitoring">Security Monitoring</a></li>
    <li><a href="systems.htm" title="Orlando Security Systems">Security Systems</a></li>
    <li><a href="featured-products.htm" title="Orlando Security Products">Security Products</a></li>
    <li><a href="cctv.htm" title="Orlando CCTV Systems">CCTV Systems</a></li>
    <li><a href="intercoms.htm" title="Orlando Intercom Systems">Intercom Systems</a></li>
</ul>
<img style="float:left;" name="bottom_r1_c3" src="Web/images/bottom_r1_c3.gif" width="20" height="42" alt="">
</div>


</body>
</html>
0
 

Author Comment

by:TrueBlue
ID: 11759489
Hi Sean:

Thank you :)

Is there a command to omit the vertical bar after the final item?

Is there a way I can stretch the bar so that it ends even with the table above it?

Is the graphic file that needs to be edited named web/images/bottom_r1_c2.gif?

Thank you in advance.

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11766393
>>Is there a command to omit the vertical bar after the final item?
Yes, but it needs to be inline for IE...
<li><a style="border-right:none;" href="intercoms.htm" title="Orlando Intercom Systems">Intercom Systems</a></li>

Is there a way I can stretch the bar so that it ends even with the table above it?
Not easily... because different screens will render the fonts differently. The best you can do is just to center it in the cell...

Is the graphic file that needs to be edited named web/images/bottom_r1_c2.gif?
Yes, exactly.
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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

618 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