Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

How to layout required web layout (as per attached screenshot)?

Posted on 2014-12-07

1 solution

Medium Priority

253 Views

Last Modified: 2014-12-08

Dear EE experts,

Please see the attached file

for the screenshot image of our plan layout...

Referring to the left part of the site, we would like to add some image at the top (may it be animated or still image), but the width will not be over to 50% cross to the image on the right...
Same as with the wordings with background color on the middle (as per on the attached image).
When we resize the browser to small, the image on the right moves and the image adjust its size, we want the image & wordings be the same, will adjust its size and location. During our testing, the background color overlays on the image on the right, the wordings don't adjust itself. That's why we would like to ask for expert support and hope anyone could help us...

We attached our current code:

<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class='no-js' lang='en'>
	<!--<![endif]-->
	<head>
		<meta charset='utf-8' />
		<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
		<title>STE e-Greeting</title>
		
		<meta content='jQuery Plugin to make jQuery Cycle Plugin work as a fullscreen background image slideshow' name='description' />
		<meta content='Aaron Vanderzwan' name='author' />
		
		<meta name="distribution" content="global" />
		<meta name="language" content="en" />
		<meta content='width=device-width, initial-scale=1.0' name='viewport' />
		
		<link rel="stylesheet" href="css/jquery.maximage.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="css/screen.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
		
		<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		     
        <style type="text/css" media="screen">	
			body	{
				width: 100%;
					}
					
			#maximage {
				display:none;
				width:80%;
		
				text-align:right;
			 
			/*		position:fixed;
		margin-right:200px;
			width: 1024px; 
			
			*/ 
				/*margin-left: 350px;*/

			}
			
			/*Set my logo in bottom left*/
			#logo {
				bottom:30px;
				height:auto;
				left:0;
				position:absolute;
				width:100%;
				text-align:center;
				z-index:1000;
			}
		</style>
		
		<!--[if IE 6]>
			<style type="text/css" media="screen">
				/*I don't feel like messing with pngs for this browser... sorry*/
				#gradient {display:none;}
			</style>
		<![endif]-->
	</head>
    <table style="border:thick; border-color:#000">
	<body style="background-color:#999">
		<!--<a href="http://blog.aaronvanderzwan.com/maximage-2-0/" id="logo"><img src="../lib/images/demo/logo.png" alt="MaxImage: Uses jQuery Cycle Plugin to create background slideshows" /></a>
        -->
		
        <div style="padding-left:30px; padding-top:300px; padding-right:50px;">
        	<div style="background-color:#FFF">
        	<font style="float:left; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-style:normal; font-size:16px; color:#FFF;">STIEBEL ELTRON e-Greeting!
            </font>
            </div>
        </div>
		<div id="maximage" style="padding-right:50px;">
			<img src="Products/DHC_EC.png" alt="" width="1243" height="2214" />
			<img src="Products/DX_35E_45E.png" alt="" width="1273" height="1808" />
			<img src="Products/WS 35 E.png" alt="" width="1348" height="2206" />
			<img src="Products/WS 45 E.png" alt="" width="1341" height="2195" />
            <img src="Products/XG 35 EC.png" alt="" width="1106" height="1739" />
			<img src="Products/XG 45 EC.png" alt="" width="1106" height="1739" />
			

		</div>
       
	
		<p>
		  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
		  <script src="js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
		  <script src="js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
		  
		  <script type="text/javascript" charset="utf-8">
			$(function(){
				// Trigger maximage
				$('#maximage').maximage({
					cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size
					backgroundSize: function( $item ){
						// Contain Portrait
						if ($item.data('h') > $item.data('w')) {
							if ($.Window.data('w') / $.Window.data('h') < $item.data('ar')) {
								$item
									.height(($.Window.data('w') / $item.data('ar')).toFixed(0))
									.width($.Window.data('w'));
							} else {
								$item
									.height($.Window.data('h'))
									.width(($.Window.data('h') * $item.data('ar')).toFixed(0));
							}
						} else {
							if ($.Window.data('w') / $.Window.data('h') < $item.data('ar')) {
								$item
									.height($.Window.data('h'))
									.width(($.Window.data('h') * $item.data('ar')).toFixed(0));
							} else {
								$item
									.height(($.Window.data('w') / $item.data('ar')).toFixed(0))
									.width($.Window.data('w'));
							}
						}
					},
					onImagesLoaded: function(){
						$('#maximage').fadeIn();
					}
				});
			});
		</script>
		  
		  <!-- DON'T USE THIS: Insert Google Analytics code here -->
      <script type="text/javascript">
			
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-733524-1']);
		  _gaq.push(['_trackPageview']);
			
		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();

		</script>
         
	</body>
  </table>
</html>

Open in new window

Thank you and hope to hear soon...

Comment

Question by:Stiebel Eltron

[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

Join The Community

6 Comments

LVL 15

Expert Comment

by:Edwin Hoffer

ID: 404862272014-12-07

Hello stiebel,

Can you please share the images also?

Thanks
Edwin

Author Comment

by:Stiebel Eltron

ID: 404862542014-12-07

Hi there Edwin!
Thank you for the prompt response...

We're attaching a zip file, it includes the CSSS, js, plugins, and image folders... so you could test it with your side...

Thank you & hope to hear again soon...

:)
forEE.zip

LVL 15

Accepted Solution

