Comparison of major players like AWS, Microsoft Azure, IBM Bluemix, and Google Cloud Platform
Course Of The Month
10 days, 22 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
How to layout required web layout (as per attached screenshot)?
Posted on 2014-12-07
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:
Thank you and hope to hear soon...
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>
Thank you and hope to hear soon...
[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
3-
3
6 Comments
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
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
Active today
Hello stiebel,
I just tried the exactly what you want:
Still if you need any changes, let me know
Thanks
Edwin
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>
Still if you need any changes, let me know
Thanks
Edwin
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!
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!
Featured Post
You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to count occurrences of each item in an array.
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month10 days, 22 hours left to enroll
632 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.