Неверное деление - PullRequest
Новая
       0

Неверное деление

1 голос
/ 07 марта 2012

У меня проблема с наложением одного div на остальную часть страницы.

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

Я использую position:absolute; и z-index. Это работает в некоторой степени. но он не останется в этой позиции, например, если вы измените размер окна вашего браузера (он перемещается туда, где я хотел бы, чтобы он оставался).

Вот этот сайт

Мне нужно, чтобы он перекрывал желтое поле, как это .

Редактировать: Просто быстрое продолжение: я думаю, что ваше решение заставило меня немного беспокоиться. Я не могу поместить еще один div непосредственно под ним , как можно увидеть здесь

1 Ответ

0 голосов
/ 07 марта 2012

Перемещение 

<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div>

внутри 

<div id="box"><img src="images/boxheading.png"></div>

непосредственно перед изображением.

Измените CSS на 

#medal {
    position: relative;
    top: -240px;
    right: -80px;
    z-index: 50;
}

ипримените следующее к boxheading.png изображению 

{
    position: relative;
    top: -280px;
}

РЕДАКТИРОВАТЬ:

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

Чтобы добавить еще один блок под первым, вам потребуется внести следующие изменения в html: 

<div id="box-container">
    <div id="box">
        <div id="medal">
            <img src="images/star2012medal.png" width="220" height="277">
        </div>
        <img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; ">
    </div>
    <div id="box2">testing</div>
</div>

, затем добавьте следующее css: 

#box-container {
    float: right;
}

#box {
    float: left;
    color: #333;
    background: #fff;
    height: 240px;
    width: 291px;
    display: inline;
    border-style: solid;
    border-color: #fff100;
    -moz-border-radius: 10px;
    border-radius: 10px;
    clear: both;
}

#box2 {
    float: left;
    color: #333;
    background: #fff;
    height: 240px;
    width: 291px;
    display: inline-block;
    border-style: solid;
    border-color: #fff100;
    -moz-border-radius: 10px;
    border-radius: 10px;
    clear: both;
    margin-top: 10px;
}

, протестированное только в Chrome.Не забудьте протестировать его в других браузерах!

...