Css/HTML positioning

Проблемы с сохранением всех моих вещей на месте, когда я увеличиваю и увеличиваю размер. Мне бы хотелось, чтобы кто-то помог мне.Css/HTML positioning

Также как я могу выровнять свои авторские права и contact.etc ... в нижней части экрана.

Это текстовая игра, в которой я работаю самостоятельно.

<!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"> 

    &nbsp;<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>

источник

2015-02-15 Joshua

использовать «clear: both» в селекторе обертки –

Добавить JSFiddle или фрагмент кода на ваш вопрос – Ram

Возможно, кто-то хочет скайпировать и показать мне, как исправить это посредством голосового управления. – Joshua

, так как вы делаете текстовую игру в HTML и CSS, я первый призываю вас, чтобы убедиться, что у вас есть меры для предотвращения любого вида взлома, если это мультиплеер. Во всяком случае, использование абсолютного позиционирования - отличный способ пойти на предметы, которые нужно разместить в одном месте.

.example{ 
    position:absolute; 
    top:5px; 
    left:5px; 
}

Существует пример того, как вы можете сделать это, достаточно просто, он будет отображать 5px от верхнего левого угла сНа обертки. для позиции снизу используйте что-то вроде bottom:5px;left:5px.

источник

2015-02-15 17:17:04 NotDragon

Это помогло мне позиционировать нижнюю вещь авторского права в правильном положении. Однако это не помогло мне с моей главной проблемой. Мне нужна помощь, чтобы сделать это, когда я увеличиваю и уменьшаю свои таблицы и содержимое, а текст не изменяется; кто-то сказал использовать обертку, чтобы я сделал, и она все еще не работает. – Joshua

Я имею в виду, что, когда я нахожусь на 90%, обертка и таблицы смещаются за пределы основной обертки. Когда я на 100%, он полностью выровнен. – Joshua

проблема у вас есть, ваша программа не превращается в динамичную. способы исправить это с помощью таких вещей, как JQuery, чтобы изменить высоту/ширину на основе размера экрана. способы его использования включают в себя: var width = screen.width/2; (половина ширины экрана и 'var height = screen.height' и установка css элемента для этого значения' $ ('# id'). css ('height', height); '.Если вам нужно больше подробного ответа, покажите мне изображение того, что вы пытаетесь создать, и я мог бы помочь с более точным сценарием для чего вам нужно – NotDragon

Css/HTML positioning

ответ

Смежные вопросы