botyaslonim

Вдохновил этот пример: http://radio.momoiro.ru/ballz.html Можно ли так сделать с изображением? Разбить его на кусочки, и чтобы при прохождении курсора оно распадалось еа куски, а после куски снова собирались в картинку?

Вот на этой странице: http://maksimslepov.narod.ru/Index.html Там где Образование, Опыт работы и т.д. Нарыл я подстветку div'a, которая заключается в подключении вот этой библиотеки: /* wwww.tigir.com - 14.06.2006 Библиотека hltable.js из статьи "Подсвечивание строк таблицы" - http://www.tigir.com/highlight_table_rows.htm */ function highlightTableRows(tableId, hoverClass, clickClass, multiple) { var table = document.getElementById(tableId); //если не был передан четвертый аргумент, то по умолчанию принимаем его как true if (typeof multiple == 'undefined') multiple = true; if (hoverClass) { //регулярное выражение для поиска среди значений атрибута class элемента, имени класса обеспечивающего подсветку по наведению мыши на строку. //Данное рег. выражение используется и в обработчике onclick var hoverClassReg = new RegExp("\\b"+hoverClass+"\\b"); table.onmouseover = table.onmouseout = function(e) { if (!e) e = window.event; var elem = e.target || e.srcElement; while (!elem.tagName || !elem.tagName.match(/td|th|table/i)) elem = elem.parentNode; //Если событие связано с элементом TD или TH из раздела TBODY if (elem.parentNode.tagName == 'TR' && elem.parentNode.parentNode.tagName == 'TBODY') { var row = elem.parentNode;//ряд содержащий ячейку таблицы в которой произошло событие //Если текущий ряд не "кликнутый" ряд, то в разисимости от события либо применяем стиль, назначая класс, либо убираем. if (!row.getAttribute('clickedRow')) row.className = e.type=="mouseover"?row.className+" "+hoverClass:row.className.replace(hoverClassReg," "); } }; } if (clickClass) table.onclick = function(e) { if (!e) e = window.event; var elem = e.target || e.srcElement; while (!elem.tagName || !elem.tagName.match(/td|th|table/i)) elem = elem.parentNode; //Если событие связано с элементом TD или TH из раздела TBODY if (elem.parentNode.tagName == 'TR' && elem.parentNode.parentNode.tagName == 'TBODY') { //регулярное выражение для поиска среди значений атрибута class элемента, имени класса обеспечивающего подсветку по клику на строке. var clickClassReg = new RegExp("\\b"+clickClass+"\\b"); var row = elem.parentNode;//ряд содержащий ячейку таблицы в которой произошло событие //Если текущий ряд уже помечен стилем как "кликнутый" if (row.getAttribute('clickedRow')) { row.removeAttribute('clickedRow');//убираем флаг того что ряд "кликнут" row.className = row.className.replace(clickClassReg, "");//убираем стиль для выделения кликом row.className += " "+hoverClass;//назначаем класс для выделения строки по наведею мыши, т.к. курсор мыши в данный момент на строке, а выделение по клику уже снято } else //ряд не подсвечен { //если задана подсветка по наведению на строку, то убираем её if (hoverClass) row.className = row.className.replace(hoverClassReg, ""); row.className += " "+clickClass;//применяем класс подсветки по клику row.setAttribute('clickedRow', true);//устанавливаем флаг того, что ряд кликнут и подсвечен //если разрешена подсветка только последней кликнутой строки if (!multiple) { var lastRowI = table.getAttribute("lastClickedRowI"); //Если то текущей строки была кликнута другая строка, то снимаем с неё подсветку и флаг "кликнутости" if (lastRowI!==null && lastRowI!=='' && row.sectionRowIndex!=lastRowI) { var lastRow = table.tBodies[0].rows[lastRowI]; lastRow.className = lastRow.className.replace(clickClassReg, "");//снимаем подсветку с предыдущей кликнутой строки lastRow.removeAttribute('clickedRow');//удаляем флаг "кликнутости" с предыдущей кликнутой строки } } //запоминаем индекс последнего кликнутого ряда table.setAttribute("lastClickedRowI", row.sectionRowIndex); } } }; } ну и соответствующего кода в html: <script type = "text/javascript"> highlightTableRows("myTable1","hoverRow","clickedRow"); </script> <script type = "text/javascript"> highlightTableRows("myTable2","hoverRow","clickedRow"); </script> Так вот, если несколько раз понажимать на ссылки, то подсветка "залипает", то есть не возвращается состояние .clickedRow. И div остаётся подсвеченным. Почему так?

