CSS Проблема: мне нужно переместить текст ближе к баннеру - PullRequest
Новая
       33

CSS Проблема: мне нужно переместить текст ближе к баннеру

0 голосов
/ 29 марта 2020

Во-первых, я не разработчик, но мне нужно быстрое исправление с CSS в моей OBS.

На следующем рисунке https://imgur.com/a/1rgPzC7 вы видите, что "AKII0 теперь следует ".

Как мне переместить текст" AKII0 теперь следует "вверх, ближе к баннеру?

Спасибо за помощь

Html

<!-- alert image -->
<div id="alert-image-wrap">
  <div id="alert-image">{img}</div>
</div>

<!-- main alert box window -->
<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->
    <div id="alert-message">{messageTemplate}</div>
    <div id="alert-user-message">{userMessage}</div>

  </div>
</div>

Css

body,
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#wrap {
  position: relative;
  height: 100%;
  width: 100%;
}
#alert-box {
  height: 100%;
  width: 100%;
  position: absolute;
}
#alert-box.hidden,
.hidden {
  opacity: 0;
}
#alert-text {
  padding: 20px;
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000,
    0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message,
#alert-user-message {
  text-align: center;
}
#alert-user-message img {
  vertical-align: middle;
  height: 1em;
}
#alert-image {
  position: relative;
}
#alert-image video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#alert-message > span > span {
  display: inline-block;
}
#alert-image {
  z-index: 6;
  position: relative;
}
#alert-text {
  z-index: 6;
  position: relative;
}
#alert-text-wrap {
  z-index: 6;
  position: relative;
}

1 Ответ

0 голосов
/ 29 марта 2020

Довольно сложно увидеть, что происходит с маленьким скриншотом. Возможно, вы захотите попытаться воссоздать это в codepen .

. И, что усложняет ситуацию, многие из ваших CSS идентификаторов, кажется, не применяются к HTML, которым вы поделились. Я также заметил, что в вашем CSS есть ссылки на #alert-image и #alert-text дважды. Все эти вещи могут привести к перекрёстным проводам в ваших результатах, если вы не будете осторожны.

Но, черт побери, я бы поместил ваше изображение и текст в контейнерную ячейку. Затем я бы расположил их в div контейнера по мере необходимости, используя CSS Flexbox . Поскольку вы используете отступы, вы можете дополнительно настроить их, используя отступы.

Например:

HTML

<!-- your new container -->
<div class="container">

  <!-- alert image -->
  <div id="alert-image-wrap">
    <div id="alert-image">{img}</div>
  </div>

  <!-- main alert box window -->
  <div id="alert-text-wrap">

    <!-- alert text -->
    <div id="alert-text">

      <!-- alert message -->
      <!-- messageTemplate will be replaced with your message template -->
      <!-- for example : {name} is now following! or {name} donated {amount} -->
      <div id="alert-message">{messageTemplate}</div>
      <div id="alert-user-message">{userMessage}</div>

    </div>
  </div>

</div>

CSS

(я переместил эти идентификаторы и их свойства в поле ниже, если не увидел, что они применяются к предоставленной вами HTML). 

body,
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.container {
  display: flex; /* Flex ensures items can be arranged in columns or rows and they wrap */
  flex-direction: column; /* Arranging things so they stack */
  justify-content: center; /* Puts the image and text together */
}
#alert-image {
  position: relative;
  padding-bottom: 0px; /* increase this if you want more padding */
}
#alert-image { /* redundant, merge into the original ID above */ 
  z-index: 6;
  position: relative;
}
#alert-text-wrap {
  z-index: 6;
  position: relative;
}
#alert-text {
  padding: 20px; /* This is equal to the 4 items below. Break it up as needed to get your spacing right.
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px; */
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000,
    0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-text { /* redundant, merge into the original ID above */ 
  z-index: 6;
  position: relative;
}
#alert-message,
#alert-user-message {
  text-align: center;
}
#alert-user-message img {
  vertical-align: middle;
  height: 1em;
}

Потенциально бесполезно CSS

Это CSS, похоже, не относится к предоставленной вами HTML. 

#wrap {
  position: relative;
  height: 100%;
  width: 100%;
}
#alert-box {
  height: 100%;
  width: 100%;
  position: absolute;
}
#alert-box.hidden,
.hidden {
  opacity: 0;
}
#alert-image video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#alert-message > span > span {
  display: inline-block;
}

Надеюсь, это поможет Вы двигаетесь в правильном направлении!

...