Jump to content

maleficmax

Newbie
  • Posts

    19
  • Joined

  • Last visited

maleficmax's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Итак, есть карта, которая находится в контексте страницы. На карты наносятся пометки-города. Дабы добавить гибкости, координаты точек вычисляются джаваскриптом как "координаты до карты" + "сдвиг относительно карты" Так вот, конструкция сия не работает в ИЕ (точки позиционирутся относительно угла окна, а не карты), отлично работает в ФФ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); .......
  2. У меня похожая проблема. Есть изображение - назовем его Карта, - на которое наносятся пометки (города). Выглядит это вот так: <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; воспринимать отказывается. Где я ошибся?
  3. Влад, большое спасибо!
  4. Да, это я заметил, спасибо! Ну а как мне поднять текст над изображениями тогда? з-индексы не помогли (
  5. Вот код: <!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> Собственно, по сторонам экрана - картинки, на которые немного заезжает отцентраленная надпись... Ничего сложного, но такой вот косяк: в ИЕ (только в нем!) нет отступа текста от правой стороны браузера. Даже более того, текст немного заезжает за границу экрана.
  6. Черт возьми, да! Это я виноват, крутил-вертел, вот и отвалилось (= Ну в принципе да, если селект != дефолту -- тогда начинаю читать данные с выпавшего блока... Если я не ошибаюсь, это реализуемо. Я не прав? О, кстати... Есть ли возможность сделать что-то типа Если Селект = "Нет значения" тогда {скрыть нафиг форму} ? Или вариант проще, но тоже интересный... По нажатии кнопки - скрывать блок... //разобрался вроде
  7. в статичном виде, когда всё видно - нет проблем ни у одного браузера
  8. это упрощенно то, что скрыто и будет показываться: <div id="to_inviz"> //тут содержимое </div> это - где селект: <select onchange='document.getElementById("to_inviz").style.display = "inline";'> вобщем оно работает... но! 1) показывается в ФФ3 некорректно. А именно, сначала идут сво-ва дива, как цвет фона, но частично, а затем и вовсе пропадают... Щас скрин попробую 2) показывается в ИЕ некорректно должно так:
  9. мда, я понимаю, что на событие изменения селекта мне нужно видимость формы ставить. пробл именно в том, что я не знаю как этого сделать. я не знаю джаваскрипта.
  10. Собственно, я почти ноль (стремлюсь к нулю) на джаваскрипте, но появилась необходимость/желание реализовать такую весч: Есть три селекта. При выборе в одном из них чего-то, отличного от дефолта, под селектом/где-то-еще открывается блок с более детальными вопросами. Заранее благодарен за помощ!
  11. Улыбка скоро перестанет сходить с моего лица))) Спасибо всем, ищу решение, думаю вопросы еще будут... А htc говорят штука тормозная страшно... Это есть быть правда?
  12. Скрипты это бяка, я хочу от них полностью отойти... А тот вариант предусматривает скриптование с ИЕ мне нужно чисто ЦСС... И мне кажется что я банально торможу и не вижу очевидного
  13. Или быть может кто-то подскажет где найти аналогичное (ну похожее... может без третьего уровня вкладок) меню, потому как я сдаюсь
  14. Вот код меню, взятый с некоторого сайта. Мне необходимо поместить это меню в 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>
  15. Дублирую тему с раздела Таблицы, вдруг здесь помощи найду... Собственно, я полагаю вопрос многим знаком, но я таки обьясню... Существует эта страничка, которая в 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> Если кому-то известен ответ, произнесите его плиз! Или хоть обматерите меня, идиота)))
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy