backbone: CSS/JavaScript: Force or Embed 7 images positioned Absolute into specific div?

lundi 23 février 2015

CSS/JavaScript: Force or Embed 7 images positioned Absolute into specific div?

so I am building a website, where users have their avatars loaded based on code that's given to JS function, it's 7 images all same size but different elements - Skin base, hair, eyes, mouth, shirt, shoes, pants. They get loaded on page loading and they need to be stacked on top of each other.

Here is html:


<body onload="LoadCharDiv('codas', 'AvatarImgFrame');">
<div id="MainBody">
    <div id="DataFrame">        
        <div class="DataObjects"><div class="InfoLabels">Account Level:&nbsp;</div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
        <div class="DataObjects"><div class="InfoLabels">Profile Views:&nbsp;</div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
        <div class="DataObjects"><div class="InfoLabels">Messages:&nbsp;</div><div class="InfoData" id="MessageData">0</div></div>
    </div>


    <div id="AccountFrame">
        <div id="AccountAvatar">
            <div id="AvatarImgFrame"><img src="http://ift.tt/1DELW4L" id="Acc_img"/></div>
            <input type="button" id="sendPm" value="Send Message" name="sendPm"/>
        </div>
        <div id="AccountInfo">
            <div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ."&nbsp". $row['last_name'] ."&nbsp;". "(".$row['username'].")");?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
        </div>


    </div>
</div>
</body>

"LoadCharDiv()" is a JS function which just places images into div based on character code provided, don't think it's related but here it is anyway:


function LoadCharDiv(codas, div){
var code = "1c0c1c0c1c2c1";
var data = code.split("c");
var skins2 = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]], pants[data[4]], shoes[data[5]], torso[data[6]]];
var inhtml = "";
for(var d = 0; d < skins2.length; d++){
inhtml = inhtml + "<img src='"+skins2[d]+"'/>";
}
document.getElementById(div).innerHTML = inhtml;
}

And here is my CSS on page:


*{
    margin: 0px;
    padding: 0px;
    font-family: 'Ubuntu', sans-serif;  
    }
body{
    background-color: #111111;
    margin: 1%;
}
#MainBody{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    height: 800px;
}
#AccountFrame{
    width: 100%;
    padding: 15px;
    height: 100%;
    background-color: #eeeeee;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
}
#DataFrame{
    font-size: 2.0vh;
    padding: 15px;
    background-color: #eeeeee;
    border-radius-top: 4px;
    width: 100%;
    text-align: right;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
    display: inline-block;
}

#AccountAvatar{
    float: left;
    width: 30%;
}
#AccountAvatar img{
    width: 10%;
    position: absolute;
    left: 0;
    right: 0;
}
#sendPm{
    width: 100%;
    height: 5.0vh;
    background-color: #0071ff;
    border: 0px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #1A1A1A;
    font-size: 2.0vh;
}
#sendPm:hover{
    background-color: #308CFF;
}

.DetailLabel{
    display: inline-block;
    width: 9.7vh;
    color: #0071ff;
}
.DetailInput{

    width: 40%;
    display: inline;
}

.DetailObjects{

    width: 100%;
    display: inline-block;
    padding: 1vh;
}
#AccountName{
    color: #0071ff;
}
#AccountInfo{
    width: 68%;
    float: left;
    font-size: 1.7vh;
    padding: 1vh;
    height: 100%;
}
#NameObject{
    font-size: 3vh;
    padding: 0px;
    padding-left: 1vh;
}

enter image description here

As you can see in image, with current


#AccountAvatar img{
    width: 10%;
    position: absolute;
    left: 0;
    right: 0;
}

Character is placed on side of page, I want it to be placed right above Send Message button, and stay there without floating around screen if page gets resized.

Here is what it should be like: enter image description here

I am thinking perhaps there is a way to layer images on top of each other without position: absolute?

Thanks.

backbone

lundi 23 février 2015

CSS/JavaScript: Force or Embed 7 images positioned Absolute into specific div?

Aucun commentaire:

Enregistrer un commentaire