cy6erGn0m
-
Posts
6 -
Joined
-
Last visited
cy6erGn0m's Achievements
Explorer (1/14)
0
Reputation
-
Что-то вроде такого думаю. <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> А вообще, не мешало бы хоть минимальную грамматику соблюдать: "не" и "знаю" - отдельные слова и пишутся через пробел. Нужно больше уделять внимания мелочам, а то иначе "просветления" не произойдёт.
-
А чего ещё следовало ожидать? Заданы ведь только margin-top, вот и получается что у aaa наверху маргин 16, а внизу ничего, и у bbb тоже наверху 16, а внизу ничего. Вот и получается расстояние 16, а не 32... ничего другого и не следовало бы ожидать.
-
Нашёл ещё решение. Не слишком шикарное, но зато всегда работает. Основная идея - ручная маршрутизация событий. На черновую это выглядит примерно так. Ясно что нужны ещё доработки чтобы работало в разных браузерах, но пока в 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 правильными значениями, но это за кадром. Главное - идея в данном случае.
-
Решение-то придумал, но оно дурацкое как я думаю. Это только частичное решение, так как если не дай бог понадобиться засунуть в bdiv больше чем мелкую надпись, то решение перестанет быть достаточным.
-
Может и правильное, однако с тем что это не проблема - не соглашусь. Единственный способ обойти этот идотизм - это сделать bdiv маленького размера, сделать его inline и сдвинуть его так чтобы он оказался над красным. Однако это уродливо и имеет серьёзное ограничение: содержимое bdiv должно быть как можно более маленьким.
-
Собственно проблема в том, что если один див закрывает собой другой, то даже если у него нет фона, то 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).