Jump to content

cy6erGn0m

Newbie
  • Posts

    6
  • Joined

  • Last visited

cy6erGn0m's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Что-то вроде такого думаю. <html> <head> <style type="text/css"> .container { width: 150px; border: 1px solid black; } .date { float: left; width: 40px; height: 15px; font-weight: bold; } .arrow { float: left; width: 15px; height: 15px; font-size: 8px; } .title { color: blue; font-size: 10px; } .content { clear: left; border-bottom: 1px dotted gray; margin-bottom: 5px; } </style> </head> <body> <div class="container"> <div class="title date"> 15.03 2010 </div> <div class="arrow">></div> <div class="title"> Here is a title for this text </div> <div class="content"> Here is a inner text for this news </div> </div> </body> </html> А вообще, не мешало бы хоть минимальную грамматику соблюдать: "не" и "знаю" - отдельные слова и пишутся через пробел. Нужно больше уделять внимания мелочам, а то иначе "просветления" не произойдёт.
  2. А чего ещё следовало ожидать? Заданы ведь только margin-top, вот и получается что у aaa наверху маргин 16, а внизу ничего, и у bbb тоже наверху 16, а внизу ничего. Вот и получается расстояние 16, а не 32... ничего другого и не следовало бы ожидать.
  3. Нашёл ещё решение. Не слишком шикарное, но зато всегда работает. Основная идея - ручная маршрутизация событий. На черновую это выглядит примерно так. Ясно что нужны ещё доработки чтобы работало в разных браузерах, но пока в FF3.6 и в Konqueror сработало. <html> <head> <style type="text/css"> .reddiv { position: absolute; left: 200px; top: 200px; background-color: red; width: 150px; height: 150px; z-index: 1; } .bdiv { position: absolute; left: 150px; top: 150px; width: 250px; height: 250px; border: 1px dotted orange; z-index: 2; text-align: center; color: white; } .bdiv .holdplace { height: 50%; } </style> <script type="text/javascript"> $ = function(id) { return document.getElementById(id); }; getDivs = function() { return document.getElementsByTagName('div'); }; getAbsoluteTop = function(element) { var top = 0; var node = element; do { top += node.offsetTop; node = node.offsetParent; } while(node); return top; }; getAbsoluteLeft = function(element) { var left = 0; var node = element; do { left += node.offsetLeft; node = node.offsetParent; } while(node); return left; }; getEventTarget = function(e) { return e.target || e.srcElement; }; isIntoDiv = function(x, y, div) { var left = getAbsoluteLeft(div); if( x < left || x > (left + div.offsetWidth) ) { return false; } var top = getAbsoluteTop(div); if( y < top || y > (top + div.offsetHeight) ) { return false; } return true; }; routeClick = function(e, div) { if(div.onclick) { div.onclick.call(div, e); } }; bodyClick = function(e) { if(isIntoDiv(e.pageX, e.pageY, $('baddiv'))) { for( var divs = getDivs(), i = 0, m = divs.length; i < m; ++i ) { var div = divs[i]; if(div.className != 'bdiv') { if(isIntoDiv(e.pageX, e.pageY, div)) { routeClick(e, div); } } } } }; reactLoad = function() { document.body.onclick = bodyClick; }; </script> </head> <body onload="reactLoad();"> <div id="reddiv" class="reddiv" onclick="alert('hello');"> AA </div> <div id="baddiv" class="bdiv"> <div class="holdplace"></div> BB </div> </body> </html> Очевидно, что routeClick должна быть хитрее и заполнять объект event правильными значениями, но это за кадром. Главное - идея в данном случае.
  4. Решение-то придумал, но оно дурацкое как я думаю. Это только частичное решение, так как если не дай бог понадобиться засунуть в bdiv больше чем мелкую надпись, то решение перестанет быть достаточным.
  5. Может и правильное, однако с тем что это не проблема - не соглашусь. Единственный способ обойти этот идотизм - это сделать bdiv маленького размера, сделать его inline и сдвинуть его так чтобы он оказался над красным. Однако это уродливо и имеет серьёзное ограничение: содержимое bdiv должно быть как можно более маленьким.
  6. Собственно проблема в том, что если один див закрывает собой другой, то даже если у него нет фона, то click мыши не проходит в тот див, что ниже, хотя body.onclick срабатывает. Код иллюстрирует проблему: <html> <head> <style type="text/css"> .reddiv { position: absolute; left: 200px; top: 200px; background-color: red; width: 150px; height: 150px; z-index: 1; } .bdiv { position: absolute; left: 150px; top: 150px; width: 250px; height: 250px; border: 1px dotted orange; z-index: 2; text-align: center; color: white; } .bdiv .holdplace { height: 50%; } </style> </head> <body> <div class="reddiv" onclick="alert('hello');"> AA </div> <div class="bdiv"> <div class="holdplace"></div> BB </div> </body> </html> Можно ли обойти ограничение и заставить срабатывать onclick у красного дива? Проблема воспроизводится в FF и в Konqueror. IE можно игнорировать в моём случае (не target).
×
×
  • 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