Javascript Banner Width Problem

**porkchop_001** · 07-12-2010, 07:47 AM

Hi Guys,

I'm having some difficulty re-sizing my JavaScript banner box on a website I'm building at the moment.

You can see it at http://www.thenativedrum.com/website

Look at my source and see if you can help. On line #53 there's a CSS element making the box stretch to 100%. But changing that simply has no effect.

I want to have it quite small - enough that it fits in beside the main heading of the site (Understanding Teenagers).

Thanks in advance

P.S. another thing that bugs me, which happens regularly, is when you initially load the page there'sa mysterious white bar across the bottom of the page. Is that a CSS error? I have no idea how to fix it.

**vwphillips** · 07-12-2010, 09:46 AM

Code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Understanding Teenagers - Bridging the Gap</title>

	<link rel="stylesheet" type="text/css" href="http://www.thenativedrum.com/website/css/stylesheet.css" />
	<link rel="stylesheet" href="http://www.thenativedrum.com/website/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

	<script src="js/cfcoda.js" language="javascript" type="text/javascript" ></script>


	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.thenativedrum.com/website/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="http://www.thenativedrum.com/website/fancybox/jquery.fancybox-1.3.1.js"></script>
	<script type="text/javascript" src="http://www.thenativedrum.com/website/js/fadeslideshow.js">



	<script type="text/javascript">
		$(document).ready(function() {
			/*
			*   Examples - images
			*/

	$("a#single_image").fancybox();

	/* Using custom settings */

	$("a#inline").fancybox({
		'hideOnContentClick': true
	});

	/* Apply fancybox to multiple items */

	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	40,
		'speedOut'		:	200,
		'overlayShow'	:	true
	});

});
	</script>

	<script type="text/javascript">

	var mygallery=new fadeSlideShow({
		wrapperid: "banner", //ID of blank DIV on page to house Slideshow
		dimensions: [100, 80], //width/height of gallery in pixels. Should reflect dimensions of largest image
		imagearray: [
			["http://www.thenativedrum.com/website/images/logo_white.png"],
			["http://www.thenativedrum.com/website/images/button_top_blog.png"],
			["http://www.thenativedrum.com/website/images/training_button.png"] //<--no trailing comma after very last image element!
		],
		displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},
		persist: false, //remember last viewed slide and recall within same session?
		fadeduration: 500, //transition duration (milliseconds)
		descreveal: "ondemand",
		togglerid: ""
	})



	</script>


</head>

<body>

<div id="top-nav">

	<ul>
		<li><a href="#"><img src="images/button_top_charisbel.png" alt="" border="0" /></a></li>
		<li><a href="#"><img src="images/button_top_contact.png" alt="" border="0" /></a></li>
		<li><a href="#"><img src="images/button_top_blog.png" alt="" border="0" /></a></li>
	</ul>

	<img src="images/logo_white.png" alt="logo_white" border="0" />

</div>

<div id="top-title" style="position:relative;">

	<img src="http://www.thenativedrum.com/website/images/heading_top_small.png" alt="heading_top" border="0" />

	<div id="banner" style="position:absolute;left:600px;top:-80px;" ></div>

</div>

<div id="frame">
	<div id="scroller">

		<div id="content">
			<div class="section" id="home-pane">

			<div id="content-side">
				<img src="images/yam_1.png" alt="yam_1" border="0" />
			</div>

			<h1>Home</h1>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>


			</div>


			<div class="section" id="about-pane">
			<div id="content-side">
			<img src="images/yam.png" alt="yam" border="0" />
			</div>
						<h1>About</h1>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

			</div>

			<div class="section" id="resources-pane">

			<div id="content-side">
				<img src="images/yam_2.png" alt="yam_2" border="0" />
			</div>

						<h1>Resources</h1>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>


			</div>

		</div>

	</div>

</div>

<div id="nav-box">

<div id="toolbarwrap">

	<ul id="toolbar" class="navigation">

		<li id="home-tab"><a href="#" onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false"><img src="images/home_button.png" alt="home_button" border="0" /></a></li>

		<li id="about-tab"><a href="#" onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false"><img src="images/about_button.png" alt="about_button" border="0" /></a></li>


		<li id="resources-tab"><a href="#" onclick="javascript:ScrollSection('resources-pane', 'scroller', 'home-pane'); return false"><img src="images/resources_button.png" alt="resources_button" border="0" /></a></li>

		<li id="training-tab"><a href="#" onclick="javascript:ScrollSection('training-pane', 'scroller', 'home-pane'); return false"><img src="images/training_button.png" alt="training_button" border="0" /></a></li>

	</ul>
</div>

</div>

</body>

**porkchop_001** · 07-12-2010, 04:20 PM

many thanks vwphillips! Greatly appreciated.

Any clues as to why that white bar appears?

Thread: Javascript Banner Width Problem

Thread Tools

Search Thread

Javascript Banner Width Problem

Bookmarks

Bookmarks

Posting Permissions