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
    14 янв в 13:29
  • Спасибо, но это не помогает, я пробовал и important, и без class (только по id) 14 янв в 13:33
  • Мне кажется, что при вставке gif-элемента в div-контейнер, образуются поля, которые я не могу контролировать. Они не дают расположить div-контейнер так, как хочется, не реагируют на обнуление полей, неправильно отображают gif-элемент. Возможно я ошибаюсь. 14 янв в 13:40
  • Попробовал через flex - не получается. В линию не становятся элементы. 15 янв в 10:46
  • Возьми тот div (самый ближайший к нужному что поддается позиционированию) и спозиционируй с overflov:hidden; для вариантов типа top -30px
    – sair
    15 янв в 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
  • если у вас появился новый вопрос, задайте его, пожалуйста, с помощью кнопки «задать вопрос» в правом верхнем углу страницы; если нужно указать контекст, дайте ссылку на этот вопрос. а этот «ответ», пожалуйста, удалите. 17 янв в 10:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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