serdeles

Да, смартфон просто в html лежит, и его ни админка, ни js не касаются. В js смысла ради решения этой задачки копаться вряд ли есть, так как наладить их взаимоотношения с админкой будет непросто. Тогда придется заодно копать и php, чтобы написать дополнительный сниппет и т. д, и т. п. Наверно придется поизвращаться с прозрачными картинками (или пустыми блоками в размер картинкок). В крайнем случае, сотру блик :-) Спасибо, что подкинули пару идей. Буду копать дальше :-)

Дело в том, что у меня картинки в слайдер (да, он работает на js) в админке попадают не вручную, а автоматически при создании документа, собственно и с ссылкой всё так же происходит, она привязана к определенной картинке слайдера. Вид это имеет примерно такой: <div id="контейнер"> <div id="слайдер"><a href="ссылка"><img src="картинка"></a></div> <div id="слайдер"><a href="ссылка"><img src="картинка"></a></div> <div id="слайдер"><a href="ссылка"><img src="картинка"></a></div> <div id="девайс с бликом" style="z-index:1000;"></div> </div> При этом конструкция <div id="слайдер"><a href="ссылка"><img src="картинка"></a></div> является повторяемой и генерится автоматически, вместо "ссылка" и "картинка" стоят спецтеги админки. Таких «дивов» может быть сколько угодно, в зависимости от документов, откуда будут браться картинки для слайдера. Поэтому не очень понятно, куда тут поместить невидимые ссылки, и как каждую из них привязать к нужной картинке. Кстати, это пример, который я описал в самом начале — блок с бликом вверху и сслыки не работают. Если убрать z-index, ссылки будут работать, но зато блик будет обрезан, так как блок окажется под картинками.

Проблема в том, что вариант, где обработка ссылок вида (a href="ссылка") происходит при помощи js, меня не устроит. Неужели более простого решения не существует? В принципе, тут всё достаточно тривиально и без усложнения задачи. Простой слайдер, каких тысячи в интернете лежит. Единственная загвоздка — блик, который либо закрывает ссылку, либо закрывается картинкой. Уверен, это можно решить без углубления в дебри Javascript.

Попробуйте в #navy дописать overflow: hidden;

https://taxi.yandex.ru/?from=morda — при первом посещении этой страницы можно наблюдать модальное окошко, в котором находится слайдер. Он выполнен в виде смартфона. По клику по экрану смартфона или на кружочки справа от него, слайдер будет листаться. Я делаю нечто похожее. И столкнулся с такой проблемой: если делать блик на девайсе в виде png с прозрачной вырубкой (скажем, в виде телефона, в котором прорублено прозрачное окошко с бликом для картинок слайдера) и блок (<div>) с этим девайсом поместить над картинками (при помощи z-index), то ссылки (у каждой картинки в слайдере своя) работать не будут — ну, само собой: ведь png с телефоном наверху лежит. Если же положить блок с телефоном под низ, то о блике можно забыть. То есть он есть на самом девайсе (снаружи экрана), однако отсутствует на картинках (слайдах), которые пролистываются (ибо картинки лежат выше и закрывают собою блик). Если отрезать кусок блика от png с девайсом, и положить его в блок над девайсом и картинками, повторится ситуация номер 1: ссылки работать не будут. А вот у ребят из Яндекса получилось убить сразу обоих зайцев: и блик лежит поверх всего, и ссылки на картинках работают. Был бы благодарен за подсказку, как такое победить. И вдвойне был бы благодарен за рабочий пример подобного слайдера, чтобы понять, как там всё работает изнутри.

Тему запостил сюда, так как более подходящего форума из имеющихся не нашел. Проблема заключается в программе Dreamweaver. Вплоть до версии Adobe CS4 особых проблем у меня с ним не наблюдалось. И вот угораздило установить пятую версию «сюиты». С Дримвивером начались глюки. Главным образом, это связано с хоткеями. Поначалу всё работает нормлально. Потом внезапно Ctrl+C и Ctrl+V либо вовсе перестают работать, либо начинают выдавать сюрпризы, выполняя совершенно иные команды. Вопрос: сталкивался ли кто-нибудь с подобным? Есть ли способы одолеть эти траблы?

Это уже почти готово. Сейчас бьюсь над тем, чтобы активная картинка становилась по центру, а клик по затемненным картинкам справа и слева отвечал за слайдинг вперед-назад.

Ну я и хочу сам написать. Просто, поскольку не чувствую себя уверенно в jquery, буду делать гибрида из нескольких разных уже готовых скриптов. Сейчас как раз в процессе, так как не нашёл пока ничего похожего среди исходников, которые раскиданы по интернетам.

