homepage Welcome to WebmasterWorld Guest from 54.234.147.84
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Me thinks I'm out of my depth.
Using CSS to make a scrolling image container...
Aussie Nuf Man




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

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




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

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved