captainbarred
10-29-2008, 09:11 PM
Hey all, new guy here, not sure where to put an SSI question so here it is.
I am building a resource internal site for where I work.
After building a frames version that sucked, I found SSI and started working in .shtml files.
everything was going fine till I hit a very odd snag...
I built a top and side menu system in SSI but I am having severe trouble with the side menu when I resize the window...
screenshots:
Here is how it looks full screen:
http://i17.photobucket.com/albums/b58/captainbarre/CS-index-1.jpg
But then if you make the window smaller, I have 2 tables to list the different links off the index page. When the tables go over the edge of the page, they shift to below the side menu.
http://i17.photobucket.com/albums/b58/captainbarre/CS-index-error-1.jpg
I just can't seem to get the tables to stay side by side with the SSI side menu and have a scroll bar appear instead of them shifting down...
Here is the code, don't make fun, I am no pro at this, just a couple classes from college :p
SSI menu file:
<table bgcolor="#000066" width="100%" height="100" border="1">
<tr>
<th width="100" scope="col"><img src="images/xyz.jpg" width="165" height="150"></th>
<th width="%" scope="col">
<table align=center border="0" bordercolor="#871D1D" width="500" bgcolor="#000066">
<tr>
<td>
<p align=center><span style='font-size:
40.0pt'><font color="white">XYZ CALLSHARE</f><o:p></o:p></span></p>
</td>
</tr>
</table>
<br>
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// -->
</script>
<style>
#sddm ul
{ margin: 0;
padding: 0;
z-index: 30
display: center;}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 14px arial}
#sddm li a
{ display: block;
margin: 0 30px 0 0;
padding: 5px 10px;
width: 90px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
</style>
<table align=center border="1" bordercolor="#871D1D" width="665" background="images/background.jpg">
<tr>
<td>
<!-- div class="sample" style="margin-bottom: 15px;height:42px;">
<span -->
<ul id="sddm">
<li><a href="home.html" target="mainframe">Home</a>
</li>
<li><a href="http://techshare/" target=_blank>Techshare</a>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Visa Credit Card</a>
<a href="#">Paypal</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Download Help File</a>
<a href="#">Read online</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">E-mail</a>
<a href="#">Submit Request Form</a>
<a href="#">Call Center</a>
</div>
</li>
</ul>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
<table bgcolor="#000066" height="100%" border="1" style="float: left;">
<tr>
<th width="165" valign="top" scope="col">
<br>
<p align="center">
<font color="white">
<a href="groupwise.shtml">HOME</a>
</f>
</P>
<script type="text/javascript" language="javascript" src="find1.js">
</script>
<br>
<table border="1" bordercolor="#871D1D" width="100%" background="images/background.jpg">
<tr>
<td><b><font color="black">Contact Numbers</f></b><br>
<img src="images/bullet.gif"><a href="" target=_menu>After Hour Contacts</a>
<br><img src="images/bullet.gif">
<br><img src="images/bullet.gif">
<br><img src="images/bullet.gif">
<br><img src="images/bullet.gif">
<br><img src="images/bullet.gif">
</td>
</tr>
</table>
</th>
</tr>
</table>
END OF SSI FILE
CONTENTS OF INDEX FILE - Index.shtml :
<html>
<head>
<title>Callshare</title>
</head>
<body background="images/background.jpg">
<!--#include virtual="menu.ssi"-->
<br>
<table align="center" width="785">
<tr>
<td width="356">
<table valign="top" cellspacing="5" width="100%" border="1">
<tr>
<td bgcolor="#000066"><h3><font color="white">Policy and Procedures</f></h3></td>
</tr>
<tr>
<td><img src="images/bullet.gif" />
<a href="" target="_blank">
Policy and Procedures</a></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">Incident Management</a></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">Service Level Agreements</a></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">Support Items Transfer List</a></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">IS Project Portfolio (Intranet)</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="413">
<table valign="top" cellspacing="5" width="100%" border="1">
<tr>
<td bgcolor="#000066"><h3><font color="white">Policy and Procedures</f></h3></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*.shtml">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*.shtml">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*.shtml">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*.shtml">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">*</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
END OF INDEX FILE
You can ignore the JS coding, and I know there are a few things in there not done right or optimally... but what I am really looking for is an answer as to how to make the tables stay side by side with the side SSI menu and have a scroll bar appear instead of them shifting down.
Thanks in advance!
-Tim
I am building a resource internal site for where I work.
After building a frames version that sucked, I found SSI and started working in .shtml files.
everything was going fine till I hit a very odd snag...
I built a top and side menu system in SSI but I am having severe trouble with the side menu when I resize the window...
screenshots:
Here is how it looks full screen:
http://i17.photobucket.com/albums/b58/captainbarre/CS-index-1.jpg
But then if you make the window smaller, I have 2 tables to list the different links off the index page. When the tables go over the edge of the page, they shift to below the side menu.
http://i17.photobucket.com/albums/b58/captainbarre/CS-index-error-1.jpg
I just can't seem to get the tables to stay side by side with the SSI side menu and have a scroll bar appear instead of them shifting down...
Here is the code, don't make fun, I am no pro at this, just a couple classes from college :p
SSI menu file:
<table bgcolor="#000066" width="100%" height="100" border="1">
<tr>
<th width="100" scope="col"><img src="images/xyz.jpg" width="165" height="150"></th>
<th width="%" scope="col">
<table align=center border="0" bordercolor="#871D1D" width="500" bgcolor="#000066">
<tr>
<td>
<p align=center><span style='font-size:
40.0pt'><font color="white">XYZ CALLSHARE</f><o:p></o:p></span></p>
</td>
</tr>
</table>
<br>
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// -->
</script>
<style>
#sddm ul
{ margin: 0;
padding: 0;
z-index: 30
display: center;}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 14px arial}
#sddm li a
{ display: block;
margin: 0 30px 0 0;
padding: 5px 10px;
width: 90px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
</style>
<table align=center border="1" bordercolor="#871D1D" width="665" background="images/background.jpg">
<tr>
<td>
<!-- div class="sample" style="margin-bottom: 15px;height:42px;">
<span -->
<ul id="sddm">
<li><a href="home.html" target="mainframe">Home</a>
</li>
<li><a href="http://techshare/" target=_blank>Techshare</a>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Visa Credit Card</a>
<a href="#">Paypal</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Download Help File</a>
<a href="#">Read online</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">E-mail</a>
<a href="#">Submit Request Form</a>
<a href="#">Call Center</a>
</div>
</li>
</ul>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
<table bgcolor="#000066" height="100%" border="1" style="float: left;">
<tr>
<th width="165" valign="top" scope="col">
<br>
<p align="center">
<font color="white">
<a href="groupwise.shtml">HOME</a>
</f>
</P>
<script type="text/javascript" language="javascript" src="find1.js">
</script>
<br>
<table border="1" bordercolor="#871D1D" width="100%" background="images/background.jpg">
<tr>
<td><b><font color="black">Contact Numbers</f></b><br>
<img src="images/bullet.gif"><a href="" target=_menu>After Hour Contacts</a>
<br><img src="images/bullet.gif">
<br><img src="images/bullet.gif">
<br><img src="images/bullet.gif">
<br><img src="images/bullet.gif">
<br><img src="images/bullet.gif">
</td>
</tr>
</table>
</th>
</tr>
</table>
END OF SSI FILE
CONTENTS OF INDEX FILE - Index.shtml :
<html>
<head>
<title>Callshare</title>
</head>
<body background="images/background.jpg">
<!--#include virtual="menu.ssi"-->
<br>
<table align="center" width="785">
<tr>
<td width="356">
<table valign="top" cellspacing="5" width="100%" border="1">
<tr>
<td bgcolor="#000066"><h3><font color="white">Policy and Procedures</f></h3></td>
</tr>
<tr>
<td><img src="images/bullet.gif" />
<a href="" target="_blank">
Policy and Procedures</a></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">Incident Management</a></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">Service Level Agreements</a></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">Support Items Transfer List</a></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">IS Project Portfolio (Intranet)</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="413">
<table valign="top" cellspacing="5" width="100%" border="1">
<tr>
<td bgcolor="#000066"><h3><font color="white">Policy and Procedures</f></h3></td>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*.shtml">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*.shtml">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*.shtml">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="*.shtml">*</a>
</tr>
<tr>
<td><img src="images/bullet.gif" /><a href="" target="_blank">*</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
END OF INDEX FILE
You can ignore the JS coding, and I know there are a few things in there not done right or optimally... but what I am really looking for is an answer as to how to make the tables stay side by side with the side SSI menu and have a scroll bar appear instead of them shifting down.
Thanks in advance!
-Tim