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
Solved

Centering and resizing a container on a web page

Posted on 2011-02-28
10
591 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
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Follow this checklist to learn more about the 15 things you should never include in an email signature from personal quotes, animated gifs and out-of-date marketing content.
Large Outlook files lead to various unwanted errors and corruption issues. Furthermore, large outlook files can also make Outlook take longer to start-up, search, navigate, and shut-down. So, In this article, i will discuss a method to make your Out…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
To add imagery to an HTML email signature, you have two options available to you. You can either add a logo/image by embedding it directly into the signature or hosting it externally and linking to it. The vast majority of email clients display l…

828 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