Блочная верстка в 3 колонки (fluid layout) - Статьи - Журнал Веб-дизайн. Эта статья из A List Apart послужила большим источником вдохновения для меня. После «тест-драйва» указанного в ней метода, я решил применить отрицательные внешние полоски (negative margins) с точностью до наоборот. Я думаю, что главное преимущество этой техники состоит в том, что используется меньше несемантических элементов и на один плавающий блок меньше. Это также, лечит маленькие проблемы, не перечисленные в оригинальном демонстрационном примере: Ссылки в правой колонке не работают в Opera 6 Возникают проблемы с прорисовкой фона в MSIE В разметке отсутствует структурный хак, который не позволяет очистить место после левой колонки в Netscape Navigator 6 Мой новый метод не использует: CSS хаки Структурные хаки для очистки плавающих элементов IE/Win условные комментарии Загадочные CSS правила Длинные таблицы стилей Надписи «Best viewed in...»
Эта страница показывает основную технику, но я создал «более сложный» проект, основанный на этом решении: это - вызов CSS. Логика Разметка CSS файлы. 10 Rules of Front End Coding. What follows here is a series of 10 things to remember and practice on each web development project. I have listed them here in order of importance as many of the steps build on each other. If you take nothing else away from the reading, please take Rules #1 and #2 to heart and practice them. I think solving those two problems will lead to better design and better implementation in websites across the Internet. 1. Especially in hard economic times, business and individuals alike are trying to cut costs and keep projects down to a minimum. 2. For those who are a designer/developer all-in-one machine, this one should be easy. Don’t leave the creativity solely to the designer either!
Note: Rules 3 through 10 build off these first two rules. 3. Even today, we still use the phrase “cut up the design” to describe the process of moving a design from Illustrator or Photoshop into the finished HTML/CSS layout. That was the old web. 4. What is the “Best Image Format” you ask? 5. 6. 7. 8. 9. 10. Simile TimeLine — библиотека для отображения событий на шкале времени / JavaScript. Время идет вперед. Годы летят, только успевай считать уж сколько прошло их с тех пор как в школу пошел, как поступил в институт, как женился да дети родились. А ведь помимо своей жизни есть еще много вещей которые изменяются, развиваются, появляются и исчезают с течением времени. Так вот интересным инструментом для наглядного представления событий и периодов на шкале времени является Simile TimeLine.
Далее я расскажу, что сподвигло меня использовать данный инструмент, и в чем я нахожу его использование крайне удобным. В моем описании будет немного про Астериск, колл-центры и, собственно, javascript-библиотеку Simile TimeLine. Недавно появился интересный проект по организации call-центра на Астериске. Одним из требований проекта было прием звонков только зарегистрированными операторами в системе. Заказчик имеет более десятка сотрудников операторов, которые принимают звонки. Подробное руководство "Как начать использовать Simile TimeLine". Плагин jQuery jTruncate - элегантная обрезка текста на страницах | Материалы проекта RUSELLER.COM. Плагин jTruncate обеспечивает простую и настраиваемую обрезку длинного текста на ваших страницах для компактного размещения содержания. Использование Опции jTruncate Плагин jTruncate позволяет настраивать различные аспекты операции обрезки текста.
Доступны следующие опции: length: По умлочанию - 300 Количество символов перед обрезкой текста. minTrail: По умолчанию - 20 Минимальное количество символов сверх определенного в опции length для обрезки текста. MoreText: По умолчанию - "more" Текст, используемый для ссылки "больше". lessText: По умолчанию - "less" Текст, используемый для ссылки "меньше". ellipsisText: По умолчанию - "... " Текст, добавляемый к обрезаной части. moreAni: По умолчанию - пустая строка Аргумент скорости для метода show() (подробно описано здесь). lessAni: По умолчанию - пустая строка Аругмент скокрости ддля метода hide() (подробно описано здесь). Примечания Если вы изменяете методы анимации, установленные по умолчанию, то в точке обрезки текста появится новая строка. Примеры. Анализ сайта Почты России и попытка сделать его лучше / Интерфейсы. Занесло недавно на сайт Почты России, задерживали посылку.
Давно пугал этот сайт, поэтому решил проанализировать, что же в нем такого ужасного и попробовал сделать лучше. Изучаем Главная страница — яркий пример совкового подхода к информации. Ощущение, что информацию вывернули наизнанку и вынесли на главную страницу все самое ненужное для конечных потребителей. А чтобы было еще веселее — сделали ширину страницы странной — 820 пикселей. Ни под 800х600, ни под 1024х768, непонятно. Первое, что бросается в глаза на странице — это коллаж, который видимо в одном кадре хочет рассказать о Почте России всё. Дальше правая панель, раздел Наши партнеры, почтовые администрации и зарубежные интернет-магазины.
В принципе тоже самое касается и левой панели (3, 4, 5). Наконец приходим к части сайта, занимающей больше всего места — новостям Почты России. И последнее, что меня зацепило — это пара баннеров внизу страницы — о спартакиаде сотрудников и пансионате Почтовик, а также баннер Народного фронта. 2. jQuery работа с select | Web notes. Авторизация пользователей через Mail.Ru API: большой эффект маленькой кнопки / Блог компании Mail.Ru Group. Привет, с вами снова команда Платформы@Mail.Ru! В предыдущем посте мы рассказывали о различных социальных плагинах Моего Мира, а также сравнивали их эффективность на примере собственных проектов портала. Настало время поговорить о других возможностях Mail.Ru API, возможностях более тесной интеграции сайтов с социальной сетью. И, конечно же, дело снова не обойдется без кейсов – уже кейсов независимых проектов с реальными показателями эффективности. Поехали! Регистрация пользователей Mail.Ru в два клика Если вам нужно авторизовать или зарегистрировать посетителя на вашем сайте и у него есть аккаунт на Mail.Ru (а таковых в Рунете абсолютное большинство), вы можете сильно облегчить жизнь как себе, так и ему.
Вместо того, чтобы предлагать пользователю в 125-й раз заполнять длинную форму регистрации на вашем ресурсе, предложите ему авторизоваться «в 2 клика» с помощью API. Используйте эту информацию для фоновой автоматической регистрации пользователя. Техническая сторона интеграции P.S. CSS. Выравнивание картинки по центру. Уже давно существуют разные методы выравнивания картинок по центру с помощью CSS. На реализацию этих методов сильно влиял Internet Explorer 5. Но сегодня эта версия браузера мало кого интересует, поэтому можно избавиться от лишнего кода. Раньше IE5 и IE5.5 диктовали свои правила — для того, чтобы выровнять элемент страницы по центру, необходимо использовать CSS-свойство text-align:center. И чтобы отцентровать, например, картинку, необходимо размещать её внутри дополнительного блока: <p>Текст параграфа.
Для этого дополнительного блока присваивается соответствующие CSS-свойство: Всё это было необходимо потому, что Internet Explorer пятых версий не поддерживает уже тогда существовавшее и поддерживаемое другими браузерами свойство внешних отступов auto, которое автоматически налету присваивает одинаковое расстояние слева и справа от выравниваемого элемента.
Но IE5 и IE5.5 уже в прошлом, поэтому HTML-код можно сделать проще и элегантнее: <p>Текст параграфа.
Drupal. Php.