Надо сделать галерею примерно такого плана: http://alexwilsonphoto.com/gallery/showcase/frontpage/. В оригинале она работает как cms — скачал, но там очень замороченный php движок, множество php файлов и вообще количество файлов и папок этого движка пугает. Кроме того, я буду прикручивать галерею к другому движку — ModX, поэтому мне совершенно не нужна интеграция всего этого безобразия на сайт. Однако, мне кажется, что такую галерею можно сделать и без php. Нужна подсказка опытных верстальщиков, и людей, хорошо подкованных в работе с JavaScript и Jquery — куда копать? Думаю, скрестить обычную слайдер-галерею с примерно такой горизонтально листалкой страниц http://tympanus.net/Tutorials/WebsiteScrolling/index.html. Был бы благодарен за дельный совет, или за примеры какой-нибудь похожей галереи, созданной средствами CSS и Jquery. Заранее благодарен за ответ.

Понадобился скрипт, с помощью которого можно было бы выводить при загрузке страницы случайное фоновое изображение для блока. Блок (div) имеет в качестве фона картинку, путь к которой прописан в css. Само собой, блок имеет класс, связанный с css файлом. Нужно, чтобы при перезагрузке страницы фоновое изображение каждый раз менялось случайным образом (всего предполагается несколько картинок). Буду очень благодарен за помощь.

Не хочу показаться нескромным, но по сравнению с очень многими работами, представленными в данном разделе этого форума (про все не говорю ? я просмотрел только пару страниц), данный сайт можно отнести к одному из лучших. Конечно, минусы тоже имеются ? прежде всего, это вес графики. Но в целом вполне достойно сделано. Немного оживить, подумать как сделать текст более читабельным не в ущерб стилю, и вс? будет хорошо. P.S. Использование анимации на мой взгляд, совершенно излишне, я е? и не заметил, пока не потыркал кнопку ?Отключение анимации? пару раз.

Это интернет-магазин (на Shop Script). Кто с ним сталкивался, тот в курсе, что там ключевые фишки (открытие корзины, версия для печати и пр.) подразумевают наличие у клиента включенного JS. Так что в данном случае это не проблема. Сделал, протестил в IE7, FF, Opera, Safari ? вс? работает. Меня это вполне устраивает. Спасибо за помощь.

Это не такая уж большая проблема, Джеймс ;-) Удачно отыграть в Питере )))

А в ч?м проблема?

О, спасибки, щас попробую :-)

Возможно, дело в DOCTYPE

Будете смеяться, но с html я на ты, особых проблем с ним никогда не возникало. Но вот столкнулся с интересной проблемкой. Может, кто подскажет, как е? решить. Дело касается форм. Предположим есть форма авторизации : логин и пароль. В качестве кнопки используется изображение, но помимо него хотелось бы использовать ещ? и обычную текстовую ссылку типа . Пример кнопки: <input type="image" src="image-button.gif" value="OK_BUTTON"> Понятное дело, кнопка обработается посредством action формы. А что делать с текстовой ссылкой ? непонятно. Собственно, куда она будет ссылаться? Возможно, есть метод, как связать ссылку с формой?

Наш?л. Спасибо.

Подскажите, что надо изменить в коде, чтобы в FF и Opera вс? отображалось также, как в ИЕ. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Untitled Document</title> <style type="text/css"> body {background-color:#000000; margin:0;} #main{background-color:#0000ff; margin:0 auto; padding:5px; padding-top:20px; padding-bottom:20px; width:740px;} #inside{margin:0 auto; width:700px; text-align:center;} #header{margin:0 auto; padding:0;} #h-left{background-color:#FF0000; width:366px; float:left; height:86px;} #h-right{background-color:#FFCC00; float:right; width:330px; height:86px;} </style> </head> <body marginheight="0" marginwidth="0" topmargin="0"> <div id="main"> <div id="inside"> <div id="header"> <div id="h-left"></div> <div id="h-right"></div> </div> </div> </div> </body> </html> В общем, нужно, чтобы высота div'a main изменялась в зависимости от количества вложенного туда контента (предполагается, что там будут другие блоки, их количество будет меняться), и чтобы при этом сохранялись все заданные отступы. Заранее спасибо за помощь!

To: rmaksim ? прикольно, спасибо :-) Но в мо?м случае нужна именно объ?мная тень... Приходится с png заморачиваться :-) To: YETI ? да, я юзаю для png java script, который помогает корректно отображать png с прозрачностью в ИЕ, но когда доходит до фоновых изображений, везде обломы... Если у вас есть примеры фиксов, был бы благодарен, если бы поделились: весьма полезным может оказаться не только для меня, но, думаю, и для многих. Очень важно, чтобы их можно было юзать в качестве, напрмер, тех же теней на паттерных бэкграундах в качестве заливки для таблицы или блока.

