Results 1 to 8 of 8

Thread: Issues positioning images for different screen sizes

  1. #1
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Issues positioning images for different screen sizes

    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

    Code:
    <!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>
    Last edited by jscheuer1; 09-01-2013 at 08:27 AM. Reason: Format

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 139 Times in 134 Posts
    Blog Entries
    32

    Default

    You can scale an image by putting it in a div having a certain percent-width and then giving the image width: 100%. Example:
    Code:
    <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>
    Last edited by molendijk; 08-30-2013 at 01:23 PM. Reason: Correction

  3. #3
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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:

    Code:
    #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>

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 139 Times in 134 Posts
    Blog Entries
    32

    Default

    That might be the consequence of the fact that you have the width in percentages now, and the top / left in pixels?

  5. #5
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Anyone have any other Ideas?

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 139 Times in 134 Posts
    Blog Entries
    32

    Default

    I'm almost sure the problem is due to the mix of pixels and percentages.
    Some time ago, I visited this site 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. (Go, for instance, to homo habilis then resize the window. The video picture will resize too and 'keeps in place'.

  7. #7
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 139 Times in 134 Posts
    Blog Entries
    32

    Default

    If an element has position: relative, it cannot be positioned vertically width percentages (using top). So this won't work:
    Code:
    <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:
    Code:
    <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>
    Last edited by molendijk; 09-01-2013 at 10:00 AM.

Similar Threads

  1. Crawler positioning on screen
    By 3dkingpin in forum HTML
    Replies: 6
    Last Post: 01-25-2012, 02:35 AM
  2. Splash Screen positioning
    By BMA in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-20-2011, 04:28 PM
  3. positioning: div box moves off screen
    By k_rizza in forum CSS
    Replies: 5
    Last Post: 11-05-2008, 07:41 PM
  4. Images of differing sizes with Rom Image Rollover?
    By AshleyQuick in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-18-2007, 01:38 AM
  5. Make page fit all screen sizes
    By Jamcan in forum HTML
    Replies: 3
    Last Post: 12-10-2006, 05:44 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •