troubleshooting Question
How to layout required web layout (as per attached screenshot)?
Stiebel Eltron
asked on
asked on
Dear EE experts,
Please see the attached file![Plan lay-out]()
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...
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.