Я сделал, чтобы Google отобразился в iframe и перенесенный в отделение. Выше того отделения у меня есть другой, который служит для создания расположенного эффекта тени.
Проблема состоит в том, что это overlayed отделение возьмет приоритет любых событий от нажатия мыши, таким образом, оно представит интерактивную карту Google ниже бесполезного. Должен быть способ, которым я могу заставить overlayed отделение проигнорировать события от нажатия мыши, позволение отделению ниже получает их. (!)
Или, есть ли другой способ сделать это?
вот производимый код:
Text about the company
Job 1
Description
Job 2
Description
Вот соответствующий CSS:
#pageWrapper {
position: relative;
}
.page_content {
max-height: 462px;
position: relative;
}
#pageShadow {
position: absolute;
top:0;
left: 0;
-moz-opacity: .5;
opacity:.5;
filter: alpha(opacity=50);
background-color: aqua;
z-index: 300;
min-height:462px;
min-width: 1096px;
}
#pageMap {
position: absolute;
top:0;
left: 0;
z-index: 299;
min-height:462px;
min-width: 1096px;
}
.recTitle {
color: #333;
font-size: 21px;
font-family: 'ProximaNovaLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 3px;
padding-bottom: 16px;
}
.recTitle:first-child {
padding-top: 10px;
}
.recJob {
padding-left: 3px;
padding-bottom: 30px;
}
#page_description {
position: absolute;
top:462px;
font-family: 'ProximaNovaLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
float:left;
width:792px;
padding: 15px;
padding-top:20px;
line-height: 22px;
font-weight: normal;
min-height: 345px;
background-color: white;
}
#page_credits {
position: absolute;
top:462px;
left:822px;
padding: 15px 10px 15px 10px;
float:right;
width:254px;
background-color: #f5f5f5;
min-height: 350px;
}
И вот эффект, которого я пытаюсь достигнуть: (эффект тени на вершине) наложение отделения http://baked-beans.tv/bb/wp-content/uploads/site-dev/google-map-inner-shadow-div-overlay.jpg
Может быть, поместить #pageShadow внутрь элемента pageMap?
Это возможно в Firefox 3.6+ благодаря поддержке свойства "pointer-events", как объясняется в этой публикации на Mozilla Hacks:
http: //hacks.mozilla. org / 2009/12 / pointer-events-for-html-in-firefox-3-6 /
Может быть поддержка в браузерах Webkit, как упоминалось в этом сообщении на CSS-Tricks:
http: // css-tricks.com/pointer-events-current-nav/
Но не в IE или Opera.
Сделайте div #pageShadow размером с тень.
Если я правильно понял из макета изображения, вы пытаетесь добиться того, что тень должна покрывать только верхнюю часть карты.
В коде вы растягиваете div тени по всей карте:
#pageShadow {.. min-height: 462px; минимальная ширина: 1096 пикселей; }
Почему бы не уменьшить значения так, чтобы они покрывали только верхнюю часть:
#pageShadow {.. height: 20px; минимальная ширина: 1096 пикселей; }
Тогда у вас будет указатель на iframe.