Solved

Centering and resizing a container on a web page

Posted on 2011-02-28
10
608 Views
Last Modified: 2012-05-11
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
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35004177
0
 

Author Comment

by:ddantes
ID: 35004287
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 125 total points
ID: 35004930
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
Independent Software Vendors: 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!

 

Author Comment

by:ddantes
ID: 35009812
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35010045
I think you need to change
width: 2000px;

to

width: 50%;

or

width: 800px;

in the two places
0
 

Author Comment

by:ddantes
ID: 35010319
I made those two changes, but the scroll still occupies the full screen width.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35010577
I can look tomorrow
0
 

Author Comment

by:ddantes
ID: 35014502
No worries.  The previous answrer is sufficient.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35016819
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
 

Author Comment

by:ddantes
ID: 35018897
Thank you for that!
0

Featured Post

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question