[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 629
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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