Css/HTML positioning
Question
Having problems keeping all my stuff in place when I zoom and rezoom in. I would like someone to help me out.
Also how can I align my copyright and contact.etc... at the bottom of my screen.
This is a text based game I am working on all by myself.
<!DOCTYPE html PUBLIC>
<html lang='en'>
<head>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: maroon;
text-align: center;
}
#wrapper
{
margin-left: auto;
margin-right: auto;
background-color: gray;
padding: 5;
border: 5px solid black;
width: 940px;
height: 800px;
}
#wrapper1
{
margin-left: auto;
margin-right: auto;
padding: 1;
border: 2px solid black;
}
#wrapper2
{
margin-left: auto;
margin-right: auto;
padding: 1;
border: 2px solid black;
}
.auto-style4 {
border-style: solid;
border-width: 1px;
margin-left: 0px;
margin-top: 0px;
padding: 1px 4px;
vertical-align: top;
font-weight: bold;
margin-bottom: 3px;
}
.auto-style6 {
border: 1px solid black;
margin-top: 0px;
}
.auto-style7 {
text-align: center;
margin-top: 6px;
border-style: 1px solid black;
}
.auto-style8 {
border: 3px solid #000000;
}
.auto-style9 {
margin-top: 0px;
text-align: right;
}
.auto-style10 {
text-align: center;
margin-left: 4px;
margin-top: 641;
}
</style>
</head>
<body style="margin-left: 0; margin-right: 0; margin-top: 3; margin-bottom: 0">
<div id="wrapper" style="height: 885px" class="auto-style3">
<div id="wrapper1" class="auto-style9" style="height: 178px">
<img src="TheLast.png" alt="TheLastPic" height="173" width="621" class="auto-style4" style="float: left">
<table align="right" style="float: right; width: 31%; height: 135px" class="auto-style6" cellpadding="2">
<tr>
<td border="1" style="height: 8px; width: 156px;" class="auto-style8">
Name: Joshua</td>
<td style="height: 8px; width: 107px;" class="auto-style8">Health: 100%%</td>
</tr>
<tr>
<td style="width: 156px; height: 22px;" class="auto-style8">Level: 500</td>
<td class="auto-style8" style="height: 22px; width: 107px">
Condition: 100%</td>
</tr>
<tr>
<td style="width: 156px; height: 64px;" class="auto-style8">Rations
(R): 585,320,005(R)</td>
<td class="auto-style8" style="width: 107px; height: 64px">Energy:
100%</td>
</tr>
<tr>
<td style="height: 33px; width: 156px;" class="auto-style8">SP: 22spp</td>
<td style="height: 33px; width: 107px;" class="auto-style8">Vitality: 100%</td>
</tr>
</table>
</div>
<div id="wrapper2">
<div class="auto-style7">
Home | Store | Upgrade | <a href="BackPack.html">BackPack</a> | Players Online | Total Players
</div>
</div>
<div class="auto-style10" align="center" style="height: 31px; width: 914px">
<b>Contact|<a href="Rules.html">Rules/Intro</a>|GameStats</b> <br>© 2015 thelast.com All Rights Reserved
</div>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2015-02-15 17:17:04
since you are making a text-based game in HTML and css, I first urge you to make sure you have actions to prevent any kind of hacking if it is multiplayer. Anyway, using absolute positioning is a great way to go for items that need to be placed in one spot.
.example{
position:absolute;
top:5px;
left:5px;
}
There is an example of how you can do it, fairly simple, it will display 5px away from top left corner of the div wrapper. to position from bottom, use something like bottom:5px;left:5px .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.