maleficmax
Newbie-
Posts
19 -
Joined
-
Last visited
maleficmax's Achievements
Explorer (1/14)
0
Reputation
-
По разному размещаются точки отнисительно карты в ИЕ ФФ и О
maleficmax posted a question in JavaScript
Итак, есть карта, которая находится в контексте страницы. На карты наносятся пометки-города. Дабы добавить гибкости, координаты точек вычисляются джаваскриптом как "координаты до карты" + "сдвиг относительно карты" Так вот, конструкция сия не работает в ИЕ (точки позиционирутся относительно угла окна, а не карты), отлично работает в ФФ3. А Опера первый раз сдвинула точки вообще вниз вправо (чересчур), а после обновления расположила нормально. Вот страница: http://autokraz.com.ua/rus/service/sto_ukr.php Имеющийся функционал - не полный, будуд всплывающие блоки, потому не судите "лишний" код. И немного сюда: 1. функции расчета координат и расположения точки: function ws_left(elem) { if ( elem.getBoundingClientRect ) { return elem.getBoundingClientRect().left; } return elem.offsetLeft; } function ws_top(elem) { if ( elem.getBoundingClientRect ) { return elem.getBoundingClientRect().top; } return elem.offsetTop; } function show_point(name, x, y) { var map = document.getElementById('map'); var left = ws_left(map) + x; var top = ws_top(map) + y; var point = document.getElementById(name); point.style.position = 'absolute'; point.style.left = left + 'px'; point.style.top = top + 'px'; point.style.display = 'block'; } 2. вставка точек идет так: var a; a = show_point('dnepropetrovsk', 510, 226); a = show_point('doneck', 619, 245); a = show_point('jitomir', 258, 123); ....... -
У меня похожая проблема. Есть изображение - назовем его Карта, - на которое наносятся пометки (города). Выглядит это вот так: <div style=""> <img src="map.jpg" /> </div> <div style="position:relative; left:305px; top:-460px;"> <img src="dot.png" alt="First Dot" /> </div> <div style="position:relative; left:872px; top:-100px;"> <img src="dot.png" alt="Second Dot" /> </div> <div style="position:relative; left:-300px"> <img src="way_1.png" alt="First way" /> </div> Последний див - это спрятанный за экран блок, который я как-то хочу потом показывать (менять его местоположение) при наведении на одну из точек. Но пока не в этом вопрос. После всего этого безобразия, естественно остаётся пробел, равный высоте трех элементов, у которых я сменил позицию. Ну да и с этим справился, добавив вот этот обрамляющий див: <div id="map" style="margin-bottom:-260px; margin-right: 872px;"> ............ ............ </div> как видно, есть еще margin-right: 872px;, так вот его я вставил чтоб убрать огромный пустой блок справа, который я не совсем понимаю как образовался (хотя догадываюсь)... Итак, вопрос. Судя по всему, этот выход не оптимален, так как ИЕ margin-right: 872px; воспринимать отказывается. Где я ошибся?
-
Влад, большое спасибо!
-
Да, это я заметил, спасибо! Ну а как мне поднять текст над изображениями тогда? з-индексы не помогли (
-
Вот код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html lang=ru> <head> <title>New Land</title> <META NAME="Keywords" CONTENT="—————-"> <META NAME="Description" CONTENT="————--"> </head> <style type="text/css"> body {background-color: black; margin: 0 0 0 0;} .text {position: fixed; top: 20px; margin-left: 150px; margin-right: 150px; font-family: Arial; font-size: 12pt; color: white; text-align: justify;"} </style> <body> <div style="position: fixed; left: 0; top: 0;"> <img src="l.png"><br><img src="l.png"> </div> <div style="position: fixed; right: 0; top: 0;"> <img src="r.png"><br><img src="r.png"> </div> <div class=text> авырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлы <br><br> авырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлы </div> </body> </html> Собственно, по сторонам экрана - картинки, на которые немного заезжает отцентраленная надпись... Ничего сложного, но такой вот косяк: в ИЕ (только в нем!) нет отступа текста от правой стороны браузера. Даже более того, текст немного заезжает за границу экрана.
-
Черт возьми, да! Это я виноват, крутил-вертел, вот и отвалилось (= Ну в принципе да, если селект != дефолту -- тогда начинаю читать данные с выпавшего блока... Если я не ошибаюсь, это реализуемо. Я не прав? О, кстати... Есть ли возможность сделать что-то типа Если Селект = "Нет значения" тогда {скрыть нафиг форму} ? Или вариант проще, но тоже интересный... По нажатии кнопки - скрывать блок... //разобрался вроде
-
в статичном виде, когда всё видно - нет проблем ни у одного браузера
-
это упрощенно то, что скрыто и будет показываться: <div id="to_inviz"> //тут содержимое </div> это - где селект: <select onchange='document.getElementById("to_inviz").style.display = "inline";'> вобщем оно работает... но! 1) показывается в ФФ3 некорректно. А именно, сначала идут сво-ва дива, как цвет фона, но частично, а затем и вовсе пропадают... Щас скрин попробую 2) показывается в ИЕ некорректно должно так:
-
мда, я понимаю, что на событие изменения селекта мне нужно видимость формы ставить. пробл именно в том, что я не знаю как этого сделать. я не знаю джаваскрипта.
-
Собственно, я почти ноль (стремлюсь к нулю) на джаваскрипте, но появилась необходимость/желание реализовать такую весч: Есть три селекта. При выборе в одном из них чего-то, отличного от дефолта, под селектом/где-то-еще открывается блок с более детальными вопросами. Заранее благодарен за помощ!
-
Улыбка скоро перестанет сходить с моего лица))) Спасибо всем, ищу решение, думаю вопросы еще будут... А htc говорят штука тормозная страшно... Это есть быть правда?
-
Скрипты это бяка, я хочу от них полностью отойти... А тот вариант предусматривает скриптование с ИЕ мне нужно чисто ЦСС... И мне кажется что я банально торможу и не вижу очевидного
-
Или быть может кто-то подскажет где найти аналогичное (ну похожее... может без третьего уровня вкладок) меню, потому как я сдаюсь
-
Вот код меню, взятый с некоторого сайта. Мне необходимо поместить это меню в HTML страницу, но в таком случае пропадает "выпадаемость" Видать я еще маловат, чтоб дойти до ответа... Ваши варианты? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Stu Nicholls | CSSplay | Professional series drop#2</title> <style type="text/css"> /*Credits: CSSplay */ /*URL: http://www.cssplay.co.uk/menus/pro_drop2 */ .preload2 {background: url(prodrop2/button4.gif);} .menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(prodrop2/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; } .menu2 li.top {display:block; float:left; position:relative;} .menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;} .menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;} .menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(prodrop2/down.gif) no-repeat right top;} .menu2 li a.top_link:hover {color:#fff; background: url(prodrop2/button4.gif) no-repeat;} .menu2 li a.top_link:hover span {background:url(prodrop2/button4.gif) no-repeat right top;} .menu2 li a.top_link:hover span.down {background:url(prodrop2/button4a.gif) no-repeat right top;} .menu2 li:hover > a.top_link {color:#fff; background: url(prodrop2/button4.gif) no-repeat;} .menu2 li:hover > a.top_link span {background:url(prodrop2/button4.gif) no-repeat right top;} .menu2 li:hover > a.top_link span.down {background:url(prodrop2/button4a.gif) no-repeat right top;} .menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */ .menu2 a:hover {visibility:visible;} .menu2 li:hover {position:relative; z-index:200;} /* keep the 'next' level invisible by placing it off screen. */ .menu2 ul, .menu2 :hover ul ul, .menu2 :hover ul :hover ul ul, .menu2 :hover ul :hover ul :hover ul ul, .menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; height:auto;} .menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;} .menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} .menu2 :hover ul.sub li a.fly {background:#fff url(prodrop2/arrow.gif) 80px 7px no-repeat;} .menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;} .menu2 :hover ul.sub li a.fly:hover {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;} .menu2 :hover ul li:hover > a.fly {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;} .menu2 :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul :hover ul {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;} </style> </head> <body> <span class="preload2"></span> <ul class="menu2"> <li class="top"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="../menu/" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/">Nikon</a></li> <li><a href="../ie/">Minolta</a></li> <li><a href="../opacity/">Pentax</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/">Wide Angle</a></li> <li><a href="../ie/">Standard</a></li> <li><a href="../opacity/">Telephoto</a></li> <li><a href="../menu/" class="fly">Zoom<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/">35mm to 125mm</a></li> <li><a href="../opacity/">50mm to 250mm</a></li> <li><a href="../menu/">125mm to 500mm</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/">Mirror</a></li> <li><a href="../opacity/" class="fly">Non standard<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/">Bayonet mount</a></li> <li><a href="../opacity/">Screw mount</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../mozilla/">Flash Guns</a></li> <li><a href="../ie/">Tripods</a></li> <li><a href="../opacity/">Filters</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="../menu/">Printing</a></li> <li><a href="../layouts/">Photo Framing</a></li> <li><a href="../boxes/">Retouching</a></li> <li><a href="../mozilla/">Archiving</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="../layouts/">Support</a></li> <li><a href="../boxes/" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/">USA</a></li> <li><a href="../ie/">Canadian</a></li> <li><a href="../opacity/">South American</a></li> <li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../ie/">London</a></li> <li><a href="../menu/">Liverpool</a></li> <li><a href="../boxes/">Glasgow</a></li> <li><a href="../opacity/" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../ie/">Redland</a></li> <li><a href="../opacity/">Hanham</a></li> <li><a href="../menu/">Eastville</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../layouts/">Cardiff</a></li> <li><a href="../mozilla/">Belfast</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../opacity/">French</a></li> <li><a href="../menu/">German</a></li> <li><a href="../boxes/">Spanish</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/">Australian</a></li> <li><a href="../boxes/">Asian</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../mozilla/">Buying</a></li> <li><a href="../ie/">Photographers</a></li> <li><a href="../opacity/">Stockist</a></li> <li><a href="../menu/">General</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="../ie/">Online</a></li> <li><a href="../opacity/">Catalogue</a></li> <li><a href="../menu/">Mail Order</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li> </ul> fsdfs </body> </html>
-
Дублирую тему с раздела Таблицы, вдруг здесь помощи найду... Собственно, я полагаю вопрос многим знаком, но я таки обьясню... Существует эта страничка, которая в HTML тянется в высоту за счет средней ячейки (ряда). Однако, на станице я применяю меню, которое требует XHTML. И тут начинаются проблемы. Ячейка НЕ ТЯНЕТСЯ в XHTML!!!!!! И никак я не могу этому помочь! ((( По крайней мере пока что... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> XXXXXXXXXX </title> <meta http-equiv="Content-Type" content="text/html; charset=cp1251" /> <style type="text/css"> body { height: 100%; margin: 0 0 0 0; } .stretch { height: 100%; width: 100%; border-collapse: collapse;} .stretch tr td { border: 1px solid #000;} </style> </head> <body> <table class="stretch"> <tr height="50"> <td width="20%"></td> <td width="60%"></td> <td width="20%"></td> </tr> <tr> <td> </td> <td>I WANT TO STRETCH!!!!!!!!!!!!</td> <td> </td> </tr> <tr height="50"> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </HTML> Если кому-то известен ответ, произнесите его плиз! Или хоть обматерите меня, идиота)))