2010 4 марта 2010

Выравнивание переключатель с текстом

Поскольку переключатель и текста встроенные, так что текст будет присоединиться к нижней части радио-кнопки, текст окажется чуть ниже переключателя.
Если вы хотите, чтобы эти согласования на самый верх, вам придется поставить на радио и текст в отдельных контейнерах, как дивы или пролетов (при необходимости), и они будут заботиться о выравнивании. Было бы легче использовать ячейках таблицы тоже, дизайн краткий разрешает это.

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

нет комментариев | Опубликовано в браузере совместимости , HTML

2010 8 января 2010

Что будет HTML5 с собой?

HTML5 еще проект. Как я писал, работа над HTML 5, который начался в 2004 году, до сих пор заданной формы на совместных усилий W3C HTML WG и WHATWG . Слово в том, что следующее поколение будет иметь HTML улучшений и функций, которые бы новая структура и семантика, формы управления, API, мультимедиа и т.д. теги.

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

  • Там будет добавление некоторых структурных именно теги. <article>, <section>, <header>, <aside> и <nav>, который заменит большинство <div> с использоваться на веб-странице, что делает ваши страницы немного более семантическим, но что более важно, легче читать.
    Эй! Только представьте себе усилие сохраняется в выводу, что одной не хватает закрывающего тега DIV.
    например, 
  <body>
   <header> ... </ заголовок>
   <nav> ... </ NAV>
   <article>
     <section>
       ...
     </ Раздел>
   </ Статьи>
   <aside> ... </ в сторону>
   <footer> ... </ нижний колонтитул>
 </ Body>

Вместо 

  <body>
   <div id="header"> ... </ div>
   <div id="nav"> ... </ div>
   <div class="article">
     <div class="section">
       ...
     </ Div>
   </ Div>
   <div id="aside"> ... </ div>
   <div id="footer"> ... </ div>
 </ Body>
  • С появлением звука и видео, как YouTube, использование встроенных мультимедиа на веб-страница increaded на раз. Учитывая это, сейчас планируется добавить встроенную поддержку для встраивания видео и аудио в самом браузере, а значит позволит пользователям играть, пауза, стоп, искать, и регулировать громкость с помощью встроенного DOM API, скрипты для управления воспроизведением.

например, 

  <video poster="poster.jpg">
     <Источник SRC = "video.3gp" тип = "video/3gpp"
     СМИ = "карманный">
         <source src="video.mp4" type="video/mp4">
 </ Видео>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Аудио>
  • Лучше определенных семантических ролей для существующих элементов, например, для. <strong> и <em> теперь может иметь различные значения, т.е. они будут вести себя по-разному.

Есть еще много изменений / обновления до более новой версии ... Будет постоянно обновлять этот пост, как я пришел accross любые интересные полезные .... Смотреть это пространство

Этот документ не может предоставить точную информацию, спецификации HTML 5 еще активное участие в развитии. Если вы сомневаетесь, всегда проверяйте спецификации HTML 5 здесь .

1 комментарий | теги: | Отправленный в HTML

2009 18 октября 2009

HTML и XHTML

  • Декларация типа документа должно присутствовать в начале документа, который использует HTML синтаксис. Это необязательно может быть использован в течение синтаксис XHTML, но это не требуется. Документ XHTML не нужно включать DOCTYPE XHTML, потому что документы, которые поставляются правильно используя XML MIME тип и обрабатываются как XML-браузерами, всегда отображаются ни в режиме совместимости.
  • В XHTML, имена тегов чувствительны к регистру и, как правило, определяется как быть написаны в нижнем регистре. В HTML, однако, имена тегов чувствительны к регистру и может быть записан в верхнем регистре или смешанный случай, хотя наиболее распространенными конвенция придерживаться в нижнем регистре. При начальных и конечных тегов не должны быть такими же, но, будучи последовательным делает чистый код вида.

ПРЕИМУЩЕСТВА ИСПОЛЬЗОВАНИЯ HTML

  • Обратная совместимость с существующими браузерами
  • Авторы уже знакомы с синтаксисом
  • Мягкий и прощающий синтаксис означает, что не будет пользователей враждебные " Желтый экран смерти ", если ошибка случайно выскользнул через
  • Удобный синтаксис сокращение, например, авторы могут пропустить несколько тегов и атрибутов

ПРЕИМУЩЕСТВА ИСПОЛЬЗОВАНИЯ XHTML

  • Строгий синтаксис XML поощряет авторов писать хорошо сформированные разметки, которую некоторые авторы могут найти легче поддерживать
  • Интегрируется непосредственно с другими XML словари, такие как SVG и MathML
  • Позволяет использовать обработки XML, которые некоторые авторы используют в качестве части их редактирования и / или публикации процессов

