Log in

View Full Version : Issues positioning images for different screen sizes


chadlexmorgan
08-30-2013, 11:34 AM
Link to site: http://www.rezzurectiontaxidermy.com

Problem: I have 2 images that are positioned correctly in a 20" monitor but if you look at in a 15" or wide screen the images get cut off at the bottom.

Question: Is there a way to position these so that they will adjust to fit the screen of any screen size?

Highlighted in red are the 2 images



<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rezzurrection Taxedermy</title>
t<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
<style type="text/css">
#fadeshow1 {
position: absolute !important;
bottom: 30px;
left: 50%;
margin-left: -500px;
}
#slideshowtoggler {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
#slideshowholder {
position: fixed;
bottom: -530px;
left: 0;
width: 100%;
}
#coninfo {
position: absolute !important;
bottom: 30px;
left: 50%;
margin-left: -500px;
}

#map_canvas {
position: absolute;
bottom: 30px;
left: 125%;
margin-left: -1000px;
width: 500px;
height: 500px;
}

#contactholder{
position: fixed;
bottom: -530px;
left: 0;
width: 100%;
}

#Main {
position:absolute;
width: 100%;
height: 100%;
top: 390px;
left: 50%;
margin-left: -500px;

}

html, body {
margin: 0;
padding: 0;
height: 100%;
overflow:hidden;
}

#filter{
position: fixed;
}

</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.delay.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>



<script>
$(document).ready(function() {
$('.item4 a').click(function(){
$('#contactholder').animate({bottom: 0}, 800); return false;
});
$('#menu li a').not('.item4 a').click(function(){
$('#contactholder').animate({bottom: -530});
});
$('.item2 a').click(function(){
$('#slideshowholder').animate({bottom: 0}, 800); return false;
});
$('#menu li a').not('.item2 a').click(function(){
$('#slideshowholder').animate({bottom: -530});
});
$('.item0 a').click(function(){
$('#Main').animate({bottom: 0}, 800); return false;
});
$('#menu li a').not('.item0 a').click(function(){
$('#Main').animate({bottom: -530});
});




$("#menu, #white_line, #logo, #Main").css("opacity","0");
$("#menu").stop().animate({
opacity: 0.9,
marginLeft: '50px'
}, 2400, 'easeInSine');
$("#white_line, #logo, #Main").stop().animate(
{opacity: 0.7},
{duration:2400,easing: 'easeInSine'
})

$('#menu span').mouseenter(function(element) {
$("#menu ul li").css("opacity","1");
$('#white_line').stop().animate(
{top: 40, height:290},
{duration:500,easing: 'easeOutBack'}
)
$("#menu ul li").eachDelay(function(){
$(this).stop().animate({
opacity: 1,
marginLeft: '0px',
backgroundPosition: "150px 0px"
}, 600, 'easeOutBack');
}, 30);
});

$('#menu').mouseleave(function(element) {
$("#menu ul li").eachDelay(function(index){
$(this).stop().animate({
opacity: 0,
marginLeft: '-200px',
backgroundPosition: "150px 0px"
}, 600, 'linear');
if(index == $("#menu ul li").size() -1){
$('#white_line').stop().animate(
{top: 79, height:1},
{duration:600,easing: 'easeInBack'
})
}
}, 30);


});




$('#menu ul li').mouseenter(function(element) {
$('#menu ul li').not(this).stop().animate({
backgroundPosition: "150px 0px",
opacity: '0.5'
}, 500, 'linear');
$(this).stop().animate({
backgroundPosition: "300px 0px",
opacity: '1'
}, 600, 'easeOutBounce');
$(this).find('a').css("color","#916153");
});

$('#menu ul li').mouseleave(function(element) {
$(this).stop().animate({
backgroundPosition: "150px 0px",
opacity: '1'
}, 200, 'linear');
$(this).find('a').css("color","#000");
});

});
</script>

<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">
var $ = jQuery;
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["./Rez_Pics/Slide1.png"],
["./Rez_Pics/Slide2.png"],
["./Rez_Pics/Slide3.png"],
["./Rez_Pics/Slide4.png"],
["./Rez_Pics/Slide5.png"],
["./Rez_Pics/Slide6.png"],
["./Rez_Pics/Slide7.png"],
["./Rez_Pics/Slide8.png"] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "none",
togglerid: "slideshowtoggler"
})

