monkeymafia
User-
Posts
38 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by monkeymafia
-
В этом коде находим высоту body (не путать с высотой экрана). <script language="javascript"> var height=0; if (self.screen) { height = document.body.offsetHeight; } </script> Если футер по высоте допустим 30px то задаем в CSS #footer {} и присваиваем его блоку в html. <script language="javascript"> var obj; obj=document.getElementById('footer'); obj.style.position='absolute'; obj.style.top=height - 30,'px'; </script> Насчет последней конструкции не уверен, надо порыться в интернете - как присоединить к цифре буквы 'px', так как насколько я знаю css нужно знать с какими единицами работать. Логика всего выше сказанного такак : 1.Узнаем размер body. 2.Правильно располагаем элемент футер. 3.Задаем ID футера абсолютное значение, чтоб мы могли расположить его где угодно на экране. 4.Задаем его расположение от верхнего края ...т.е размер экрана минус высоту самого футера. Правда выше написанное имеет смысл только если нет полосы прокрутки справа, т.е контент умещается в начальное поле body. Потому как таким образом мы задаем четкое расположение элементу футер.Для того чтоб все время прижимался к низу - надо писать код,что при прокрутке все время обновлялось положение. Я не настолько силен в JS к сожалению, я собственно выучил только то что надо было для одного проекта. Легче не изобретать велосипед и делать через CSS: http://zodios.net/htmlcss/downfooter.html Здесь подробно описано как это сделать несколькими вариантами http://csstemplater.com/ Здесь можно создать CSS макет для сайта, можно выбрать опцию "прижать футер к низу окна браузера"
-
Этот код получает размеры экрана в 2 переменные : width - ширина, height - высота. <script language="javascript"> <!-- var height=0; var width=0; if (self.screen) { width = screen.width height = screen.height } //--> </script> Этот код изменяет значения css стиля в зависимости от значения переменных width или height. <script language="JavaScript"> if ( height < 769) { var obj; obj=document.getElementById('news'); obj.style.height='225px';} </script> *В данном случае если высота экрана меньше чем 769 пикселей (т.е 768 и ниже, 17' мониторы) то JS находит ID с названием news и уменьшает его изменяет его параметр высоты на 225px, другими словами применяет этот код : #news {height:225px;} PS А вообще люди правы насчет низкого разрешения! 1024х768 уже раритет, а про 800х600 забудь
-
Azadi, У меня в стране сейчас почти пол третьего ночи - с трудом понимаю мысль , но чувствую, что такого не пробовал. завтра преступлю к экспериментам - спасибо за идею! slicemasta, Ну про hover эт я в курсе, я ж говорю поэтому и установил фикс whatever:hover. Ну вот собственно выложил кусочек сайта на DepositFiles. Там как бы менюшка, в папочке IMG все нужные Png'шечки! Как бы так)Взгляните - может действительно что то не так делаю. Мне просто кажется ,что если вы сможете на гифках провернуть такое...то и Png Там можно будет за милую душу пропихнуть!
-
slicemasta, Ну дизайнеры мне так нарисовали сайт - что у меня весь проект это одна сплошная PNG картинка) образно... Потому все что сейчас есть на сайте все в формате PNG! Так что как видишь я фикс уже поставил! DD_belatedPNG такой вот. Хз..я еще поиграюсь...но вроде выставил путь к PNG буллетов. Кстати идея с gif'ками очень понравилось...но проверил и оказалось тоже самое. Я думаю тут проблема не в формате, а проблема в том ,что картинка находится в background'e! Насколько я знаю IE коряво работает с hover классом...опять же поставил фикс...а еще где то читал, что PNG фикс закрывает возможность изменять картинку например при наведении. Интересно какими Фиксами вы пользуетесь - особенно когда надо менять background
-
К сожалению проблема осталась Я оказывается в последний раз на IE7 проверял...на IE6 мои буллетс не отображаются... www.farmaceutica.md! в IE6 без буллетов...в остальных браузерах нормально отображается
-
Вопрос решен. В нужных местах поигрался с vertical-align, а в целом картинки грузил в background. Осталось, только поиграться с расположением текста и убрать отступы в подменю в IE. Ну это уже совсем другая история Всем огромное спасибо за помощь и отзывы. Приезжайте в Молдову - выпьем пива
-
Zippovich, Пробовал - не помогает! к сожалению slicemasta, Пробовал заменять, но из-за того что у меня итак там куча классов , id и везде бэкграунды...получается странная картинка. Для меня Background не вариант...хотя идея хорошая. была бы менюшка попроще так бы и поступил!
-
Доброго времени суток. Проблема вот какая : создал меню с выпадающим списком, все работало пока не проверили на IE6. пришлось переделывать. После переделки получилось, что в самом меню элементы расположены примерно так : <li>Главная</li> <li>Не главная<img src='someimage'></li> <li>Тем более не главная</li> someimage в данном случае это стрелочка индикатор выпадающего списка: курсор над кнопкой, стрелка указывает что список выпал(так скать для красоты). Вот в чем проблема элементы меню находятся на разных уровнях, если считать от верхнего края...то "главная" примерно на 5 пикселей, "Не главная" на 7 пикселях и "Тем более не главная" на 5 пикселях. Понятно с чем связанно - с тем что в пункте "Не главная" есть картинка и за счет этого текст идет по уровню нижнего края картинки. Итак вопрос : Как сделать и текст и картинку на одном уровне, да еще и таким образом, чтоб все между тэгами <li>...</li> осталось посередине. Желательно вариант для IE 6, потому что остальные браузеры не привередливые. *Вставляю картинку из предыдущего моего поста, чтоб показать как должны располагаться элементы в кнопке.
-
Нашел - jscrollpane. плагин для Jquery. Даже уже портировал. Родился новый вопрос - можно ли сделать элемент прокрутки (само тело скролла) фиксированной длины? Вот таким он получился у меня : Вот таким бы я хотел ,чтоб он получился : Другими словами - в центре есть элемент ,который вытягивается и сужается, в моем случае - это просто полоса в 1px с черным телом. А я бы хотел, что не в зависимости от кол-ва контента , скролл всегда был маленьким и изящным.
-
Здравствуйте! Уперся в необходимость скроллбара в Div'e, да причем не простого, а чтоб можно было его как угодно оформлять и использовать в любых комерческих проэктах! На JavaScript есть интересный скрол - зовется FleXcroll! Вобщем он полностью соответствует требованиям - но в рид ми прописана строчка о то ,что не стоит использовать его в комерческих проэктах не согласовав с авторами. Как это реализовать ? Какой скрипт лучше использовать ? PS: У меня получилось осуществить стандартный скроллбар в Div'e - посредством overflow-y:scroll и заданием фиксированного размера для DIV. Хотелось бы узнать как его можно "разукрасить" ?
-
В меню 6 пунктов, 3 из них с выпадающим меню. Следовательно эти самые Png-Bullets должны находится только на 3ех. Если я буду менять фон обычным способом, то он будет распространятся на все пункты меню. А мне не нужны стрелки на трех лишних пунктах меню. + ко всему когда я вставляю картинку стрелки в кнопку , то автоматически текст с кнопкой центруются, а если ставлю как бэкграунд : во первых рисунок кнопки фиксируется в определенном положении,во вторых надо сдвигать текст вручную немного левее,чтоб выглядело будто отцентровано. Вот CSS код всего меню: #nav { display: block; padding: 0; position:relative; } #nav li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; width: 140px; } #nav a { display: block; } #nav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0;} * html #nav ul { line-height: 0; } /* IE6 "fix" */ #nav ul a { zoom: 1; } /* IE6/7 fix */ #nav ul li { float: none; padding:0;} #nav ul ul { top: 0; } #nav ul { width: 140px; position:absolute} #nav ul ul { left: 140px; } #nav { background-color: none; height: 33px;} #nav *:hover { background-color: none; } #nav a { color: white; font-size: 12px; text-align:center; padding: 10px; line-height: 1; text-decoration: none; font-weight:bold; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; background:url(img/button1.png)} #nav li.hover a { background-color: none; } #nav a.hover {background:url(img/button_bg1.png); /* Цвет фона под ссылкой */} #nav ul { top: 33px;} #nav ul li a { background-color: none; font-size: 10px; text-align:center; color:#999; border-bottom: 1px dashed #CCC; padding-top:4px; padding-bottom:4px; } #nav ul a.hover { background-color: none; color:#000; } #nav ul a { border-right: none; opacity: 1.0; filter: alpha(opacity=100); background: none;} #nav li.hover img {background-image:url(img/active.png); border:none;} Просто по большей части мне необходимо узнать, что за странная рамка вокруг рисунка образовалась! Как бы у меня вся страница напичкана png'шками и везде оно выглядит нормально. Другое дело, что везде я вставляю картинки <img src...> а здесь из css через background-image. Тоесть вопросы следующие : 1.Как избавиться от рамки вокруг png в IE ? 2.Возможно ли получить доступ к src тэга img из css, и если да, то как? чтобы можно было задать что то вроде #picture {src:"такой то"} #picture :hover{src:"другой то"} 3.Возможно ли изменить фон выбранной кнопки меню,и если да, то как? Ответ на один из этих вопросов решит мою проблему. PS: Вопрос решен (раком конечно же). Создал прозрачную png картинку размером 10x7 и вставил ее в <img src="img/blank_bullet"> . остальное осталось по прежнему. Теперь сквозь эту прозрачную картинку в IE все отображается также как и в Opere. Но я был бы не против узнать ответы на заданные мною вопросы! Заранее спасибо
-
Рисунок стрелки - обычный PNG рисунок,размеры 10x7 с прозрачностью 32%. inactive.png! Есть второй рисунок - те же параметры - называеться active.png. Итого имею 2 файла. При наведении на Пункт меню рисунок с inactive меняется на active. Реализовано следующим образом - в Html вставлен <img id="bullet"> , а в css я уже в зависимости от обычного положения курсора или hover меняю background-image картинки. Показать страницу с траблом? Ты имеешь ввиду выложить скриншот рабочего стола или код страницы и стиля целиком?
-
Здравствуйте ! Для моего проэкта мне необходимо горизонтальное меню, чтоб при наведении на нее курсора, элемент меню подсвечивался, текст не изменялся в цвете, изменялась стрелочка-индекатор, которая указывает на то что это выпадающее меню. Вот фрагмент ,того как это выглядит у меня в Opera : Собственно на браузере Opera задача выполнена так, как надо! А на IE тот же фрагмент меню выглядит вот так : Заметьте, что по краям моих png'шек в IE обрисовалась странная рамка. Вот собственно вопрос, как от нее избавиться? CSS #nav li.hover img {background-image:url(img/active.png); border:none;} .bullet { background-image:url(img/inactive.png); border:none; width:10px; height:7px; } HTML <li><a href='#'>О Нас <img class="bullet"></a> PS: <li> является элементов главного меню, не закрыл тэг, потому что дальше идет код связанный с подменю!