нет комментариев | теги: | Опубликовано в HTML , Web Developer

2009 24 марта 2009

Отключено = "истина" и инвалидам = "ложных" то же самое?

Это те, старые школы, но, как обычно, это моя память дополнения ...
Так отключено = "истина" и инвалидам = "ложных" то же самое? Да
... Не верю, хорошо! Thats, так оно и есть ... вот некоторые быстрые объяснение ...
"Отключено" является атрибутом любого элемента формы / поля и, следовательно, может принимать любые значения по своей природе.

Пока этот атрибут присутствует, элемент будет отключен независимо от его стоимости. например, для.
<input type="text" value="This является disabled" disabled>
<input type="text" value="This является disabled" disabled="disabled">
<input type="text" value="This является disabled" disabled="true">
<input type="text" value="This является disabled" disabled="false">

Все вышеперечисленное сделает это поле формы "Отключено".

Просто не предоставляет атрибут "DISABLED" держит в поле "инвалидами", как показано ниже ...

<input type="text" value="This не disabled" />

Помните, "любое значение (или значение не во всех) людей с ограниченными возможностями атрибут, браузер сделает его отключить». Для простоты в наших умах W3C рекомендует, что мы используем отключены = "инвалидов" в таких ситуациях.

Это различие, хотя, когда мы использовать этот атрибут в JavaScript ...

document.form.element.disabled = true; / / элемент будет отключена
document.form.element.disabled = False / / элемент будет включен

Приведенные выше рассуждения верны и для этих атрибутов и элементов:

  • проверить (переключатель и флажок)
  • выбран (опция)
  • NoWrap (TD)

1 комментарий | теги: | Опубликовано в HTML , JavasScript

2008 17 декабря 2008

Неправильное поведение IE8: CSS Layout поломок (Ориентация версию браузера с помощью метатегов в IE8)

Если вы CSS человека, вы бы знали, боль в получении макеты рабочих крест-браузера. IE8 является еще одним ключом в работе для нас разработчики. Anywaz! если вы попали на этот вопрос, как я сделал вчера, когда ваш прекрасно работает CSS в IE7 (и ранее) и Firefox вдруг начали бросать истерики в IE8, попробуйте это ... Это хорошо, казалось, исправить мои проблемы на данный момент ....

Использование мета декларации, мы можем указать рендеринга мы хотели бы использовать IE8. Таким образом, чтобы заставить IE8 оказывать как IE7 ... вставьте следующий мета-тег в голову документа: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

По умолчанию IE Мета бы: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
которые сделают IE8 сделать страницу с помощью нового режима стандартов.

При необходимости, этот синтаксис может быть использован для размещения на других браузерах, как показано ниже:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

БОЛЬШЕ О ТИПЫ ДОКУМЕНТОВ:

Если вы еще не знакомы с подобного животного под названием "Doctype" ... вот некоторые быстро читать
Каковы ТИПЫ ДОКУМЕНТОВ? Что такое БРАУЗЕР причуды и строгий режим?
Установка DOCTYPE в XSL

Для более глубокого понимания ТИПЫ ДОКУМЕНТОВ, попробуйте посетить эти ссылки ...
A List Apart: Исправьте ваш сайт с правой DOCTYPE!
A List Apart: Beyond DOCTYPE: веб-стандартов, вперед совместимости и IE8

Примечание: Хотя многие из нас, HTML / CSS люди были без учета важности DOCTYPE decleration в наших документах, Установка правой DOCTYPE, как правило, ответ на самый крест вопросы обозревателя.

1 комментарий | теги: , , , , | Отправленный в браузере совместимости , HTML

2008 4 октября 2008

Исчезающие HTML / DIV элементов в Internet Explorer [IE]

Как обычно, одним из многих странные проблемы с IE, и это надо ряды в ТОР 10 IE совместимости.

Постановка задачи (Это была моя проблема, может быть, у вас есть подобные misbehaviors):
У меня есть много DIV это на странице с классом "разделРуководители", которая есть не что иное название раздела на странице. Так что я немного стиля в таком виде