Лень и тупость Нашёл с помощью Фаербага несколько классов, которые Яндекс присваивает элементам таблицы, из которой состоит форма поиска. Нарисовал эти классы у себя в CSS, придал им нужные HEIGHT. Пока, т-т-т, работает как надо!

Вот как раз и составляет... Мне надо, чтобы кнопки выбора были непосредственно под формой ввода, а не где-то там внизу.

Интересно... Фаербаг выдаёт правильное визуальное расположение... Но ещё сейчас попробую. Ага. Получилось вот что. Если div'у с формой яндекса сделать бОльшую высоту, то видно, что кнопки выбора поиска (по сайту или по яндексу) съезали сильно вниз, расстояние между ними и окном ввода пикселей 50.

Да, на локальной то же самое, на всех браузерах. Поначалу, кстати, было нормально. Работало. Потом потихонечку пилил сверху вниз, на поиск внимания не обращал. Потом сделал футер, поднимаю глаза - а там эта шляпа. Попробовал получить новый код на Яндексе, вставил - то же самое... Поскольку я ещё мало чего знаю, задаю вопрос здесь. Возможно, косяк с моей стороны, что-то в коде не так написал.

F5 нажмите. Она ещё появляется через раз. В верхней полосе, там где новости.

http://maksimslepov.narod.ru

Помогите, не могу разобраться. На сайте Яндекса заказал код для прикручивания поиска себе на сайт. Получил вот этот код: <div class="yandexform" onclick="return {type: 3, logo: 'rb', arrow: false, webopt: true, websearch: false, bg: '#DDDDDD', fg: '#000000', fontsize: 16, suggest: true, site_suggest: true, encoding: ''}"> <form action="http://yandex.ru/sitesearch" method="get" target = "_blank"><input type="hidden" name="searchid" value="193016"/><input name="text"/><input type="submit" value="Найти"/></form> </div><script type="text/javascript" src="http://site.yandex.net/load/form/1/form.js" charset="utf-8"></script> Поставил себе на сайт, получил вот это: http://picasaweb.google.ru/lh/photo/oEujce...feat=directlink А должно было быть так: http://picasaweb.google.ru/lh/photo/prtRC5...feat=directlink Где ошибка?

)) Вот! Не понял, чего я хотел, зато дал правильный совет! Интуитивно, наверное... У меня ситуация такая: красных блока не 1, как у ТС, а 2. Нужно было, чтобы при разрешении 1600 был виден только центральный, при ctrl- начали появляться ОБА блока (соотвественно, вся конструкция находится по центру), а при ctrl+ увеличивался только центральный блок и появлялась полоса прокрутки (только в пределах центрального блока, красные квадратики скрыты). Получившееся решение я опубликовал. Может, кому будет нужно.

Нет, не игнорю. Подумал, что ты общаешься с ТС, т.к. речь про красный квадратик. Спасибо, с правой частью твой способ работает, всё как надо. Только, если брать твой пример, див класс decor я вынес из дива контент. Тогда у меня заработало как надо. Теперь вопрос: что с левой частью, как прикрутить к основному блоку слева? Всё, окончательно допилил. Выкладываю, что получилось. Чтобы не считали странным типом CSS body {margin: 0; min-width:1600px; _width:expression(document.documentElement.clientWidth < 1600 ? "1600px" : "auto");} #wrapper{width: 100%; overflow: hidden; position: relative;} #center {position: relative; width: 1600px; height: 1000px; margin:0 auto;} #right {position: absolute; left:100%; top:0; width: 500px;} #left {position: absolute; top:0; left:-400px; width: 350px; padding: 30px;} HTML <body> <div id = "wrapper"> <div id="center"> блаблабла ———- ———- </div> <div id = "left"> <p>.................</p> </div> <div id="right"> <p>................</p> </div> </div> </body>

