Блог

Возможно, для некоторых это глупый вопрос, но я не очень хорошо разбираюсь в HTML, поэтому, пожалуйста, потерпите меня. Я пытаюсь настроить HTML, который мой друг сделал для меня для сайта, пользовательский HTML. Но по какой-то причине исходный код, который она дала мне для моего аватара, не работает. Все остальное делает, даже другие изображения, кроме аватара. Вот как это должно выглядеть (это был ее скриншот предварительного просмотра), но вместо этого выглядело так с моей стороны.

 <!---------------- TOP BANNER -------- CHOOSE A SEAMLESS PATTERN ----------------------------------------------> <div class="card border-0 modal-open bg-faded" style="border-radius: 1em;  box-shadow: 0px 0px 16px rgba(0,0,0,.2);">
  <div style="background: url('https://eskipaper.com/images/cute-flower-pattern-wallpaper-1.jpg') fixed; height: 200px;" 
  class="card-block" ></div>
  
  <div class="row">
     <div class="col-lg-3 pr-lg-0">
        <div class="card card-block d-block bg-faded border-0 rounded-0">
          
          <!---------------- 200 x 200 AVATAR IMAGE ---------------------------------------------->
           <img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" 
           class="bg-faded p-2 rounded-circle d-block mx-auto mb-2" style="max-height: 200px; margin-top: -100px;">
 

Это был код, который она мне прислала (основное внимание уделяется части аватара, но решила загрузить все целиком).
После небольшого бормотания, она попыталась связать это с чем-то другим (раздел аватар), чтобы посмотреть, появится ли изображение. И так оно и было, но не в первоначальном смысле. поэтому она предположила, что мой компьютер в основном ненавидит меня.

                 <!-- 【 Avatar 】 
    ------------------------------------------------ -->
    <img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" class="rounded-circle mx-auto p-2 bg-faded" style="width:200px;margin-top:-75px;"> 
 

Это был 2-й код, который она отправила, и он сработал.

Эта проблема уже случалась со мной раньше с другим совершенно другим HTML для той же цели. Если я отключу WYSIWYG, исходный код будет работать, просто не так, как он должен работать. В конечном итоге он будет отделен от фона.

Так что это ошеломляет меня. Это мой компьютер или просто действительно, ужасная удача с HTML?

Пока я сижу с отключенным WYSIWYG, чтобы иметь хотя бы читаемый аватар. Есть ли в этом какая-нибудь помощь, если это можно исправить? Извините за любой плохой термин, путаницу или что-то в этом роде. Я неграмотен, когда дело доходит до кодирования.

EDIT1: Я попытался увидеть его в предварительном просмотре кода, сделанном для конкретного сайта, который я использую, и он отображается так, как и предполагалось (см. Изображение 1), но при копировании вставки этого кода для живого сайта он ломается (img 2). Это делает все это еще более запутанным.

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

В качестве примера, вот упрощенная версия, которая в основном должна соответствовать предполагаемому внешнему виду. Он использует только встроенные стили. Просмотрите его отдельно на этом сайте, и я уверен, что это в основном то, что вам нужно. Если вы вставите его в свой, это МОЖЕТ сработать. Дело в МАЕ МЕСЯЦЕ. Это не «ваш компьютер ненавидит вас», но вместо этого компоновка html/css может стать довольно сложной, и вам потребуется некоторое изучение с вашей стороны, чтобы понять, что применяется и как правильно интегрировать любой фрагмент кода с вашим сайтом.

 <div style="display: flex; flex-direction: column; align-items: center;background: #222;">
  <div style="background: url('https://eskipaper.com/images/cute-flower-pattern-wallpaper-1.jpg') fixed; height: 200px; width: 100%;"></div>
  <img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" style="max-height: 200px; margin-top: -100px;border-radius: 200px; border: 10px solid #222;">
</div>