CSS позиционирование изображений и текста

Question

Я пытаюсь получить текст между двумя изображениями. Изображения расположены правильно, но возникают некоторые странные проблемы с дизайном.

Текущая страница (веб-страница)

План проектирования (jpg)

То, что я пытаюсь выяснить, это:

1. Фон должен остановиться перед правым краем правого изображения (девушка)
2. Фон должен увеличивать высоту правильного изображения
3. Вертикальная черта под левым краем правого изображения.
4. Перенос текста перед вертикальной чертой
5. Полоски слева от нижнего текста в центре

Буду признателен за любую помощь!

Answer 1

Я бы посоветовал не разбивать изображение, как предлагает Эйден. Это грязный и не совсем современный способ сделать это. Попробуйте что-то вроде этого:

.top-pic {
    float: right;
    margin-top: -200px;
}

Измените назначение поля на верх, насколько вы хотите, чтобы изображение в пикселях. Единственная оставшаяся проблема - масштабирование ширины верхнего текстового элемента div для размещения изображения. Одним из способов сделать это было бы установить padding-right: 250px; или около того .top-text h1 и .top-text h2.

Answer 2

Если вы поместите верхний рисунок над логотипом и измените стиль, вы можете получить эффект, аналогичный тому, который вы хотите.

<div class="top-pic">
  <img src="index2_files/girlbird.png">
</div>
<div class="logo">
  <img src="index2_files/logo-center.png">
</div>

Изменения CSS

.top-pic {
    float: right;
    position: relative;
    top: -50px;
    right: -25px;
}

Answer 3

Это немного не так

    .top-pic {
    position: absolute;
    top: -5.7em;
    right: -1.5em;
    z-index: 1;
}

Разрежьте это изображение на 2 изображения (одно в заголовке рядом с вкладками и одно в содержании). Материал плавает внизу из-за вашего z-индекса.

В вашем CSS. То, что вы хотите, это довольно простой фиксированный 3-колоночный макет с текстом в середине. Я укажу вам здесь:

http://layouts.ironmyers.com/

http://www.csszengarden.com/

Вот как создаются макеты CSS.