将图像放在我想要HTML的位置

时间：2017-02-28 13:17:00

标签： html css image position

我想把这个动画gif放在布局之外;基本上我想要它在这里：

所以我希望那个角色在箭头指向的地方;我需要做什么？

网站直播演示：http://holamyphone.esy.es/privilegies.html

gif的名字是“counter-dancing.gif”。

<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="UTF-8">
  <title>Услуги УБИТАЯ СЛАВА</title>
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <style></style>
</head>

<body>

  <div class="well well-small">
    <center><img alt="" title="Услуги сервера" border="0" src="/img/logo.png"></center>
  </div>
  <div id="pageAlign">
    <div class="well well-small">

      <div id="privileges">



        <!-- АДМИНКА + ВИП START -->

        <div id="privilege">
          <div class="privilegeImage" style="background: #0081ff;"><img src="/img/error.png"></div>
          <div class="privilegeName" style="color: #0081ff;">АДМИНКА + VIP</div>
          <div class="privilegePrice30">
            <ul>
              <li>30 гривен</li>
              <li>120 рублей</li>
              <li>(30 дней)</li>
            </ul>
          </div>
          <div class="seps" style="margin-left: 4px;"><img src="/img/seps.png" alt=""></div>
          <div class="privilegePriceForever">
            <ul>
              <li>75 гривен</li>
              <li>300 рублей</li>
              <li>(3 месяца)</li>
            </ul>
          </div>
          <div class="privilegeDiscription">
            <ul style="list-style: decimal; text-align: left; line-height: 30px; font-size: 13px;">
              <li><b>Доступно все 
						<br>
						</li>
						<font color="#FF8C00">[</font><font color="#008000">Админ</font><font color="#FF8C00">]</font> и <font color="#FF8C00">[</font><font color="#008000">VIP</font><font color="#FF8C00">]</font></b></li>
            </ul>
          </div>
          <div class="privilegeScreen"><a href="/">Скриншоты</a></div>
        </div>

        <!-- АДМИНКА + ВИП END -->

        <!-- АДМИНКА START -->

        <div id="privilege">
          <div class="privilegeImage" style="background: #ee6748;"><img src="/img/error.png"></div>
          <div class="privilegeName" style="color: #ee6748;">АДМИНКА</div>
          <div class="privilegePrice30">
            <ul>
              <li>30 гривен</li>
              <li>120 рублей</li>
              <li>(30 дней)</li>
            </ul>
          </div>
          <div class="seps" style="margin-left: 4px;"><img src="/img/seps.png" alt=""></div>
          <div class="privilegePriceForever">
            <ul>
              <li>75 гривен</li>
              <li>300 рублей</li>
              <li>(3 месяца)</li>
            </ul>
          </div>
          <div class="privilegeDiscription">
            <ul style="list-style: decimal; text-align: left; line-height: 30px; font-size: 13px;">
              <li><b>amxmodmenu</b>
                <br> [Меню админа]</li>
              <li>
                <p>
                  <font color="#FF0000"><b>Цветной чат</b></font>
                </p>
              </li>
              <li>
                <p><b>Префикс <font color="#FF8C00">[</font><font color="#008000">Админ</font><font color="#FF8C00">]</font> в чате</b></p>
              </li>
              <li><b>Иммунитет от кика, бана и т.п</b></li>
            </ul>
          </div>
          <div class="privilegeScreen"><a href="/">Скриншоты</a></div>
        </div>

        <!-- АДМИНКА END -->

        <!-- VIP START -->

        <div id="privilege">
          <div class="privilegeImage" style="background: #b165e6;"><img src="/img/error.png"></div>
          <div class="privilegeName" style="color: #b165e6;">VIP</div>
          <div class="privilegePrice30">
            <ul>
              <li>15 гривен</li>
              <li>60 рублей</li>
              <li>(30 дней)</li>
            </ul>
          </div>
          <div class="seps" style="margin-left: 4px;"><img src="/img/seps.png" alt=""></div>
          <div class="privilegePriceForever">
            <ul>
              <li>40 гривен</li>
              <li>160 рублей</li>
              <li>(3 месяца)</li>
            </ul>
          </div>
          <div class="privilegeDiscription">
            <ul style="list-style: decimal; text-align: left; line-height: 30px; font-size: 13px;">
              <li><b>vipmenu</b>
                <br> [Меню оружия]</li>
              <li>
                <p>
                  <font color="#FF0000"><b>Цветной чат</b></font>
                </p>
              </li>
              <li>
                <p><b>Префикс <font color="#FF8C00">[</font><font color="#008000">VIP</font><font color="#FF8C00">]</font> в чате</b></p>
              </li>
              <li><b>Иммунитет от кика, бана и т.п</b></li>
            </ul>
          </div>
          <div class="privilegeScreen"><a href="/">Скриншоты</a></div>
        </div>

        <!-- VIP END -->



        <!-- ПРЕФИКС START -->

        <div id="privilege">
          <div class="privilegeImage"><img src="/img/error.png"></div>
          <div class="privilegeName">НЕДОСТУПНО</div>
          <div class="privilegePrice30">
            <ul>
              <li>0 гривен</li>
              <li>0 рублей</li>
              <li>(0 дней)</li>
            </ul>
          </div>
          <div class="seps"><img src="/img/seps.png" alt=""></div>
          <div class="privilegePriceForever">
            <ul>
              <li>0 гривен</li>
              <li>0 рублей</li>
              <li>(Навсегда)</li>
            </ul>
          </div>
          <div class="privilegeDiscription">Данная функция не доступна</div>
          <div class="privilegeScreen"><a href="/">НЕДОСТУПНО</a></div>
        </div>

        <!-- ПРЕФИКС END -->


        <!-- НЕДОСТУПНО START -->

        <div id="privilege">
          <div class="privilegeImage"><img src="/img/error.png"></div>
          <div class="privilegeName">НЕДОСТУПНО</div>
          <div class="privilegePrice30">
            <ul>
              <li>0 гривен</li>
              <li>0 рублей</li>
              <li>(0 дней)</li>
            </ul>
          </div>
          <div class="seps"><img src="/img/seps.png" alt=""></div>
          <div class="privilegePriceForever">
            <ul>
              <li>0 гривен</li>
              <li>0 рублей</li>
              <li>(Навсегда)</li>
            </ul>
          </div>
          <div class="privilegeDiscription">Данная функция не доступна</div>
          <div class="privilegeScreen"><a href="/">НЕДОСТУПНО</a></div>
        </div>

        <!-- НЕДОСТУПНО END -->
      </div>
      <div id="botButton"><a href="/">Как купить услугу?</a></div>
      <div id="vkLink"><a href="http://vk.com/set_lore_play" target="_blank">Наша группа Вконтакте</a></div>
    </div>
  </div>
  <div id="footer">
    <div id="contactsBlock">
      <div id="contacts">Главный Администратор сервера:
        <admin><b>AK_47</b></admin>
      </div><br><br>
      <div id="feedback">
        Контакты для связи со мной:
        <ul>
          <li><i></i>tamapenko</li>
          <div class="counter-dancing"><img src="/img/counter-dancing.gif" alt=""></div>
          <li><i style="background-position-y: 16px;"></i>vk.com/set_lore_play</li>
        </ul>
      </div><br><br>
    </div>
  </div>

</body>

</html>

3 个答案:

答案 0 :(得分：3)

将以下CSS添加到您的代码中

#!/bin/bash
for i in {1..20}
do
   docker run -i -t --entrypoint curl http://Url;
done

答案 1 :(得分：2)

＆＃13;
＆＃13; 
#feedback {
  font-weight: lighter;
  color: #fff;
  margin-top: 30px;
  font-size: 16px;
  position: relative;
}

.counter-dancing {
  position: absolute;
  top: -50px;
  right: 100%;
  margin-right: 20px;
}
＆＃13; 
<div id="feedback">
  Контакты для связи со мной:
  <div class="counter-dancing"><img src="/img/counter-dancing.gif" alt=""></div>
  <ul>
    <li><i></i>tamapenko</li>
    <li><i style="background-position-y: 16px;"></i>vk.com/set_lore_play</li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

代码本身是错误的。它的HTML无效。您不得在<ul>内直接使用任何其他标记。

因此您需要像这样更改HTML：

<div id="feedback">
   Контакты для связи со мной:
  <div class="counter-dancing"><img src="/img/counter-dancing.gif" alt=""></div>
    <ul>
        <li><i></i>tamapenko</li>
        <li><i style="background-position-y: 16px;"></i>vk.com/set_lore_play</li>
    </ul>
</div>

和CSS应该是这样的：

#feedback {
    position: relative;
    min-height: 213px;
}
.counter-dancing {
    position: absolute;
    top: -50px; // set this position as you want
    right: 100%;
    margin-right: 20px; // set this margin as much gap you need to the right
}

这应该做你的工作。检查。

答案 2 :(得分：1)

你想要这个吗？

Soldier on Left

然后您需要在课程main.css .counter-dancing中进行以下更改。

像这样：

.counter-dancing {
   float: left;
   margin-left: -150px;
   margin-top: -100px;
}

它会完成这项工作..

相关问题
最新问题