0

Не получается разместить на странице div-контейнер с содержимым, которое прописывается по средством JavaScript с сайта Одноклассники. Хочу поместить данный объект, представляющий из себя gif-файл, обернутый в div-контейнер, получаемый ссылкой с сайта Одноклассники, в правый верхний угол, рядом с рисунком. Желательно, что бы контейнер вставал рядом (в линию) с изображением, имел отступ от изображения 10px, и доходил до конца страницы (отступ от правого края сверху и сбоку 5px)

! function(d, id, did, st) {
  var js = d.createElement("script");
  js.src = "https://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
      if (!this.executed) {
        this.executed = true;
        setTimeout(function() {
          OK.CONNECT.insertContentWidget(id, did, st);
        }, 0);
      }
    }
  };
  d.documentElement.appendChild(js);
}(document, "ok_content_widget", "https://ok.ru/group/54787859349522/album/54787860660242/941139944722", '{"topicTextIsFull":1}');
img {
  height: 400px;
  width: 600px;
}

.ok_content {
  position: absolute;
  left: 700px;
  bottom: 430px;
  width: 300px;
  height: 100px;
  border: 0;
  padding: 0;
  margin: 0;
}
<img src="../img/hefekranz-6166511_1920.jpg" alt="sweet bread">
<main>
  <div id="ok_content_widget" class="ok_content"></div>
</main>

Пытался менять размер div-контейнера (класс ok_content), делать отступы, но ничего не получается, не могу ровно разместить объект. Он занял место справа вверху, но при этом не могу растянуть содержимое контейнера так, что бы было от рисунка до края экрана. Сейчас размер маленький, и увеличивая размер контейнера наблюдается наложение содержимого контейнера на рисунок. Исправить не получается.

6
  • Так пробовали? .ok_content { position: absolute !important; left: 700px !important; bottom: 430px !important; width: 300px !important; height: 100px !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
    – sair
    Commented 14 янв. 2023 в 13:29
  • Спасибо, но это не помогает, я пробовал и important, и без class (только по id) Commented 14 янв. 2023 в 13:33
  • Мне кажется, что при вставке gif-элемента в div-контейнер, образуются поля, которые я не могу контролировать. Они не дают расположить div-контейнер так, как хочется, не реагируют на обнуление полей, неправильно отображают gif-элемент. Возможно я ошибаюсь. Commented 14 янв. 2023 в 13:40
  • Попробовал через flex - не получается. В линию не становятся элементы. Commented 15 янв. 2023 в 10:46
  • Возьми тот div (самый ближайший к нужному что поддается позиционированию) и спозиционируй с overflov:hidden; для вариантов типа top -30px
    – sair
    Commented 15 янв. 2023 в 14:35

1 ответ 1

0

Выровнял элементы, но забыл сказать, что верстаю в Opera GX. Так что теперь другая проблема - как расположить эти элементы так же, но в других браузерах?

Код CSS работает только для Opera GX, код HTML выше

img  {
   width: 54.5%;
   height: 450px;
}


#ok_content_widget{
   position: absolute;
   left: 600px;
   bottom: 482px;
   width: 45%;
   height: 100px;
}

Открывая страницу в других браузерах, картинка меняется и необходимо снова подстраивать размеры, а в Opera вообще не видно div-контейнера с gif-элементом.

1
  • если у вас появился новый вопрос, задайте его, пожалуйста, с помощью кнопки «задать вопрос» в правом верхнем углу страницы; если нужно указать контекст, дайте ссылку на этот вопрос. а этот «ответ», пожалуйста, удалите. Commented 17 янв. 2023 в 10:56

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.