. РазделРуководители {Размер шрифта: 18px; фон: # cfcfcf, обивка: 5px;}

Дел представляет собой легкий серый с некоторыми черного текста. Что происходит в IE, некоторые из этих заголовков разделов отображаются нормально, но некоторые из них невидимым, пока, вы прокрутите страницу или нажмите что-то на странице и т.д. Иногда они, как правило, исчезают при нажатии на "Alt" ключ при страницу вниз или прокрутить с полосой прокрутки. Они иногда, кажется, снова появится, когда вы перезагрузите (F5) страницы. Я коротко совершенно простой DIV с простой стиль ведет себя плохо.
Что могло стать причиной такого странного поведения? Ну! Честно говоря, не знаю!

Возможное решение:
Опять же, не спрашивайте меня, почему, но во многих случаях эта проблема как правило, исчезают, когда вы добавляете позиции: по отношению к неправильно себя элементы стиля, как это

. РазделРуководители {Размер шрифта: 18px; фон: # cfcfcf, обивка: 5px; позиция: относительная}

Странно, но что сказать? Благослови меня от IE!

И разделяю с США, если у вас подобные проблемы.

нет комментариев | теги: , , , | Отправленный в браузере совместимости , CSS , HTML

2008 3 октября 2008

Простой, легкий, крест Lightbox браузер для веб-страницы

Не то, что есть только несколько LightBox о том, что можно найти, когда вы Google. Проблема с большинством лайтбоксы, что я обнаружил, что все они, казалось, использование одного или другого тяжелого веса JAVASCRIPT рамки как JQuery, Prototype, MooTools и любит. Это все здорово и шикарный вид. Но если ваше требование "Но я хочу простой и легкий LightBox SCRIPT на моем сайте", то здесь;

Некоторые интересные особенности этого Лайтбокс

  1. Очень легкий
    . 4kb скриптов, если они упакованы (8 кб без упаковки)
    б. 2 Кб CSS
    в. Несколько строк из HTML в избранное контейнер
  2. Простая для понимания и реализации
  3. Может иметь несколько лайтбоксы на той же странице.
  4. То же контейнер Лайтбокс используется, чтобы показать, различного содержания (которое отдельно включен в качестве скрытой подразделений на странице), в зависимости от ссылки / опция, которая была нажата.
  5. Автоматически центрируется, принимая во внимание все факторы, такие как высота и ширина окна (разрешение экрана), стр. прокрутки количество и высоту содержимого Лайтбокс
  6. Протестировано в IE 7 и FF

Посмотреть демо |
Скачать Lightbox Источник Zip (Скачано 1810 раз)

Использование Lightbox [Файлы архива]

jo.js, jo_pack.js [упакованы версия]: - простой набор объектов JavaScript [JO], который содержит элемент, окна и скрипты документ позиционирования. Вы можете открыть JO.JS, если вы хотите, чтобы ваши руки грязные с некоторыми Расширенный Javascripting, создание абстрактных функций, расширения свойств элемента и тому подобное. Если вы не слишком много в Javascripting, оставьте его в покое.

lightbox.js, lightbox_pack.js [упакованной версии]: - Содержат свет сценарии менеджер окна. Если вы разработчик страницы, а также ответственность с реализации избранное на странице, вы должны понимать, LightBoxManager. LightBoxManager в основном содержит только две функции showLightBox и closeLightBox.

lightbox.css: - Если вы знаете, CSS, вы можете поиграть с lightbox.css настроить внешний вид-н-чувствовать lightbox.css

index.html: Пример реализации лайтбокс с двумя разными содержание

lb_underlay_bkg.png: - Это свет / Сими прозрачное изображение, которое используется для фона подложки Лайтбокс [подложка является слой ниже lighbox, которая позволяет пользователю нажатием любой другой объект на странице, а лайтбокс открыта]. Вы можете использовать любое изображение или даже сплошной цвет для этой цели, в зависимости от дизайна и требований.

icon_lb_close.gif: - изображения для близких ручки лайтбокс на верхней правой части окна свет. Можно использовать любое изображение как в дизайне

Посмотреть демо |
Скачать Lightbox Источник Zip (Скачано 1810 раз)

Пожалуйста, дайте нам ваши комментарии и отзывы ...

нет комментариев | теги: , | Опубликовано в CSS , загрузки , HTML , JavasScript , компонентов пользовательского интерфейса

2008 4 сентября 2008

Исправлена ​​ошибка (что остается неизменным в окне прокрутки) Page блоки с помощью CSS только

Это сообщение может быть хорошим примером для фразы «Преподавание бабушки сосать яйца" ... Потому что это только основные CSS Stuff. Но для тех, кто, подобно мне, забывая, что это может быть благом. Я всегда думал, (я могу потерять свою работу за эти слова), можно было только, чтобы сохранить некоторые части HTML-содержимое страницы STATIC (то есть, его позиция остается как есть на прокрутки окна), используя смарт-скрипты, делая все эти научные Расчеты найти динамические позиции, захват window.scroll событий и настройка тайм-ауты и т.д.

Никогда не думал, что это может так просто, как это .... Здесь, в CSS / HTML ниже, у меня есть четыре стационарных блоков, один крепится к каждому extrimities на этой странице, сверху, справа, внизу и слева ... разумеется ... Вы можете выбрать одну или несколько, если нужно будет ...

CSS
. Статический {Дисплей: блок; г-индекс: 10; цвет: # FFFFFF; переполнение-х: скрытый; переполнение-й: скрытый; положение: ixed;
}
# {Содержание маржа: 100px 150px 160px 0px; границы: 1px твердых # e6e6e6}

# Обертка-т {верх: 0px; фон: # 33CC66, ширина: 100%, высота: 55 пикселей;}

# Обертка-л {топ: 80px; фон: # FF9966; высота: 300px; ширина: 150px; границы: 2px твердых # e6e6e6;}

# Обертка-б {вниз: 0px; фон: # 3333CC, ширина: 100%, высота: 55 пикселей;}

# Обертка-р {топ: 80px; фон: # 6666FF; высота: 300px; ширина: 140px; границы: 2px твердых # e6e6e6, справа: 0;}

HTML
<div id="contents"> Вы основное содержание страницы </ div>
<div id="wrap-b" class="static">
Статическое содержимое на страницу дно
</ Div>
<div id="wrap-t" class="static">
Статическое содержимое на страницы К началу
</ Div>

<div id="wrap-l" class="static">
Статическое содержимое на страницу оставили
</ Div>
<div id="wrap-r" class="static">
Статических материалах на стр. право
</ Div>

Посмотреть пример здесь wroking

нет комментариев | теги: | Опубликовано в CSS , HTML

2008 2 сентября 2008

CSS хак: JavaScript, CSS, HTML для Firefox только

Много раз мы чувствуем потребность писать браузер specfic хаки (хотя это не очень хорошая практика, мы интерфейса разработчики вынуждены прибегать к такой беды, пока большой войны браузеров идет о перемирии). Ранее я упоминал в этой статье для вашего ИП только , как написать фрагмент CSS, которые были бы видны IE браузеров <IE7 только.

Вчера у меня был случай, когда я хотела написать FireFox конкретные фрагменты CSS. Ну! Я не уверен, если есть код CSS для этого, но есть HTML. Существует поймать, хотя, этот кусок HTML оленья кожа проверки проходят HTML. Но, anywaz! Если вы застряли или плохо, как такового, нет, что касается для проверки (иногда нужно быть жестоким), вы можете использовать следующие объявить ссылку на FF только стилей или даже просто код CSS внутри этого блока. Код

<comment> Поставьте FireFox только HTML / CSS / Scripts здесь </ комментарий>

например,
<comment>
<style>
/ * Стили для FF только * /
набор полей {границы: 1px твердых # dddddd;}
</ Стиль>
</ Комментарий>

Я "рад на данный момент ...

нет комментариев | теги: , , | Отправленный в браузере совместимости , CSS , HTML , JavasScript

2008 15 марта 2008

Раздражает Выбор коробки видно через Popup отделы

В ряде случаев, при этом макеты страниц с всплывающее подразделений / лайтбоксы / Советы т.д. мы сталкиваемся с ситуациями, когда некоторые формы Выбор объектов оказывается в этих POPUP отделов, дизайн, и это показывает через .... YUK!

Ну! Вы можете легко исправить, регулируя Z-INDEX значения соответственно для FF и IE7. Но старые добрые (каламбур) IE6 ведет себя не по назначению .... Выберите Показать BOX конца, даже после установки некоторых радикально высокий Z-INDEX значений в PopUp отдела ... облом!!

Есть NO исправления этой проблемы, но есть, я думаю, больше, чем несколько дороге на работу, решить эту проблему, но им здесь, чтобы сказать вам простое решение, которое я использую, которое отлично работает для меня, в большинстве случаев ....

"СКРЫТЬ BOX ROUGE SELECT, когда вы показываете POPUP"

Просто в вашем скрипте фрагмент, где вы показываете ваши всплывающие окна, добавить кусочек сценария создать видимость окне Выбор "Невидимый"

document.getElementById ('my_select) style.visibilty = "скрытые".

И помните, чтобы установить его при закрытии всплывающих отдела

. document.getElementById ('my_select) style.visibilty = "видимый";

где "my_select" является идентификатором раздражение окне Выбор

Надеюсь, что это помогает ...

PS. Есть конечно же и другие варианты, как динамично positionining IFRAME (такой же размер, как вы PopUp) в Popup DIV ... Это тоже хорошо работает, но с добавлением нагрузок DOM элементы, скрипты и головная боль. Я использовал это решение тоже, и если вы нуждаетесь в какой-нибудь помощи с этой опцией, дайте мне знать. Будем рады помочь!

нет комментариев | теги: , , , , | Отправленный в браузере совместимости , CSS , HTML , JavasScript

NDK дома | Выражая IT | Выражая неба | Выражая Penmenship | Выражая трепет | выразить себя