Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 642
  • Last Modified:

Centering and resizing a container on a web page

I am a novice at html.  There is a scrolling image on my website at http://mauitradewinds.com/Virtual%20Tours/TdwVT.htm which I would like to reduce in width and center on the page, regardless of the viewer's browser or screen resolution.  I would appreciate code which can be integrated into the existing page, as well as specication of where that code must be inserted.  I am attaching the css file.  Thanks! default.css
0
ddantes
Asked:
ddantes
  • 5
  • 5
1 Solution
 
Michel PlungjanIT ExpertCommented:
0
 
ddantesAuthor Commented:
Thank you for your comment.  It is useful to the extent that it demonstrates the possibility of centering an object.  But, being a novice with html, I can't apply that example to my scrolling image web page.  What is needed is code which I can integrate into that existing web page, which accomplishes the resizing and centering.
0
 
Michel PlungjanIT ExpertCommented:
here you are.

The link I gave first was not suited to your code

Her is the new CSS  
body {
	color: #0000FF;
	background: white url(images/background.jpg);
	margin: 0px
}
.simply-scroll-container {
/* Container DIV - automatically generated */
	position: absolute;
	min-height: 10em;
	display: table-cell; 
	vertical-align: middle;
}
.simply-scroll-clip {
/* Clip DIV - automatically generated */
	position: relative;
	overflow: hidden;
	z-index: 2;
}
.simply-scroll {
/* Customisable base class for style override DIV */
	width: 2000px;
	height: 400px;
	margin-bottom: 1em;
}
.simply-scroll .simply-scroll-clip {
	width: 2000px;
	height: 400px;
}

Open in new window


and here is the new file  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Tradewinds VTour</title>
<link rel="stylesheet" href="default.css" media="all" type="text/css">
<script language="" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="" type="text/javascript" src="jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="default.css" media="all" type="text/css">
</style>
<script language="" type="text/javascript">
(function($) {
	$(function() { //on DOM ready
	  var top = ($(window).height()-400)/2
		$("#scroller").simplyScroll({
			autoMode: 'loop'
		});
	  $(".simply-scroll-container").css("top",top+"px").show();
	});
})(jQuery);
</script>
</head><body>
<ul id=scroller><li><img src="images/TdwVT.jpg" /></li></ul>
<div id="footer">
<p><font SIZE="+1" FACE="Arial Unicode MS"><!-- Start eXTReMe Non Public Tracker Code V3/5
Login:    tradewds
Help:     https://www.extremetracking.com
Installation instructions:
Copy and paste this code between the two body tags into the
*source* of your pages or in your footer/template. Best is
to use a normal text editor such as notepad. -->
<SCRIPT LANGUAGE="" type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//--></SCRIPT><SCRIPT LANGUAGE="" type="text/javascript"><!--
EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
EXb=EXs.colorDepth:EXb=EXs.pixelDepth;
navigator.javaEnabled()==1?EXjv="y":EXjv="n";
EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
location.protocol=="https:"?EXprot="https":EXprot="http";
EXref?EXref=EXref:EXref=EXd.referrer;EXsrc="src";
EXd.write("<img "+EXsrc+"="+EXprot+"://nht-2.extreme-dm.com",
"/n2.g?login=tradewds&url="+escape(document.URL)+"&pv=&",
"jv="+EXjv+"&j=y&srw="+EXw+"&srb="+EXb+"&",
"l="+escape(EXref)+" height=1 width=1>");//--></SCRIPT><noscript><div id="nneXTReMe"><img SRC="http://nht-2.extreme-dm.com/n2.g?login=tradewds&amp;url=nojs&amp;j=n&amp;jv=n&amp;pv=" WIDTH=1 HEIGHT=1 ALIGN=bottom>
</div></noscript> <!-- End eXTReMe Non Public Tracker Code --></font></p>
</div>
</body></html>

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
ddantesAuthor Commented:
Thank you for supplying the complete code, which removes the mystery of a novice about what to do with the relevant changes!   The remaining part of the question pertains to reducing the width of the centered scroll.  Can you instruct me how to make the scroll occupy a given percentage of the screen width?
0
 
Michel PlungjanIT ExpertCommented:
I think you need to change
width: 2000px;

to

width: 50%;

or

width: 800px;

in the two places
0
 
ddantesAuthor Commented:
I made those two changes, but the scroll still occupies the full screen width.
0
 
Michel PlungjanIT ExpertCommented:
I can look tomorrow
0
 
ddantesAuthor Commented:
No worries.  The previous answrer is sufficient.
0
 
Michel PlungjanIT ExpertCommented:
Here.
 HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Tradewinds VTour</title>
<link rel="stylesheet" href="default.css" media="all" type="text/css">
<script language="" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="" type="text/javascript" src="http://mauitradewinds.com/Virtual%20Tours/jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="default.css" media="all" type="text/css">
</style>
<script language="" type="text/javascript">
(function($) {
	$(function() { //on DOM ready
	  var top = ($(window).height()-400)/2; // 400 is height of viewport - reflect in CSS
	  var left = ($(window).width()-500)/2; // 500 is width of viewport - reflect in CSS
		$("#scroller").simplyScroll({
			autoMode: 'loop'
		});
	  $(".simply-scroll-container").css("top",top+"px").css("left",left+"px").show();
	});
})(jQuery);
</script>
</head><body>
<ul id=scroller><li><img src="http://mauitradewinds.com/Virtual%20Tours/images/TdwVT.jpg" /></li></ul>
</body></html>

Open in new window


CSS:
body {
	color: #0000FF;
	background: white url(images/background.jpg);
	margin: 0px
}
.simply-scroll-container {
/* Container DIV - automatically generated */
	position: absolute;
	min-height: 10em;
	display: table-cell; 
	vertical-align: middle;
}
.simply-scroll-clip {
/* Clip DIV - automatically generated */
	position: relative;
	overflow: hidden;
	z-index: 2;
}
.simply-scroll {
/* Customisable base class for style override DIV */
	width: 500px; /* Width of viewport */
	height: 400px; /* Height of viewport */
	margin-bottom: 1em;
}
.simply-scroll .simply-scroll-clip {
	width: 500px; /* Width of viewport */
	height: 400px; /* Height of viewport */
}

Open in new window

0
 
ddantesAuthor Commented:
Thank you for that!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now