To Fu-tai: вполне стоит :-) Смотря в ч?м измерять. Особенно если эти часы мучений в будущем помогут сэкономить массу времени и усилий. To Dimitry Wolotko: для меня важна сама методика, а не готовое решение. На сайте Лебедева приведены примеры, которые годятся в основном для текста, форм ввода данных и т. д, то есть они не абсолютно универсальны, но при внимательном изучении кода, думаю, приспособлю под свои нужды. Лично я склоняюсь к варианту с табличным формированием тени, так как таблицы в мо?м случае актуальнее. Но в будущем, думаю, и варианты с блоками тоже пригодятся. Правильно вы сказали: задача есть и деньги платят ))) Если бы все задачи были банальными и л?гкими, то какой же кайф от работы? А после удачного завершения кайф вообще немереный :-)

Видимо смысл делать тень есть, просто не все знают, как... Вот, наш?л информацию о тенях посредством css на паттерных фонах. Может, кому поможет.

Ясно, что картинкой. Но png с прозрачностью в качестве фона (типа тень) не работает в ИЕ. Gif на неоднородном фоне тоже бесполезен. Тень имеет место быть, если например, под "джинсовым" фоном находится более светлый фон, скажем, светло-серый. А тень отбрасывает таблица, которая находится поверх обоих частей бэкграунда. В данном случае смысл есть. Просто хотелось бы понять, возможно ли сделать тень на неоднородном фоне с помощью css, или об этом можно забыть, и думать над другими вариантами решения. "вкладывать тенеобразующее " - если можно поподробнее об этом, может, подойд?т... Кстати, а фильтры будут корректно работать в Opera или Firefox?

Есть бэкграунд, который представляет собой узор. Например, такой: , или такой: . Как при помощи css сделать тень на таком фоне? Интересует корректная работа результата как минимум в ИЕ, Firefox, Opera и Safari. Спасибо.

Может, кому поможет. Скрипт, который позволяет юзать png с прозрачным фоном как минимум в IE, Opera и FireFox: function setElementOpacity(sElemId, nOpacity) { //alert(nOpacity); var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); //alert(elem); if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью if (opacityProp=="filter") // Internet Exploder 5.5+ { nOpacity *= 100; // Если уже установлена прозрачность, то меняем е? через коллекцию filters, иначе добавляем прозрачность через style.filter // try{ var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того чтобы не затереть другие фильтры используем "+=" //} //catch(e){ //oAlpha = elem.style.opacity; //alert(e.message); //} } else // Другие браузеры elem.style[opacityProp] = nOpacity; } function getOpacityProperty() { if (typeof document.body.style.opacity == 'string') // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9, IE7) return 'opacity'; else if (typeof document.body.style.MozOpacity == 'string') // Mozilla 1.6 и младше, Firefox 0.8 return 'MozOpacity'; else if (typeof document.body.style.KhtmlOpacity == 'string') // Konqueror 3.1, Safari 1.1 return 'KhtmlOpacity'; else if (document.body.filters && navigator.appVersion.match(/MSIE ([d.]+);/)[1]>=5.5) // Internet Exploder 5.5+ return 'filter'; return false; //нет прозрачности } function checkPNGImages(){ try{ var imColl = document.getElementsByTagName('img'); for(var i = 0; i < imColl.length; i++){ var img = imColl[i]; if(img.className == 'smart-picture'){ enableAlphaImages(img); } } }catch(e){} } function enableAlphaImages(img){ var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, ''); var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5); isDOM = document.getElementById //DOM1 browser (MSIE 5+, Netscape 6, Opera 5+) isOpera = isOpera5 = window.opera && isDOM //Opera 5+ isMSIE = document.all && document.all.item && !isOpera //Microsoft Internet Explorer 4+ isMSIE5 = isDOM && isMSIE //MSIE 5+ if(!rslt){ return; } //var img = document.images[name]; //img_name = img.src; /* isDOM = document.getElementById //DOM1 browser (MSIE 5+, Netscape 6, Opera 5+) isOpera = isOpera5 = window.opera && isDOM //Opera 5+ isMSIE = document.all && document.all.item && !isOpera //Microsoft Internet Explorer 4+ isMSIE5 = isDOM && isMSIE //MSIE 5+ */ if (isMSIE5) { img_name = img.src; img.src = "images/oblom.gif"; img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img_name + "', sizingMethod='crop')"; } } Под oblom.gif подразумевается прозрачный gif-рисунок, размером 1х1 px. Сам скрипт лучше аттачить, чтобы не занимал много места.