Elements move when browser is resized

testebr

New Member
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\]
 
Back
Top