612wharfavenue Posted March 11, 2012 Share Posted March 11, 2012 I have two images, the first (nameplate) i have set to be ontop and centered, whose left side "hits" the side of the window when the window gets small enough like its supposed to. The second is set beneath it (silverplate) and is smaller than nameplate(1500x800). I want this to be centered too so that when the browser is resized it follows the nameplate and doesnt move against it or go out of window. I cant seem to achieve this effect with any combination of positioning and nested divs, the silverplate always goes off the left side of the window and tracks different than the nameplate. Why dont both images behave the same? How would i make them do that? <style>#nameplate { top:0px; height:1500px; z-index:90; height:1500px; overflow:visible;} .img { position:relative; display:inherit; margin-left:auto; margin-right:auto;}</style></head> <body bgcolor="#00FF33" style="margin:0px; padding:0px; max-height:1500px; overflow:visible;"><div id="nameplate"><img src="Assets/NamePlate.png" style=" z-index:98; opacity:0.5;" class="img" /> <img src="Assets/SilverPlate.png" style="z-index:95; left:-300px; top: -1000px; width:100px; height:100px;" class="img"/></div> Link to comment Share on other sites More sharing options...
thescientist Posted March 12, 2012 Share Posted March 12, 2012 can your clarify the issue? Do you just want two images in a div to be centered? Link to comment Share on other sites More sharing options...
thescientist Posted March 12, 2012 Share Posted March 12, 2012 Either way I would ditch all the postioning, z-indexing, etc. to center inline elements, you can use text-align: center on their parent in the CSS. Link to comment Share on other sites More sharing options...
612wharfavenue Posted March 15, 2012 Author Share Posted March 15, 2012 thanks for the response, i tried text inline on the div after removing all the stuff u said to, and as a result the two images no longer sit atop one another, just side by side. Also when i tried to animate one image both images moved, even though i only referenced one of them through a different id. So i have two images, one is a large image and the other is slightly smaller. The smaller one sits atop the larger, and is animated to move once on page load. The larger one needs to stay centered should the window be resized, the smaller one needs to follow it. Using the code i posted the larger one works fine, but the smaller one seems to move independently of the larger one as soon as the larger one's left edge hits the window while resizing. I've been playing with all sorts of different configurations but i just cant get it to work. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2012 Share Posted March 15, 2012 like this?? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){var x_anim_distance = parseInt($(".img").css("width"))- parseInt($(".imgb").css("width"));var y_anim_distance = parseInt($(".img").css("height"))-parseInt($(".imgb").css("height"));$(".imgb").animate({"left": x_anim_distance+"px"}, "slow", "linear", function(){$(".imgb").animate({"top": y_anim_distance+"px"}, "slow", "linear", function(){$(".imgb").animate({"left": "0"}, "slow", "linear", function(){$(".imgb").animate({"top": "0"}, "slow", "linear", function(){$(".imgb").animate({"left": (x_anim_distance/2)+"px", "top": (y_anim_distance/2)+"px"}, "slow", "linear")});});});});});/*--*//*]]>*/</script><style type="text/css">#nameplate {height:1500px;overflow:visible;width:120px;position:relative;margin:100px auto 0;}.img {width: 120px;height:120px;opacity:0.5;}.imgb {position:absolute;top:0px;left:0px;width:100px;height:100px;}</style></head><body bgcolor="#00FF33" style="margin:0px; padding:0px; max-height:1500px; overflow:visible;"><div id="nameplate"><img src="Assets/NamePlate.png" class="img" /><img src="Assets/SilverPlate.png" class="imgb"/></div></body></html> Link to comment Share on other sites More sharing options...
612wharfavenue Posted March 16, 2012 Author Share Posted March 16, 2012 No, that doesnt remain centered in the window, make the larger image size 1000x1000. So theres no way to make two images center together? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2012 Share Posted March 16, 2012 make the larger image size 1000x1000. So theres no way to make two images center together? then you would make #nameplate the same width as larger image, and by magic, ta-da it become centred again. Link to comment Share on other sites More sharing options...
612wharfavenue Posted March 16, 2012 Author Share Posted March 16, 2012 Oh, that did it. I dont get this whole div stuff, i take it to work like a mask layer in after effects, like a container with a window that you can move around and all its contents will move with it, yet when i try to apply the same principles it doesnt work. Like this example, i wanted to center the contents of a div, so originally i set the margin of the div to auto and the position of its contents relative to the div, but that didnt work, though i did manage to get something to work by setting the margins of the image layer to auto, but then the images adjusted differently. Now it turns out the solution is to set the div position relative to itself, then use no positioning for the underimage and set the over image to have absolute positioning, which ive been told you should never use cause no browser config is the same and absolute positioning isnt responsive to that. Ive read the explanations on the different positioning styles but they dont behave the way they are described, like for instance why should i set the div position relative to itself? Why does the div need positioning at all? And yet when i remove the relative positioning on the div what happens but the over image, which should be IN the div, goes outside of the div and ends up in the corner of the page. That make absolutely no sense from the way divs and positioning are described. If i have a div thats 1000x1000, then it shouldnt matter where i place an inner element, it should never go outside of that 1000x1000 window. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2012 Share Posted March 16, 2012 For overlapping images, using positioning is the ideal option, its when you use positioning for web page layout header, sidepanel main content footer etc, thats when it becomes a massive headache. using position: absolute; means the element is taken out of the workflow of other elements, it occupies no space, and other element will fill the void. position: relative; is used with position: absolute; as the default new area where position: absolute; element is placed, normally if you set left:0; top:0; it would place itself in the the top left corner of the browser screen, whereas if placeed in a position: relative element, width: 800px; height: 600px; margin: 0 auto; to centre it horizontal within the browser window, it would position itself at the top left corner of this centered position relative element instead. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.