Форум Flasher.ru

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)
-   HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)
-   -   Яндекс.Карты скругленные углы (http://www.flasher.ru/forum/showthread.php?t=149975)

Adskij 04.02.2011 05:04

Яндекс.Карты скругленные углы
 
Подскажите, пожалуйста, как скруглить края в диве, в который грузятся Яндекс.Карты. Использовать наложение уголков изображений не получается, так как фон не фиксированный (карты появляются над флешем). Перепробовал множество способов, как css, так javascript'ом. На дивах с текстом\картинкой работают, а яндекс.карты как были прямоугольными так и остаются.
Максимум, что у меня получилось, это вот:
http://ki44321.ho.ua/maps/
Но работает только в мозилле, и внутренние края квадратные.
В идеале, хотелось бы получить что то подобное:
http://ki44321.ho.ua/maps/maps.jpg
То есть просто черную рамку вокруг карты и скругленные края.
Спасибо.

membrilius 07.02.2011 14:55

новые браузеры понимают CSS3 ...

вот литература, пробуйте

http://sreznikov.blogspot.com/2009/0...er-radius.html
http://www.webmasters.by/articles/ht...-property.html
http://rmcreative.ru/blog/post/kross...-border-radius

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

studmar 08.02.2011 01:13

К сожалению, с IE все равно придется использовать js

Есть еще один вариант

Положить карту в контейнер равный ее высоте и ширине, контейнеру задать относительное позиционирование.

в Photoshop сделать png или gif с закруглениями и вырезом (под карту), вставить картинку в тоже контейнер и задать абсолютное позиционирование.

Таким образом картинка с вырезом накроет карту

membrilius 08.02.2011 18:08

а я вообще от 7 IE отказался уже...
Достал. Просто блочу сайт и вывожу страницу с ссылками на скачивание нормальных браузеров.

Я думаю, это правильно, если так будет делать хоть 10% разработчиков, то люди будут нормально переходить на новые технологии. Темболее установка занимает 1 минуту

mooncar 08.02.2011 20:47

Ха, а я только-только от поддержки IE6 при верстке отказался.

studmar 08.02.2011 21:46

Цитата:

Сообщение от mooncar (Сообщение 971725)
Ха, а я только-только от поддержки IE6 при верстке отказался.

Я тоже, прочие версии IE необходимо брать в расчет, если делаешь сайт для общественного доступа

membrilius 08.02.2011 21:59

у меня по статистике через IE7 заходило 5%-10% .... думаю, я могу позволить помахать им рукой )

studmar 08.02.2011 22:03

Цитата:

Сообщение от membrilius (Сообщение 971741)
у меня по статистике через IE7 заходило 5%-10% .... думаю, я могу позволить помахать им рукой )

решать вам, конечно, я бы и сам рад отказаться от IE, в моих проектах % очень велик, за 30, а где-то и за 45

Adskij 11.02.2011 17:03

Вопрос не такой простой как кажется. Я же написал, что перепробовал кучу способов, ни один не подошел.

Цитата:

Сообщение от membrilius (Сообщение 971195)
новые браузеры понимают CSS3 ...
читайте внимательно, для каждого браузера свой подход.

Если Вы имеете ввиду -webkit-border-radius и т.д. то скругленность дива пропадает после загрузки яндекс.карт.
Вот пример, правда с jquery, но css3 ведет себе так же:
http://ki44321.ho.ua/maps/jcorner.html
Видно что углы скругленные. Нажимаем на крестик, скругленность пропадает и загружаются карты.

Цитата:

Сообщение от studmar (Сообщение 971421)
в Photoshop сделать png или gif с закруглениями и вырезом (под карту), вставить картинку в тоже контейнер и задать абсолютное позиционирование.

Да, этот вариант 100% подошел бы, но это упрощенный пример, на самом деле там фон под картой меняется (флеш стоит).


Как вариант - наложить поверху дивы с скругленными границами (ссылка в первом посте), но у меня получилось только под фаерфокс:(


Часовой пояс GMT +4, время: 20:33.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.