Welcome to WebmasterWorld Guest from 54.167.22.37

Forum Moderators: not2easy

Message Too Old, No Replies

Me thinks I'm out of my depth.

Using CSS to make a scrolling image container...

     

Aussie Nuf Man

6:02 am on May 4, 2010 (gmt 0)

5+ Year Member



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>

milosevic

2:35 pm on May 4, 2010 (gmt 0)

5+ Year Member



I think this is something you will need to use JavaScript in order to achieve.

Does the code you have pasted actually have anything to do with this functionality, or is it just the page that this functionality would appear on?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month