Эмпирически вывел такую штуку. Не могу понять, откуда такое значение - 450... (Ширина основного блока у меня 1600) #left, #right {width: 50%;} #left {float: left; margin-right: -800px; height: 1000px;} #left-inner {margin-right: 800px; height: 1000px;} #right {float: right; margin-left: -801px; z-index: -1; height: 1000px;} #right-inner {margin-left: 450px; height: 1000px;} #center {position: relative; z-index: 1; float: left; width: 1600px; height: 1000px;} В этом примере горизонтальной полосы прокрутки нет, но только правый текст центруется по-уродски... Промежуточное решение. И опять же, вертикальная полоса прокрутки никуда не делась.

Ха. У меня осталось то же самое. Мало того, на всех браузерах, кроме IE, появилась ненужная вертикальная полоса прокрутки...

margin не помогает. Появляется ненужная полоса прокрутки.

У меня аналогичная ситуация. А как сделать так, чтобы при разрешении менее 1024 появлялась полоса прокрутки, но только в пределах основного дива? А при бОльшем (например, 1600), был виден и красный блок?

Учицца надо, хотя и пятниццо...

Радует то, что этот косяк вылезет на мониторах от 2400 х .. и выше. То есть, косяк не имеет смысла для 99,9% пользователей.

Уменьшении масштаба. Берёшь нажимаешь ctrl, не отпуская, нажимаешь "-" До определённого момента content группируется в пределах своего блока (div), а потом вылезает за пределы. В IE и Opera такого не наблюдается.

overflow:hidden работает в Опере и IE, Хром и Лис не поддерживают... (при сильном ctrl -- текст вылезает за пределы бокса). Height поставил, если чё...

Эврика! Спасибо большое, получилось! HTML <div id = "main"> <div id = "text"> <p> <img id = "pict" src = "111.jpg" title = "" alt = "" align = "right"/> Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content Content content Content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content Content content Content content Content content content </p></div> CSS #main {position: absolute; top: 0%; left: 50%; width: 1600px; margin-left: -800px;} #text {position: absolute; top: 30%; left: 52%; width: 800px; padding: 20px; float: left;} #pict {float: right; padding: 0px 10px 5px 30px;} Но, всё же, вопрос. Что, если вместо картинки нужно будет вставить какой-нить див со своим содержимым? Как тогда устроить обтекание?

Короче, чтобы не быть многословным, даю картинку. Нужно, чтобы при любом разрешении экрана все части никуда не разъезжались. Позиционирование идёт по центру. http://picasaweb.google.ru/lh/photo/oSzlBq...feat=directlink

Фсе пишут , что align - устарело. Кроме того, нужно, чтобы свойство применялось в CSS, чтобы не ковырять каждый раз HTML-код. ps. Кстати, тоже не работает

Не-а. Попробовал ради прикола (хотя у меня все style всё-равно выведены в CSS) - не работает.

Создаю простенький макет на div'ах. Нужно, чтобы текст ("content content ... ") обтекал картинку (img src = "111.jpg"). Для этого написал такой код: </head> <body> <div id = "main"> <div id = "pict"><img src = "111.jpg" title = "" alt = ""/></div> <div id = "text"> <p>Content content content Content content content Content content content Content content content Content content contentContent content content Content content content Content content contentContent content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content Content content content </p></div> <img src = "1.jpg" title = "" alt = "" usemap = "#coordinates"/> <map name = "coordinates"> <area shape = "circle" coords = "60,970,50" href = "index.html" title = "Назад" alt = "Назад"/> <area shape = "circle" coords = "180,970,50" href = "ola.html" title = "Вперёд" alt = "Вперёд"/> </map> </div> Соответственно, прикручиваю такой CSS: ....... #main {position: absolute; top: 0%; left: 50%; width: 1600px; margin-left: -800px;} #back {position: absolute; top: 10%; left: 10%;} #forward {position: absolute; top: 95%; left: 95%;} #pict {float: right; position: absolute; top: 32%; right: -3%;} #text {position: absolute; top: 32%; left: 40%; width: 800px; padding: 20px;} В итоге: текст (id = "text") залазит на картинку (id = "pict") Где ошибка?

Ну тогда получается уже скрипт, или я не прав? Просто стандартными средствами HTML+CSS как-то так получается...