Jump to content

Images reacting differently in the same div?


612wharfavenue
 Share

Recommended Posts

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

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

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...