Есть несложный сайт (на php) на московском хостинге, все страницы показываются нормально. А вот на телефоне (на Андроиде) на одной из страничек вылазит сабж. Причем до конца я прочесть его не могу, т.к. экран моего телефона больше не показывает. Что это может значить и как с этим бороться?
Погуглил. Увидев результаты, вспомнил историю об одном программисте, который настроил при возникновении ошибки автоматически открывать поиск StackOverflow с её текстом в качастве запроса.
Первые 2 результата:
https://stackoverflow.com/questions/19408066/the-google-maps-api-server-rejected-your-request
https://stackoverflow.com/questions/21934342/what-causes-the-google-maps-api-server-rejected-your-request-an-internal-error
Короче, разобрался. Поглядел на код внимательнее -- там стоит ссылка на Гугл-карту, которая почему-то не работает, и на дексктопе даже никакого сообщения об этом не вылазит, а только вот Андроид матерится. Ладно, сейчас попытаюсь туда Яндекс-карту вставить.
По второй ссылке пишут, что может слишком часто стучать запросами в гугл (>50 per minute).
Да, так оно и есть.
Гугловцы закрывают часто апи.
Сделал карту Яндекс, но ее при выводе на экран почему-то уносит вниз :(
Положение откуда отсчитывается? В абсолютных координатах или относительных?
Цитата: Bhudh от августа 22, 2017, 21:08
Положение откуда отсчитывается? В абсолютных координатах или относительных?
relative
И относительно чего?
У Вас вообще какая идея, чтобы при клике куда-то показывалась карта или просто разворачивалась?
Если первое: надо делать модальный слой, если второе: после раскрытия прокручивать к карте.
Цитата: Bhudh от августа 22, 2017, 21:37
И относительно чего?
У Вас вообще какая идея, чтобы при клике куда-то показывалась карта или просто разворачивалась?
Если первое: надо делать модальный слой, если второе: после раскрытия прокручивать к карте.
Вот два варианта, оба плохие:
http://tsvetkoff.ru/contacts.php
http://tsvetkoff.ru/contacts.html
из css:
Цитировать
.map{
position: relative;
padding-top: 10px;
margin-bottom: 70px;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transition: height 0.6s ease-in-out;
-moz-transition: height 0.6s ease-in-out;
-ms-transition: height 0.6s ease-in-out;
-o-transition: height 0.6s ease-in-out;
transition: height 0.6s ease-in-out;
z-index: 1;
}
А чем плох второй? У меня не уносит.
А в первом варианте это из-за
Цитировать.page {
height: 100%;
left: 0px;
min-height: 730px;
position: relative;
top: 0px;
width: 100%;
}
Первый блок растягивается на всю высоту экрана, а карта лежит
под ним.
Во втором варианте внутри
div.page, чего ещё надо-то?
P. S. В html-варианте ещё и фавикон пропал.
Да, в первом варианте проблема, видимо, в слишком рано стоящем закрывающем div'е для page... Причем, если я его ставлю (уже попробовал и откатил обратно), то вид на экране начинает совпадать со вторым вариантом. В о втором же варианте не устраивает то, что карта показана не полностью, и сделать, чтоб полностью, у меня не получается :(
ОМГ, да через тот же CSS и сделать.
Цитировать.map {
height: 505px; /* Высота корневого элемента <ymaps> */
}
Глупо как-то присваивать классы и ими не пользоваться.
Причём если карта на странице одна, можно заменить
class="block map" на
id="map" и
.map на
#map.
Да, и уберите, ради бога,
<center> из кода, в 2017 это совсем не комильфо, он уже практически deprecated.
Цитата: Окончательный вариант#map {
height: 505px; /* Высота корневого элемента <ymaps> */
text-align: center; /* Центрирование содержимого в стиле CSS2 */
padding-left: 25%; /* Если предыдущее правило не сработает. С процентажем можно поиграть. */
}
Тэг "center" я там ставил не от хорошей жизни, а потому. что "text-align: center;" не работал. Как не работает и сейчас. Теперь рабочий вариант -- это http://tsvetkoff.ru/contacts.php. Видно, что стиль "height: 505px;" подтянул вверх футер, но ничуть не увеличил площадь отображения карты. Стиль map сейчас такой:
Цитировать
.map{
position: relative;
padding-top: 10px;
margin-bottom: 70px;
width: 100%;
height: 505px;
text-align: center;
overflow: hidden;
-webkit-transition: height 0.6s ease-in-out;
-moz-transition: height 0.6s ease-in-out;
-ms-transition: height 0.6s ease-in-out;
-o-transition: height 0.6s ease-in-out;
transition: height 0.6s ease-in-out;
z-index: 1;
}
ЗЫ "padding-left: 25%;" в принципе работает, на надо ведь, чтобы страница имела разумный вид в т.ч. на планшетах и смартфонах.
Поищите в CSS-файле упоминания .map :eat:.
А лучше просто откройте инспектор кода в браузере (Ctrl+Shift+I) и загляните в рассчитанные стили.
Значит, так. Лёхкый гуглинг по фразе "отцентрировать яндекс-карту" дал простое решение:
Цитата: .map {
margin: 0 auto;
/* можно и проще — margin: auto;*/
}
Если просто это поставить, карта центрироваться не будет :green:.
Почему? Потому, что центрируются только инлайн-элементы.
А карте прямо в атрибуте приписан
display: block.
Следовательно, второй шаг: это выставление правильного вида карте:
Цитата: .map > ymaps {
display: inline-block !important;
}
После этого (и удаления перекрывающего правила ниже по стилям) всё видно целиком, полностью и как надо.
Вот что сейчас написано в CSS:
Цитировать
.map{
position: relative;
padding-top: 10px;
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
display: inline-block !important;
overflow: hidden;
-webkit-transition: height 0.6s ease-in-out;
-moz-transition: height 0.6s ease-in-out;
-ms-transition: height 0.6s ease-in-out;
-o-transition: height 0.6s ease-in-out;
transition: height 0.6s ease-in-out;
z-index: 1;
}
Внешний вид страницы, как можно заметить, не изменился.
Цитата: zwh от августа 23, 2017, 13:26
Вот что сейчас написано в CSS
Я не зря советовал ПОИСКАТЬ ВХОЖДЕНИЯ
.map в файле.
Цитата: Вот что сейчас написано в CSS.map{
position: relative;
padding-top: 10px;
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
display: inline-block !important;
overflow: hidden;
-webkit-transition: height 0.6s ease-in-out;
-moz-transition: height 0.6s ease-in-out;
-ms-transition: height 0.6s ease-in-out;
-o-transition: height 0.6s ease-in-out;
transition: height 0.6s ease-in-out;
z-index: 1;
}
.map iframe{
width: 100%;
height: 100%;
}
.map .psevdo{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.contacts-block{
position: relative;
display: none;
overflow: hidden;
background-color: white;
line-height: 1.5;
box-shadow: 0 4px 15px -2px rgba(0,0,0,0.3);
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
z-index: 2;
}
.contacts-block > div{
position: relative;
padding: 20px;
width: 100%;
font-size: 0;
background-color: white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 2;
}
.contacts-block:before{
position: absolute;
display: block;
content: '';
top: 50%;
margin-top: -14px;
right: -15px;
width: 28px;
height: 28px;
background-color: white;
box-shadow: 3px 3px 15px -2px rgba(0,0,0,0.3);
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
.contacts-block.abs{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-top: -220px;
margin-left: -450px;
width: 900px;
height: 440px;
overflow: visible;
}
.contacts-block .left{
display: inline-block;
padding-right: 20px;
width: 40%;
border-right: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
}
.contacts-block .right{
display: inline-block;
margin-left: -1px;
padding-left: 20px;
width: 60%;
border-left: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
}
.contacts-block span{
color: #52606b;
text-transform: uppercase;
font-weight: 400;
font-size: 30px;
}
.contacts-block p{
padding-top: 15px;
font-size: 17px;
color: #2b3841;
font-family: 'Open Sans', sans-serif;
}
.contacts-block ul{
font-size: 19px;
color: #2b3841;
list-style-position: inside;
}
.contacts-block li{
margin-top: 15px;
}
.contacts-block a{
display: block;
font-size: 30px;
text-decoration: none;
color: #2b3841;
}
.hiddencards{
display: none;
}
@media screen and (max-width: 1200px){
.menu{
display: none;
}
.mmenu{
display: block;
}
.g1{
position: static;
}
.g2{
position: static;
}
.g3{
position: static;
}
.g4{
position: static;
}
.g5{
position: static;
}
.g6{
position: static;
}
.footer .left, .footer .right{
width: auto;
}
.psevdo{
display: none;
}
.contacts-block.abs{
position: relative;
display: block;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
width: 100%;
height: auto;
overflow: hidden;
}
.map{
padding-top: 0;
margin-bottom: 0;
height: 35%;
}
.map iframe{
width: 100%;
}
}
Выкинул "height: 35%;", но ничего не поменялось. Ширина экрана у меня 1280.
Цитата: zwh от августа 23, 2017, 15:34Выкинул "height: 35%;", но ничего не поменялось. Ширина экрана у меня 1280.
Height - высота же. Ширина - width.
Цитата: Lodur от августа 23, 2017, 15:55
Цитата: zwh от августа 23, 2017, 15:34Выкинул "height: 35%;", но ничего не поменялось. Ширина экрана у меня 1280.
Height - высота же. Ширина - width.
Просто этот блок начинается с условия
Цитировать
@media screen and (max-width: 1200px){
и я не знаю, будет ли он работать для моей ширины экрана.
Добавьте такой же блок для (max-width: 1920px), например, да посмотрите.
Цитата: Bhudh от августа 23, 2017, 17:20
Добавьте такой же блок для (max-width: 1920px), например, да посмотрите.
Попробовал (и откатил) для "max-width: 1280px" -- да, в этом случае места под карту становится достаточно. Но беда в том, что этот вариант прописан для мелких экранов, а не для десктопов. Добавление к основному map'у строчек
Цитировать
padding-top: 0;
margin-bottom: 0;
ни на что не повлияло. Кроме того, центрирования карты так и нет.
Цитата: zwh от августа 23, 2017, 18:04Добавление к основному map'у строчек
Цитата: padding-top: 0;
margin-bottom: 0;
ни на что не повлияло. Кроме того, центрирования карты так и нет.
Конечно, не повлияло, в resetʼной части CSS и так эти значения для всех элементов уже прописаны.
А что делать для центрирования, я Вам написал вот в этом сообщении (http://lingvoforum.net/index.php/topic,89691.msg2944800.html#msg2944800) во втором шаге.
Да и высота у
.map осталась
100% вместо высоты карты, из-за этого под ней широкое белое поле.
ЗЫ. А, я смотрю, Вы добавили
display: inline-block !important;. Только не тому элементу...
Центрирование у меня наконец получилось. Но полностью карта так пока и не показывается (т.к. исправление "@media screen and (max-width: 1200px){" на "@media screen and (max-width: 1280px){" я откатил).
Я вообще не уверен, что указание height для .map так уж необходимо.
Попробуйте его убрать, посмотрите, что получится.
Вот что получилось у меня:
Отсутствие height'а вызвало подъем футера до примерно половины страницы, поэтому пришлось вернуть его к значению "100%". Но карта как была полузакрыта, так и осталась :(
Я не понял, Вы хотите, чтобы карта помещалась между хедером и футером на всё свободное пространство без полей или карту фиксированного размера?
Оба-два вместе не получится.
В настоящее время эта страница у меня на экране выглядит вот так:
(http://www.tsvetkoff.ru/old/my/ts_screenshot01.png)
А надо, чтобы карта была видна полностью.
В 55 ФайрФоксе видна вся карта, потом большое поле (высота дива 740px из-за 100%, при высоте карты в 505px), потом футер.
Цитата: Bhudh от августа 24, 2017, 20:10
В 55 ФайрФоксе видна вся карта, потом большое поле (высота дива 740px из-за 100%, при высоте карты в 505px), потом футер.
Судя по описанию, нечто подобное я вижу после того как, увидев приведенную мной выше картинку, переключусь на другие программы, а затем вернусь на FF... хм... причем, кажется, не на каждом компе такое.. :(
Если вместо 100% поставить 505px, что видите?
Цитата: Bhudh от августа 25, 2017, 01:56
Если вместо 100% поставить 505px, что видите?
Вижу вот такое:
(http://www.tsvetkoff.ru/old/my/ts_screenshot02.png)
Цитата: zwh от августа 25, 2017, 11:32Вижу вот такое
А я вот вижу в CSS
Цитироватьheight: 505;
Это чиво такое?
Цитата: Bhudh от августа 25, 2017, 22:55
Цитата: zwh от августа 25, 2017, 11:32Вижу вот такое
А я вот вижу в CSSЦитироватьheight: 505;
Это чиво такое?
Да, несколько поторопился... Но с "height: 505px;" всё выглядит ровно также.