I've been working on a website where users can have their avatars displayed using a JS function that loads 7 different images onto the page. These images correspond to different elements such as skin base, hair, eyes, mouth, shirt, shoes, and pants, all of the same size but stacked on top of each other.
Here's a snippet of the HTML code:
<body onload="LoadCharDiv('codas', 'AvatarImgFrame');">
<div id="MainBody">
<div id="DataFrame">
<div class="DataObjects"><div class="InfoLabels">Account Level: </div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Profile Views: </div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Messages: </div><div class="InfoData" id="MessageData">0</div></div>
</div>
<div id="AccountFrame">
<div id="AccountAvatar">
<div id="AvatarImgFrame"><img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" 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'] ." ". $row['last_name'] ." ". "(".$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>
The "LoadCharDiv()" function in JavaScript places the images into a div based on the character code provided. Here's how it works:
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;
}
Also, here's the CSS included in the 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;
}
...
If you take a look at the current positioning of the character image with CSS, it seems like it's placed to the side of the page. I'm looking for a way to adjust its position to be right above the "Send Message" button and remain fixed there without floating around if the page is resized.
Your suggestions and advice are greatly appreciated!