by:Edwin Hoffer

Edwin Hoffer earned 2000 total points

ID: 404862702014-12-07

Hello stiebel,

I just tried the exactly what you want:

<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class='no-js' lang='en'>
	<!--<![endif]-->
	<head>
		<meta charset='utf-8' />
		<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
		<title>STE e-Greeting</title>
		
		<meta content='jQuery Plugin to make jQuery Cycle Plugin work as a fullscreen background image slideshow' name='description' />
		<meta content='Aaron Vanderzwan' name='author' />
		
		<meta name="distribution" content="global" />
		<meta name="language" content="en" />
		<meta content='width=device-width, initial-scale=1.0' name='viewport' />
		
		<link rel="stylesheet" href="css/jquery.maximage.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="css/screen.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
		
		<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		     
        <style type="text/css" media="screen">	
			body	{
				width: 100%;
					}
					
			#maximage {
				display:none;
				width:80%;
		
				text-align:right;
			 
			/*		position:fixed;
		margin-right:200px;
			width: 1024px; 
			
			*/ 
				/*margin-left: 350px;*/

			}
			
			/*Set my logo in bottom left*/
			#logo {
				bottom:30px;
				height:auto;
				left:0;
				position:absolute;
				width:100%;
				text-align:center;
				z-index:1000;
			}
		</style>
		
		<!--[if IE 6]>
			<style type="text/css" media="screen">
				/*I don't feel like messing with pngs for this browser... sorry*/
				#gradient {display:none;}
			</style>
		<![endif]-->
	</head>
    <table style="border:thick; border-color:#000">
	<body style="background-color:#999">
		<!--<a href="http://blog.aaronvanderzwan.com/maximage-2-0/" id="logo"><img src="../lib/images/demo/logo.png" alt="MaxImage: Uses jQuery Cycle Plugin to create background slideshows" /></a>
        -->
		<div>
		<img src="http://experts.cachefly.net/files/2014/11/25/2a768aca-84d5-4df0-9fc1-69127285e8ba.png" alt="member" style="margin:40px;">
		</div>
        <div style="margin-left:30px; margin-top:125px; margin-right:50px;">
        	<p style="float:left; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-style:normal; font-size:16px; color:#fff;">STIEBEL ELTRON e-Greeting!</p><br />
			<p style="background-color:#fff;width:544px;height:332px;margin-top:12px;margin-left:38px;padding-left:30px;font-size:40px;padding-top:40px;">Some Content Here</p>
        </div>		
		<div id="maximage" style="padding-right:50px;">
			<img src="Products/DHC_EC.png" alt="" width="1243" height="2214" />
			<img src="Products/DX_35E_45E.png" alt="" width="1273" height="1808" />
			<img src="Products/WS 35 E.png" alt="" width="1348" height="2206" />
			<img src="Products/WS 45 E.png" alt="" width="1341" height="2195" />
            <img src="Products/XG 35 EC.png" alt="" width="1106" height="1739" />
			<img src="Products/XG 45 EC.png" alt="" width="1106" height="1739" />
			

		</div>
       
	
		
		  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
		  <script src="js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
		  <script src="js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
		  
		  <script type="text/javascript" charset="utf-8">
			$(function(){
				// Trigger maximage
				$('#maximage').maximage({
					cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size
					backgroundSize: function( $item ){
						// Contain Portrait
						if ($item.data('h') > $item.data('w')) {
							if ($.Window.data('w') / $.Window.data('h') < $item.data('ar')) {
								$item
									.height(($.Window.data('w') / $item.data('ar')).toFixed(0))
									.width($.Window.data('w'));
							} else {
								$item
									.height($.Window.data('h'))
									.width(($.Window.data('h') * $item.data('ar')).toFixed(0));
							}
						} else {
							if ($.Window.data('w') / $.Window.data('h') < $item.data('ar')) {
								$item
									.height($.Window.data('h'))
									.width(($.Window.data('h') * $item.data('ar')).toFixed(0));
							} else {
								$item
									.height(($.Window.data('w') / $item.data('ar')).toFixed(0))
									.width($.Window.data('w'));
							}
						}
					},
					onImagesLoaded: function(){
						$('#maximage').fadeIn();
					}
				});
			});
		</script>
		  
		  <!-- DON'T USE THIS: Insert Google Analytics code here -->
      <script type="text/javascript">
			
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-733524-1']);
		  _gaq.push(['_trackPageview']);
			
		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();

		</script>
         
	</body>
  </table>
</html>

Open in new window

Still if you need any changes, let me know

Thanks
Edwin

Author Closing Comment

by:Stiebel Eltron

ID: 404863402014-12-08

Great! We'll just edit some parts from the script...

But that is what we need...

Thank you & hope to see your support again on our next query.
We'll be posting soon...

Thank you!

LVL 15

Expert Comment

by:Edwin Hoffer

ID: 404863482014-12-08

Sure you can ask any question future if you will have any problem :). Its my pleasure to help you.

Thanks
Edwin

Author Comment

by:Stiebel Eltron

ID: 404863512014-12-08

Thank you!

Featured Post

Question has a verified solution.

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

Why Your Company Website Should Have a FAQ Page

Article by: Lexie

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page

Marketing 101 – The ABCs of a Homepage

Article by: Christian

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…

Web Development

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

Flexible Layouts

Video by: Mark

Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).