</script>
<!--[if lt IE 9]>
<style type="text/css">
#bg, Main {
background-image: none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
</head>
<body >

<div id="pagewrap">

<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;overflow:hidden;"></div>


<div id="content1">
<div id="filter"></div>
<div id="white_line"></div>
<div id="menu">
<span></span>
<ul>
<li class="item0"><a href="#">Home</a></li>
<li class="item1"><a href="#">Gallery</a></li>
<li class="item2"><a href="#">Field Care</a></li>
<li class="item3"><a href="#">Braggin' Rights</a></li>
<li class="item4"><a href="#">Contact</a></li>

</ul>

</div>

</div>
<div id="logo"><a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png" style="border: 0;"></a></div>
<div id="Main"><img src="./Rez_Pics/Main_Body.png"></div>
<div id="FaceBook"><a href="https://www.facebook.com/RezzurrectionTaxidermy" rel="external" ><img src="./Rez_Pics/camo-facebook-icon.png" style="border: 0;"/></a></div>
</div>

<div id="slideshowholder">
<div id="fadeshow1"></div>
<div id="slideshowtoggler">
<a href="#" class="prev">
<img src="./Rez_Pics/left.png" style="border-width:0" /></a>
<span class="status" style="margin:0 50px; font-weight:bold"></span>
<a href="#" class="next">
<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
</div>
</div>
<div id="contactholder">
<div id="coninfo"><img src="./Rez_Pics/ContactInfo.png"></div>
<div id="map_canvas">
<iframe width="500" height="500" frameborder="0" scrolling="no" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=2788+highway+ff,+eureka+mo&amp;aq=&amp;sll=38.304661,-92.437099&amp;sspn=6.886173,9.876709&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=2788+FF,+Eureka,+Missouri+63025&amp;ll=38.460982,-90.65094&amp;spn=0.033604,0.04283&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
</div>
</div>






</body>
</html>
molendijk
08-30-2013, 01:12 PM
You can scale an image by putting it in a div having a certain percent-width and then giving the image width: 100%. Example:

<div style="position:relative; left:20px; top:30px; width:33.3%">
<img src="http://drugline.org/img/term/h-erectus-6719_1.jpg" style="position: relative; width:100%" alt="">
</div>
chadlexmorgan
08-30-2013, 11:38 PM
That kind of works. Looks great in a 21" wide screen but the img shrinks considerably on a 21" square monitor. If I go up in the width % it starts to get cut off on the bottom on the wide, if I go down it gets harder to read since there is text in the img.

this is the code that I changed:



#Main {
position:relative;
width: 65%;
top: 105px;
left: 220px;
}

<div id="Main"><img src="./Rez_Pics/Main_Body.png" style="position:relative;width:100%;"></div>
molendijk
08-31-2013, 12:11 AM
That might be the consequence of the fact that you have the width in percentages now, and the top / left in pixels?
chadlexmorgan
08-31-2013, 07:17 PM
Anyone have any other Ideas?
molendijk
08-31-2013, 10:48 PM
I'm almost sure the problem is due to the mix of pixels and percentages.
Some time ago, I visited this site (http://www.webconfs.com/web-page-screen-resolution.php) to see how a site of mine would look like with different screen resolutions. It looked horrible. Then I decided to only use percentages for the images and the problem was gone, as you can see here (http://mesdomaines.nu/extincthumanspeciesandhomosapiens). (Go, for instance, to homo habilis (http://mesdomaines.nu/extincthumanspeciesandhomosapiens/index.html?homo_habilis.html) then resize the window. The video picture will resize too and 'keeps in place'.
chadlexmorgan
09-01-2013, 01:08 AM
Ok been trying that but can't seem to get it to move downward. Got it positioned horizontally not vertically though. Changing the % doesn't do anything. Suggestions?
molendijk
09-01-2013, 09:22 AM
If an element has position: relative, it cannot be positioned vertically width percentages (using top). So this won't work:

<div style="position:relative; left:20%; top:10%; width:10%">
<img src="http://drugline.org/img/term/h-erectus-6719_1.jpg" style="position: relative; width:100%" alt="">
</div>
Using margin-top instead of top will solve the problem:

<div style="position:relative; left:20%; margin-top:10%; width:10%">
<img src="http://drugline.org/img/term/h-erectus-6719_1.jpg" style="position: relative; width:100%" alt="">
</div>