[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Centering and resizing a container on a web page

Posted on 2011-02-28
10
Medium Priority
?
626 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 500 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
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.

 

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

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.
By default Outlook 2016 displays only one time zone in the Calendar. The following article explains how to display two time zones in one calendar view.
There are cases when e.g. an IT administrator wants to have full access and view into selected mailboxes on Exchange server, directly from his own email account in Outlook or Outlook Web Access. This proves useful when for example administrator want…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

656 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