I have just started my own business and need to create some form of 'modern' looking web page. I think I have done alright so far. I know tables aresomewhat antiquated however this is what I know how to program. I have also had to teach myself CSS to a
very minimal degree. There is no doubt in my mind that my design is very excessive and could be done a much easier and neater way but I just dont know how.
What I want to do is....
Between the title image and the main body is place a cell with images scrolling right to left.
I have tried with Adobe Flash and Javascript. Both ways I have succeeded in making happen what I want however when the page opens in IE8 it triggers ActiveX warnings. Is there anyway to not have these warning display? I can go to YouTube, Xbox360 etc sites that have Flash and/or ActiveX but they seem to load fine without activeX warnings. What Am I doing wrong?
My generic web page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Esales Australia</title>
<style type="text/css">
<!--
a:link {text-decoration:none; color:#999}
a:visited {text-decoration:none; color:#999}
a:hover {text-decoration:underline; color:#999}
a:active {text-decoration:underline; color:#999}
img {border-style: none;}
.table_bg {
background:#905543 url('images/background/bg_contact.jpg') no-repeat bottom right;
font-family: Arial, Helvetica, sans-serif;
border-width: thin;
border-style: solid;
border-color: #905543;
}
.table_bg h1 {font-size: xx-large;color: #FFF;}
.table_bg h3 {font-size: large;color: #FFF;}
.table_bg p {color: #CCC;}
.table_bg2 {font-family: Arial, Helvetica, sans-serif;}
.table_bg2 {color:#CCC;}
.top_line {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
font-size:smaller;
color:#999;
}
</style>
</head>
<body topmargin="0">
<table width="780" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" align="center"><img src="images/background/title.jpg" width="780" height="140" alt="Esale Australia" /></td>
</tr><tr>
<td width="100" height="18"></td>
<td height="18" colspan="3" align="absbottom"><img src="images/background/top.jpg" width="680" height="18" align="absbottom" /></td>
</tr>
<tr>
<td width="100" height="50"><a href="index.html"><img src="images/tab_behind/tab_index.jpg" width="100" height="50" /></a></td>
<td width="12" rowspan="9" bgcolor="#905543"></td>
<td width="656" rowspan="9" align="left" valign="top" class="table_bg"><br />
</h1></td>
<td width="12" rowspan="9" bgcolor="#905543"> </td>
</tr>
<tr>
<td width="100" height="50"><a href="service.html"><img src="images/tab_behind/tab_service.jpg" alt="" width="100" height="50" /></a></td>
</tr>
<tr>
<td width="100" height="50"><a href="brands.html"><img src="images/tab_behind/tab_brands.jpg" alt="" width="100" height="50" /></a></td>
</tr>
<tr>
<td width="100" height="50"><a href="filters.html"><img src="images/tab_behind/tab_filters.jpg" alt="" width="100" height="50" /></a></td>
</tr>
<tr>
<td width="100" height="50"><a href="policies.html"><img src="images/tab_behind/tab_policies.jpg" alt="" width="100" height="50" /></a></td>
</tr>
<tr>
<td width="100" height="50"><a href="recipes.html"><img src="images/tab_behind/tab_recipes.jpg" alt="" width="100" height="50" /></a></td>
</tr>
<tr>
<td width="100" height="50"><a href="disclaimer.html"><img src="images/tab_behind/tab_disclaimer.jpg" width="100" height="50" /></a></td>
</tr>
<tr>
<td width="100" height="50"><img src="images/tab_select/tab_contact.jpg" alt="" width="100" height="50" /></td>
</tr>
<tr>
<td width="100"> </td>
</tr>
<tr>
<td width="100"> </td>
<td height="12" colspan="3"><img src="images/background/bottom.jpg" width="680" height="18" /></td>
</tr>
<tr>
<td colspan="3"></td>
<td></td>
</tr>
<tr>
<td colspan="3" class="top_line"><div align="right"><a href="mailto:info@example.com">Created By Example.com</a></div></td>
<td class="top_line"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td> </td>
</tr>
</table>
</body>
</html>
A Sample of the JS used to scroll images..
This is what triggers ActiveX warnings. Why and how do I stop it? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>continuous scrolling images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
}
#container {
position:relative;
width:500px;
height:75px;
overflow:hidden;
border: 0;
background-color: #905543;
margin: 0;
}
#div1 {
position:absolute;
left:0px;
top:0px;
width:500px;
height:75px;
}
#div2 {
position:absolute;
left:500px;
top:0px;
width:500px;
height:75px;
}
img {
border: 0;
margin: 0;
float:left;
}
</style>
<script type="text/javascript">
var m=0;
var n=500;
var speed=20;
function scrollPics() {
document.getElementById('div1').style.left=m+'px';
document.getElementById('div2').style.left=n+'px';
m--;
n--;
if(m==-500) {
m=500;
}
if(n==-500) {
n=500;
}
setTimeout('scrollPics()',speed);
}
window.onload=function() {
scrollPics();
}
</script>
</head>
<body>
<div id="container">
<div id="div1">
<img src="images/scroll/001.jpg" alt="">
<img src="images/scroll/002.jpg" alt="">
<img src="images/scroll/003.jpg" alt="">
<img src="images/scroll/004.jpg" alt="">
</div>
<div id="div2">
<img src="images/scroll/001.jpg" alt="">
<img src="images/scroll/002.jpg" alt="">
<img src="images/scroll/003.jpg" alt="">
<img src="images/scroll/004.jpg" alt="">
</div>
</div>
</body>
</html>
The JS used here is a modified version of an example I found on these forums. I do not know how to do this... [edited by: brotherhood_of_LAN at 12:19 am (utc) on May 3, 2010]
[edit reason] Exemplified e-mail address [/edit]
