Every time I move the browser the elements move, I would like it to stay in same position. Does anybody have a solution? Thanks in advance for your help. The JSfidle is here: http://jsfiddle.net/cntra/E7Ydz/19/The
HTML:
is as follows:\[code\]<div class="column"> <div id="text-display"> <span id="targetElm">Your Daily Dose of Contrabang</span></div><div class="morphing-tinting"><a href="http://stackoverflow.com/questions/14386048/#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contrabang"><span class="image-wrap" style="position:relative; left: 0px; top:0;display:inline-block;background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center;width: 250px; height: 250px;"></span></a><a href="http://stackoverflow.com/questions/14386048/#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contraswag"><span class="image-wrap " style="position:relative; left: 0px; top:0; display:inline-block; background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center; width: 250px; height: 250px;"></span></a><a href="http://stackoverflow.com/questions/14386048/#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contradads"><span class="image-wrap " style="position:relative; left: 0px; top:0; display:inline-block; background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center; width: 250px; height: 250px;"></span></a></div><div class="cntratop"> <li class="live"> <a target="_blank" href="http://stackoverflow.com/questions/14386048/#">CONTRABANG.TV</a></li> <li><a target="_blank" href="http://stackoverflow.com/questions/14386048/#">MUSIC</a></li> <li><a target="_blank" href="http://stackoverflow.com/questions/14386048/#">FASHION</a></li> <li><a target="_blank" href="http://stackoverflow.com/questions/14386048/#">FEATURES</a></li> <li><a target="_blank" href="http://stackoverflow.com/questions/14386048/#">REVIEWS</a></li> <li><a target="_blank" href="http://stackoverflow.com/questions/14386048/#">NEWS</a></li> <li><a target="_blank" href="http://stackoverflow.com/questions/14386048/#">VIDEOS</a></li> <li><a target="_blank" href="http://stackoverflow.com/questions/14386048/#">EVENTS</a></li> </div>\[/code\]This is the [CSS]\[code\] .cntratop{ font-family: sans-serif; font-size: 12.5px;} .cntratop ul{ list-style:none; margin-left: auto ; margin-right: auto ; text-align: center;} .cntratop li{ display:inline-block;} .cntratop li:first-child{ margin-left:0px;} /*navbar text*/ .cntratop a{ display:inline; padding:15px; text-decoration:none; color:#888888; cursor:pointer;} .cntratop a:hover, .cntratopli.live a{ font-weight:bold; color:#E94F78; } .column{ background:transparent; width: 960px; margin-left: auto ; margin-right: auto ; text-align: center; padding: 0px;} .srch{ background:transparent; width: 960px; margin-top: 5px; margin-left: auto ; margin-right: auto ; text-align: center; padding: 0px;} #search-box{ list-style-type: none; display: inline; margin-left: 0px; margin-right:0px; } #search-form { background-color: transparent; position: relative; } #search-box input[type="text"] { width: 400px; font-family:Georgia; font-style: italic; font-size: 90.0%; padding: 0px 2 2px 10px ; color: #999; outline: none;} #search-text { font-size: 13px; font-family:Georgia; font-style: italic; border-width: 0; background: transparent; } #portfolio{ display:inline; margin: auto; text-align: center; } #text-display {top:; position: relative; display:inline-block; padding:5px 10px; font-family:sans-serif; font-weight:bold; font-size:50px; color: white; text-align: center; line-height: 1.2em;margin:0px; background-color:#E94F78; } .morphing-tinting .image-wrap { position: absolute; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius: 30em; -moz-border-radius: 30em; border-radius: 30em; } .morphing-tinting .image-wrap:hover { -webkit-border-radius: 30em; -moz-border-radius: 30em; border-radius: 30em; } #socialNetworks{ float:right; margin-top: 110px; margin-bottom:60px; } .twitterBtn{ float:left; background-image:url(images/twitter.png); background-position: top left; border:none; display:block; margin-left:15px; width:24px; height:22px; } .twitterBtn:hover { background-position: bottom left; } .facebookBtn{ float:left; background-image:url(images/fb.png); background-position: top left; border:none; display:block; margin-left:15px; width:24px; height:22px; } .facebookBtn:hover { background-position: bottom left; } #project{ margin-left: auto; margin-right: auto; padding: 0px 0px 0px 0px; height:200px; width:310px; display: inline; overflow:hidden;//trick to ensure all elements fit in portfolio } .workEntry{ width:310px; overflow:hidden; float: left; } #thumbAttachment{ float:left; width: 310px; height:200px; overflow: hidden; } #inThumb{ margin-left: auto; margin-right: auto; } #blackCross{ float:left; width: 310px; height:200px; margin-top:-200px; khtml-opacity:0; -moz-opacity:0; -ms-filter:"alpha(opacity=0)"; filter:alpha(opacity=0); opacity:0; } #blackCross:visited{ khtml-opacity:0; -moz-opacity:0; -ms-filter:"alpha(opacity=0)"; filter:alpha(opacity=0); opacity:0; } #blackCross:hover{ khtml-opacity:1; -moz-opacity:1; -ms-filter:"alpha(opacity=100)"; filter:alpha(opacity=100); opacity:100; } #backToTop{ width:61px; height:30px; float:left; margin-left:515px; margin-top:-27px; } #allsharer{ float: right; margin: 17px 158px 0 0; } .twitter-share-button { width: 92px !important; } .fb-button { position: relative; top: 2px; }\[/code\]