TrueBlue
asked on
Need CSS equivalent of bottom navigation bar
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/bot tom_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/bot tom_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="<A HREF="#URL#" TARGET="#TARGET#" ; STYLE="{text-decorati on: none;}">#LABEL#< ;/A>" S-Btn-Sel="#LABEL#" S-Btn-Sep="&nbsp;|& ;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/bot tom_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.ht m" 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>
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_
<td background="Web/images/bot
<img name="bottom_r1_c2" src="Web/images/bottom_r1_
<td rowspan="3">
<img name="bottom_r1_c3" src="Web/images/bottom_r1_
<td>
<img src="Web/images/spacer.gif
</tr>
<tr>
<td background="Web/images/bot
<p align="center">
<!--webbot bot="Navigation" S-Orientation="horizontal"
<td>
<img src="Web/images/spacer.gif
</tr>
<tr>
<td background="Web/images/bot
<img name="bottom_r3_c2" src="Web/images/bottom_r3_
<td>
<img src="Web/images/spacer.gif
</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_
<img name="bottom_r1_c2" src="Web/images/bottom_r1_
<img name="bottom_r1_c3" src="Web/images/bottom_r1_
<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.ht
<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_
</div>
</body>
</html>
ASKER
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.ht m" 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?
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_
<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.ht
<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_
</div>
</body>
</html>
Do I have it correct?
What CSS are you using?
ASKER
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_c 2.gif) repeat bottom left;
list-style:none;
}
ul#botmenu li
{
display: inline;
}
ul#botmenu li a
{
background: url(web/images/bottom_r2_c 2.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.
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_c
list-style:none;
}
ul#botmenu li
{
display: inline;
}
ul#botmenu li a
{
background: url(web/images/bottom_r2_c
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.
Well, the first thing I see is your css is using botmenu instead of bottommenu...
ASKER
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.
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.
ASKER
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_c 2.gif) repeat top left;
background: url(web/images/bottom_r3_c 2.gif) repeat center left;
list-style:none;
}
ul#bottommenu li
{
display: inline;
}
ul#bottommenu li a
{
background: url(web/images/bottom_r2_c 2.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.
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_c
background: url(web/images/bottom_r3_c
list-style:none;
}
ul#bottommenu li
{
display: inline;
}
ul#bottommenu li a
{
background: url(web/images/bottom_r2_c
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.
Having a crazy day - I will be in touch shortly :-)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.gi f?
Thank you in advance.
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.gi
Thank you in advance.
>>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.gi f?
Yes, exactly.
Yes, but it needs to be inline for IE...
<li><a style="border-right:none;"
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.gi
Yes, exactly.
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