Изменения размера окно объявлений держать дивы на тот же месте

Question

Ну .. мой английский не очень хорошо, поэтому я рисую, что я хочу ..

ПОЛНОЙ СТРАНИЦА: http://d-3.me/full.jpg

Зеленого контейнер это мое содержание обертывание. Черные и красные квадраты - это некоторые кнопки для доступа к другим страницам.

Так что, когда я изменить размер страницы, я хочу сохранить тезисы кнопку как это еще одно изображение:

1024px Window Просмотров: http://d-3.me/1024.jpg

это мой первоначальный HTML:

<div id="wrap_home_bts"> 
    <div class="bt_woman"></div> 
    <div class="bt_man"></div> 
</div> 

и это is my css:

#wrap_home_bts{ 
    position:relative; 
    width:100%; 
    height:100%; 
} 

    .bt_woman{ 
     width:880px; 
     height:389px; 
     background:#FFCC00; 

     position:absolute; 
     left:0; 
     bottom:245px; 

    } 

    .bt_man{ 
     width:733px; 
     height:168px; 
     background:#CC00FF; 

     position:absolute; 
     right:0; 
     bottom:74px; 

    } 

но так, «кнопка» сопровождает измененное окно.

Я убираю?

Answer 1

Вместо того, чтобы позиционировать ваши блоки, используя левый и правый 0px, расположите их на 50%, а затем выровняйте их так, как вы хотите, используя отрицательный запас. Это должно работать, хотя вам придется настроить поля, чтобы соответствовать в точности, как вы хотите:

#wrap_home_bts{ 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 

} 

.bt_woman{ 
    width:880px; 
    height:389px; 
    background:#FFCC00; 
    display: block; 
    position:absolute; 
    left:50%; 
    margin-left: -650px; 
    bottom:245px; 

} 

.bt_man{ 
    width:733px; 
    height:168px; 
    background:#CC00FF; 

    position:absolute; 
    display: block; 
    left:50%; 
    margin-right: -650px; 
    bottom:74px; 

} 

http://jsfiddle.net/E4mmz/

Answer 2

.bt_woman и .bt_man позиционируются абсолютно в #wrap_home_bts который'S ширина устанавливается на 100% , Таким образом, размер #wrap_home_bts изменится с изменением размера браузера, и позиция .bt_woman и .bt_man будет следовать за этим элементом. Возможно, будет лучше, что .bt_woman и .bt_man будут находиться за пределами #wrap_home_bts. Затем вы можете установить некоторую ширину элемента body с помощью javaScript, например ширину экрана. Таким образом, они не изменят положение при изменении размера.