Me thinks I'm out of my depth.

I was hoping to maybe make a 'home' page instead of using the 'overview' as the 'home' page of my site. I would like it to have a scrolling selection of images which the user can navigate left and right through using buttons that only appear when a hover or similar command is used. When the user's mouse is away from this box/rectangle/thingie it scrolls right to left automatically.

FYI. I never used css prior to 3 days ago. I think I have done alright. If you can point me in the right direction, I am sure I will be able to figure it out. I use Dreamweaver CS4.

I'm pretty sure already I will have to start fresh on the HTML side of things and remove the tables and replace with BOX and DIV.

Everything CSS here I have found, modified, adapted, thrown out, un-recycled then used from this forum.

Current .css sheet.



a:link {text-decoration:none; color: #CCC}
a:visited {text-decoration:none; color:#CCC}
a:hover {text-decoration:underline; color:#CCC}
a:active {text-decoration:underline; color:#CCC}
img {border-style: none;}
.table_bg {background:#905543 no-repeat bottom right;font-family: Arial, Helvetica, sans-serif;color: #fff;border-width: thin;border-style: solid;border-color: #905543;overflow:visible;}
.table_bg h1 {font-size: xx-large;color: #FFF;}
.table_bg h2 {font-size: x-large;color: #FFF;}
.table_bg h3 {font-size: large;color: #FFF;}
.table_bg p {font-size: medium;color: #FFF;}
.top_line {border:thin;border-color:#905543;border-top-style: solid;border-right-style: none;border-bottom-style: none;border-left-style: none;font-size: smaller;}
div.index {width:98%; min-height:400px; padding-top:0;padding-left:10px;padding-right:10;padding-bottom:0; border-bottom:50; margin:0px; background:url(bg_index.jpg) no-repeat bottom right;}
div.service {width:98%; min-height:400px; padding-top:0;padding-left:10px;padding-right:10;padding-bottom:0; border-bottom:50; margin:0px; background:url(bg_service.jpg) no-repeat bottom right;}
div.brand {width:98%; min-height:400px; padding-top:0;padding-left:10px;padding-right:10;padding-bottom:0; border-bottom:50; margin:0px; background:url(bg_brand.jpg) no-repeat bottom right;}
div.filter {width:98%; min-height:400px; padding-top:0;padding-left:10px;padding-right:10;padding-bottom:0; border-bottom:50; margin:0px; background:url(bg_filter.jpg) no-repeat bottom right;}
div.policy {width:98%; min-height:400px; padding-top:0;padding-left:10px;padding-right:10;padding-bottom:0; border-bottom:50; margin:0px; background:url(bg_policy.jpg) no-repeat bottom right;}
div.recipe {width:98%; min-height:400px; padding-top:0;padding-left:10px;padding-right:10;padding-bottom:0; border-bottom:50; margin:0px; background:url(bg_recipe.jpg) no-repeat bottom right;}
div.contact {width:98%; min-height:400px; padding-top:0;padding-left:10px;padding-right:10;padding-bottom:0; border-bottom:50; margin:0px; background:url(bg_contact.jpg) no-repeat bottom right;}
div.disclaim {width:98%; min-height:400px; padding-top:0;padding-left:10px;padding-right:10;padding-bottom:0; border-bottom:50; margin:0px; background:url(bg_disclaim.jpg) no-repeat bottom right;}
#overview{display: block; width: 100px; height: 50px; background: url(tabs.gif) 0px 0px; background-position: 0px 0px;}
#overview:hover{background: url(tabs.gif); background-position: 200px 0px;}
#overview span{display:none;}
#service{display: block; width: 100px; height: 50px; background: url(tabs.gif) 0px 0px; background-position: 0px -50px;}
#service:hover{background: url(tabs.gif); background-position: 200px -50px;}
#service span{display:none;}
#brands{display: block; width: 100px; height: 50px; background: url(tabs.gif) 0px 0px; background-position: 0px -100px;}
#brands:hover{background: url(tabs.gif); background-position: 200px -100px;}
#brands span{display:none;}
#filters{display: block; width: 100px; height: 50px; background: url(tabs.gif) 0px 0px; background-position: 0px -150px;}
#filters:hover{background: url(tabs.gif); background-position: 200px -150px;}
#filters span{display:none;}
#policies{display: block; width: 100px; height: 50px; background: url(tabs.gif) 0px 0px; background-position: 0px -200px;}
#policies:hover{background: url(tabs.gif); background-position: 200px -200px;}
#policies span{display:none;}
#recipes{display: block; width: 100px; height: 50px; background: url(tabs.gif) 0px 0px; background-position: 0px -250px;}
#recipes:hover{background: url(tabs.gif); background-position: 200px -250px;}
#recipes span{display:none;}
#contact{display: block; width: 100px; height: 50px; background: url(tabs.gif) 0px 0px; background-position: 0px -300px;}
#contact:hover{background: url(tabs.gif); background-position: 200px -300px;}
#contact span{display:none;}

This is the html for the 'Overview' 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>
<LINK href="resources/esau.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="5">
<table width="780" align="center" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="780" height="140" colspan="2"><img src="resources/title.jpg" width="780" height="140" alt="Esales Australia" longdesc="http://www.mysite.com.au/images/background/title.jpg" /></td>
 </tr>
 <tr>
 <td width="100"></td>
 <td align="absbottom"><img src="resources/top.jpg" width="680" height="18" align="absbottom" /></td>
 </tr>
 <tr>
 <td width="100" valign="top"><a id="overview" href="index.html" title="Overview"><span>Overview</span></a>
 <a id="service" href="service.html" title="Service"><span>Service</span></a>
 <a id="brands" href="brands.html" title="Brands"><span>Brands</span></a>
 <a id="filters" href="filters.html" title="Filters"><span>Filters</span></a>
 <a id="policies" href="policies.html" title="Policies"><span>Policies</span></a>
 <a id="recipes" href="recipes.html" title="Recipes"><span>Recipes</span></a>
 <a id="contact" href="contact.html" title="contact"><span>Contact</span></a>
 </td>
 <td id="content" valign="top" bgcolor="#905543" class="table_bg"><div class="index">
 <h1>Overview</h1>
 </div></td>
 </tr>
 <tr><td width="100"></td></tr>
 <tr>
 <td width="100"></td>
 <td height="12"><img src="resources/bottom.jpg" width="680" height="18" /></td>
 </tr>
 <tr>
 <td colspan="2"></td>
 <td width="628"></td>
 </tr>
 <tr>
 <td colspan="2" height="10"></td>
 <td class="top_line"></td>
 </tr>
 <tr>
 <td colspan="2" class="top_line" align="right"><p><a href="disclaimer.html">Disclaimer</a> | <a href="mailto:info@myemail.com.au">Created By my companies Web Development Team</a></p></td>
 <td class="top_line"></td>
 </tr>
 <tr>
 <td colspan="2" height="10"></td>
 <td></td>
 </tr>
</table>
</div>
</body>
</html>

Me thinks I'm out of my depth.

Using CSS to make a scrolling image container...

Aussie Nuf Man

milosevic

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week