Jump to content
  • 0

Наложить блоки на картинку

oledgan

Asked by oledgan,

 Share

Question

oledgan Explorer

oledgan

Posted
Posted (edited)

Добрый день!

Можно считать, что верстаю впервые.

Проблема возникла вот с чем. Не могу понять как наложить два блока на картинку(пример во вложении). =(

сейчас5203399.jpg

а нужно5189063.jpg

вот код html

и ниже css

<!doctype html>    <html>        <head>                <meta charset="utf-8">                <title>Parlez-vous français</title>                <link type="text/css" rel="stylesheet" href="css/table.css"/>            <style>            body {                background: url(image/fonmain.png);                background-repeat: no-repeat;                background-position: center;            }            </style>        </head>        <body>            <div id="textabove">                <p>                <img src="image/parlez1.png" alt="parlez-vouz francais?" width="300px"/><br>                <img src="image/parlez2.png" alt="учим французский язык вместе." width="250px"/>                </p>            </div>            <div>                    <img id="podlogka" src="image/fon2.png" alt="подложка" height="450px" width="950px"/>            </div>        </body></html>
* {  margin: 0;  padding: 0;}#textabove {    margin-bottom: 10px;    margin-left: 15%;    margin-top: 55px;    line-height: 1px;}#podlogka   {    margin-left: 205px;}
Edited by oledgan
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
DivMan Explorer

DivMan

Posted
Posted (edited) 
<div class="wrap"> // логотип и всё остальное    <div id="textabove">         <p>            <img src="image/parlez1.png" alt="parlez-vouz francais?" width="300px"/><br>            <img src="image/parlez2.png" alt="учим французский язык вместе." width="250px"/>         </p>   </div>   <section> // Это прозрачный блок       <div class="column-left">          Здесь содержимое левой колонки       </div>       <div class="column-right">           Здесь содержимое правой колонки       </div>   </section></div>

Что такое подложка?

Edited by DivMan
Link to comment
Share on other sites
  • 0
oledgan Explorer

oledgan

Posted
  • Author
Posted 
<div class="wrap"> // логотип и всё остальное    <div id="textabove">         <p>            <img src="image/parlez1.png" alt="parlez-vouz francais?" width="300px"/><br>            <img src="image/parlez2.png" alt="учим французский язык вместе." width="250px"/>         </p>   </div>   <section> // Это прозрачный блок       <div class="column-left">          Здесь содержимое левой колонки       </div>       <div class="column-right">           Здесь содержимое правой колонки       </div>   </section></div>
Что такое подложка?

Это как раз прозрачный блок по средине. Та я думал. Чтото я намудрувал. Сделаю фон, текст и эту "подложку" одной фото и кину на бекграунд.

Спасибо большое за подсказку. Как раз почитаю за section.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Andrey_Afonchenko
      Помогите с эффектом наложения
      By Andrey_Afonchenko
      Здравствуйте! Помогите, пожалуйста!
      Есть два блока (div): один с картинкой, а другой с текстом.
      Нужно реализовать: сначала блок с картинкой должен перекрывать блок с текстом, а потом блок с текстом должен перекрывать блок с картинкой.
      Для этого я делал в попытке реализации данного эффекта:
      .image
      {
          display: inline-block;
          Position: absolute;
          z-index: 1;
      }
      @Keyframes block_overlap
      {
          from
          {
              z-index: 0;
          }
          to
          {
              z-index: 2
          }
      }
      .text
      {
          display: inline-block;
          position: absolute;
          animation-name: block_overlap;
          animation-duration: 1s;
      }
      Данный код не привёл к решению проблемы.
       
    • ows.nightwolf
      Вписать изображение в контейнер с подгонкой размеров
      By ows.nightwolf
      Доброго времени суток, прошу помощи в решении задачи.
      Пример (как должно быть):

      На данном рисунке:
      Есть общий контейнер (зеленый прямоугольник), чьи размеры (и ширина и высота) заданы фиксированно (но эти величины заранее не известны + при изменении размеров окна браузера могут меняться) Внутри общего контейнера лежит контейнер изображения (красный прямоугольник). Ну и есть само изображение, о котором не известно вообще ничего. Суть задачи: изображение должно масштабироваться сохраняя свои пропорции так, чтобы занимать всю высоту или ширину зеленого контейнера (быть вписанным в зеленый контейнер), при этом красный контейнер должен иметь размеры в точности такие как само изображение (облегать его). Задача должна быть решена на чистом CSS + HTML.
      Доп информация:
      Эта информация имеет косвенное отношение к задаче, и я ее тут предоставил просто чтобы дать больше информации о контексте применения решения если оно найдется. Многое из того что тут описано я не включал в пример задачи чтобы не усложнять ее.
       
      Мои наработки:
      Пока что наиболее близкого поведения я смог добиться только таким способом:
      https://codepen.io/ows_nightwolf/pen/yxoYBa
      Но тут изображение не может вырасти больше своего реального размера, и красный контейнер не повторяет размеров изображения
    • lockyHC
      Как установить картинку?
      By lockyHC
      по центру что бы при изменении окна она сдвигалась в центр? Извините за глупый вопрос, новичок просто.
    • fenix_63
      Не работает z-index
      By fenix_63
      Народ, всем привет! Есть сайт: http://handmademania.ru/b2b/  Щелкаем пункт верхнего меню "Расчёт заказа". Нас прокручивает вниз к анкете. Так вот, в ячейке "Мастер-классы, которые вы выбрали" я сделал список с мультивыбором. Проблема в том, что список большой,и он пересекается с кнопкой "Отправить". А если надо выбрать элемент списка, который на одном уровне с кнопкой, то кнопка становится на переднем плане, а мне надо, чтобы на переднем плане был выпадающий список.

      С z-index пробовал - не помогло, Пробовал z-index вместе с position:relative и без, но пока безрезультатно (( Помогите пожалуйста, кто может. Скриншот по ссылке:  Скриншот. 
    • perec200
      Зависимость контента от изображения
      By perec200
      Контент всегда зависит от внутри написанного текста по высоте, но когда вставляю картинку контент как был 10px так и остался. Как сделать, чтобы контент изменялся в зависимости от вставленного изображения?

      Код: http://jsfiddle.net/em1Lhnhr/2/
       
      Заранее спасибо!
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept