Выражая IT

CSS завершены 10 лет существования в этом году! Те, кто были вокруг в течение некоторого времени, зарабатывая себе на хлеб (или нет) с помощью CSS, то вы, возможно, знают, как мы голодали за хороший выбор шрифтов. Даже при отсутствии шрифтов дизайнеров, таких как те, в CSS Zen Garden сделали использование изображений CSS фон для замены шрифтов в стремлении делать некоторые правосудие в свои проекты. Мы также попытались Flash / JavaScript ® хаки для достижения наших целей дизайн. Ни в коем случае это неправильный путь, чтобы получить шрифтов мы хотим в нашем веб-дизайна, но, безусловно, это не самый желательный способ. и на веб-дизайнером года, как я, полностью полагался на десять или около того шрифты для своих проектов.

Новейшие разработки в области веб-стандарты и форматы шрифтов позволяют сделать текст в HTML-шрифтов, кроме тех же старых шрифтов по умолчанию. Приходит в "@ fontface" decleration CSS.

@ Fontface provids решение ссылку на сам файл шрифта и извлечь его из Интернета. Использование @ fontface, разработчики могут использовать шрифты без замораживания текст в качестве фонового изображения. Реализация очень прямо вперед, как показано ниже, но, как и все хорошие вещи имеют CON части к нему, не все браузеры поддерживают один "тип шрифта". Если вы планируете использовать @ fontface на сайте с требованием поддержку кросс-браузер, то вы должны будете предоставить источников различных типов шрифтов того же самого.

1. TrueType - формат, разработанный, чтобы хорошо выглядеть на экране. Рекомендуемые особенно для Windows, браузеров (Chrome).
2. OpenType (ФФС) - это формат лучше для печати работы и не всегда хорошо выглядеть на Windows.
3. СРВ - Вы нуждаетесь в этом формате, если вы хотите настроить таргетинг Internet Explorer. IE не будет использовать любой другой формат. Наши СРВ было бы считать "Lite", поскольку они не являются ни сжатые ни доменов ограничено.
4. SVG - это XML-формат, поддерживаемый некоторыми браузерами, включая iPhone.
5. WOFF - это кросс-браузерная, веб-шрифтов формата только легкий (шрифт данные почтовый сжатый) и может быть собран как с TrueType или PostScript (CFF) описывает. В настоящее время поддерживаются FireFox 3.6 +.

Использование @ fontface

  @ Шрифт лицу {
 семейство шрифтов: "CalligraphyFLFRegular;
 SRC: URL ('CalligraphyFLF.eot');
 SRC: местные («CalligraphyFLF), местные (« CalligraphyFLF), гиперссылка ('CalligraphyFLF.woff) формата ("WOFF), гиперссылка (' CalligraphyFLF.ttf) формата (" TrueType "), URL-адрес (" CalligraphyFLF . SVG # CalligraphyFLF) формата ("SVG");
 }
 @ Шрифт лицу {
   семейство шрифтов: "Ваш шрифт";
   SRC: URL ("Шрифты / font_filename.eot");
   SRC: местные («Альтернативные названия"), местные ("Alternatename"),
     URL ("Шрифты / font_filename.woff») формата ("WOFF"),
     URL ("Шрифты / font_filename.otf») формата ("OpenType"),
     URL ("Шрифты / font_filename.svg # font_filename») формата ("SVG");
   }
 h2 {семейство шрифтов: "Ваш шрифт", Грузия, засечек;} 

Как вы можете видеть из приведенного выше примера, чтобы включить выбранный шрифт шрифтом, нужно связать с набором fonttypes по тем же шрифтом. Поэтому люди относятся к нему как "Font Kit".
Есть наборы шрифтов доступны, что позволяет явно связь с CSS @ шрифт лицу имущество под лицензионное соглашение конечного пользователя (EULA).

Полезные ресурсы WebFont:

• Шрифты для @ шрифт лицу вложение вики-страниц в http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Он является известным дизайнером шрифтов, который сделал сотни интересных TrueType шрифты в свободном доступе для использования в Интернете. Его шрифты элегантный, декоративные, и игривая.
• Дитер Steffmann еще один замечательный дизайнер шрифта. Он тоже сделал много красивых шрифтов, доступных для любого использования.
• Шрифт магазин : предлагает шрифты, разработанные специально для использования сети. Более 30 самых успешных семей FontFont теперь доступны в виде веб-FontFonts. FontShop также имеет подробную инструкцию WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Шрифт Белка : Витрины всех шрифтов, Font Squirrel предлагает для использования с @ шрифт лицу вложение CSS. Font Squirrel предлагает впечатляющий количество типов, делает его мертвым просто выбрать один из, так и обычным пользователям предлагается "наборы" - шрифт по вашему выбору, в нескольких форматах, в комплекте с демо HTML и CSS, который использует очень текущий @ шрифт лицу синтаксис . Они также предлагают способ сделать свой ​​собственный @ шрифт лицу комплектов . Если шрифт вы хотите использовать была лицензирована (как правило те, которые приходят с вашего компьютера, не обязательно хорошо), генератор производит СРВ, SVG, и эй! WOFF файлы.

Другой быстрый урок. Вот то, просто и красиво, используя силу CSS ... но было трудно concieve (и это, конечно, не мне), чтобы начать с. Добавление DropShadow, может быть peice пирога для многих из нас, используя некоторые инструменты для редактирования изображений, как Photoshop, Fireworks НФА и др.
Причина, почему я выбрала тени с помощью CSS является то, что, как правило, при создании дизайна страницы / HTML заявления, требования сохранить итерации. Я имею в виду, в существующий веб-сайт с большим количеством изображений, как те, отображающий Freinds списка или галереи изображений, трудно будет переработать весь груз изображений, которые уже были выгружены, чтобы добавить или удалить тени, для этого вопрос.
Так что если вы сделали немного вперед мышления при создании HTMLS добавить эти дополнительные подразделения или правило, ситуация такова, что у вас есть цикл логика создания этих икон / миниатюр в XSL, PHP. JAVA или любой другой программы / скриптовый язык, вы можете добавить его в любое время, то это просто вопрос о шоу и скрыть эти тени с помощью свойства CSS Display, в соответствии с клиентами постоянно меняющихся требований ... Я havn't сделать этот вид дальновидных до этого ... но ahev прямо сейчас!

В приведенном ниже примере, исходное изображение без теней и dropshadows применяются по мере необходимости! Кроме того, я пошел немного больше, используя приемы из моих предыдущих Тута (Well! это, вероятно, кратчайшие различные учебные материалы, так что оправдано только называя их "Тута" 'ы) об использовании CSS клип собственности на показать только

Исходное изображение

Результаты CSS DropShadow

Посмотреть демо | Скачать файлы исходного кода

Почему я хочу, чтобы это понимать?? Хамм ...!!

Большинство писателей CSS согласятся, что CSS клип собственности, вероятно, одним из самых неиспользованных свойств CSS. Это было так верно и для меня и был самый счастливый пренебрегать этим, пока я не начал изменения MooTools ДВА ручку (Pin) Slider Компонент (с Range Indicator) .

Существовал хорошее предложение от одного из компонентов пользователям изменять Slider Компонент использованием обрезанный Справочный изображения (по сравнению с переменной шириной деление), чтобы указать ползунка диапазона. Таким образом, пришло мое время, чтобы войти в удовольствие, но не-уставных (для меня конечно же) воды имущества клип CSS.

Ну! как трудно это может быть? Не так много на всех ... ДА и НЕТ. Синтаксис CSS собственности Клип довольно прямой, но смысл / usuage немного croocked. С памятью, как у меня, каждый раз, когда я сижу в переделку на мой Slider сценарий ... У меня есть tokeep возвращаясь к использованию этого клипа собственности, чтобы напомнить себе логику, которую я создал в мой сценарий .... Отсюда! думал пера его, в надежде вспомнить его будущем (а также в интересах тех, кто, кажется Поражает собственности клипа CSS)

Что такое CSS клип делать?

Клип является частью визуального модуля эффектов CSS 2.1. Проще говоря, его работа заключается в размещении видимое окно в верхней части объекта, который обрезается, поэтому обрезание изображений и создание миниатюр без создания дополнительных файлов (я уже поставил эту возможность для более эффективного использования в компоненте Slider )

Используя свойство клипа CSS, вы можете создать вырезку помощью формы прямоугольника. Как и многие другие свойства CSS (например, маржа, отступы и т.д.), используя прямоугольник, необходимо четыре координаты Top, Right, Bottom, Left (TRBL). Croocked природа этого свойства отражает, когда вы внимательно посмотрите, как клип вычисляет область отсечения, используя эти четыре координаты (посылает мозг в жеребьевке на некоторое время). Теперь, чтобы сбить вас с толку нижней начинается сверху, а правая начинается с левой стороны. . Вы видите, что я сказал? .... Таким образом, этот пост ...

Эта небольшая путаница может легко исчезнуть, с этим визуальным объяснение CSS Clip / прямоугольник собственности, как показано ниже!!

Требования CSS клип

Задача, которую мы начали это клип на следующем изображении Миниатюра на квадратный искать изображения (а также широкоугольные изображения)

Оригинальный Thumbnal / Image	Клип Требования к Sqaure Thumbmail

Результаты CSS клип

Посмотреть демо | Скачать файлы исходного кода

Прежде, чем мы имели дело с CSS для создания макетов страниц нашего, совместив часть содержимого внутри ячейки таблицы, казалось, игра просто ребенка. Просто установите "align" или "VALIGN" свойство таблицы имеют выравнивание по вашему выбору, кусок пирога!
С макеты CSS, хотя у нас есть "вертикального выравнивания" свойства элементов, она не кажется такой простой, как «выравнивание» или «VALIGN" свойства. Чтобы быть более specifiic "вертикального выравнивания" никогда, кажется, решить любые ваши проблемы, особенно если будут писать кусок кросс-браузерный CSS.

Без использования таблиц HTML, задачи центровки на объект, будь то изображение или текст, содержащий внутри подразделения, вероятно, было каждый UI / CSS разработчики кошмар какой-то момент. Эта проблема дальнейшего экстраполирует ваши заботы согласования, если объект по центру динамический характер, т.е., когда его высота переменные (неизвестные высоты).

Несмотря на отсутствие известных прямым решением, которое будет работать по всему спектру браузеров мы имеем дело с того, что решение, которое я пытался прийти к действительно похоже на работу в нескольких браузерах, которые я пробовал в (IE6, IE 7 , FF).

РЕШЕНИЕ:
В браузерах Mozilla, Opera и Safari, странное поведение "вертикального выравнивания" имущество может быть доведена до его чувств, просто установив "дисплей" имуществом содержащие деление на «ячейки таблицы" (дисплей: ячейки таблицы) .

Проблема остается с IE браузеров семейства, который, однако, похоже, не понимают, что с "ячейки таблицы" имущество и невежды, как они есть, они просто игнорируют его. Решение приводится ниже, хотя простой, объявления нескольких DOM элементов в HTML, чтобы все произошло.

CSS и HTML выглядит следующим образом
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> производителя <br/> просмотров: 3456 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

просмотреть демонстрацию здесь | Скачать исходных файлов (Скачано 448 раз)

TOP краю CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> производителя <br/> просмотров: 1234 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

НИЖНИЙ краю CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> производителя <br/> просмотров: 1234 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

просмотреть демонстрацию здесь | Скачать здесь

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

С надеждой, что когда-нибудь

• вертикальное выравнивание собственности в CSS будет работать, как это делается в ячейке таблицы, без того, чтобы бить много вокруг да около
• По крайней мере, установление разницы-топ: авто и разницы-дно: авто, как даст тот же результат, с краю левого и правого края набора для автоматического
• Браузер войны будет над некоторыми день.
• Там будет только один браузер для ВСЕХ.

Скачать CSS и HTML вышеуказанных решений здесь (Скачано 448 раз) .. для понятности, CSS не оптимизирована

PS: И, кстати, те эскизы некоторых фотографиях я щелкнул ...

Если требование разделить значение узла в XML, который содержит строки с разделителями стоимости, в отдельные пункты, то вы пришли в нужное место ... посмотрим на примере, приведенном ниже. Если вы знакомы с немного XML и XSL ... Я не думаю, что вам потребуется никаких объяснений.
Кроме того, этот пример включает использование функции как XSL XSL: вызова шаблонов, XSL: подстроки до, XSL: подстроки, после этого, если это то, что вы после этого.

XML должны быть преобразованы (food.xml): -
Предположим, что задача для разбития строки разделенных запятыми, в теге "ключевые слова"

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.xsl): -

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Результирующий выходной HTML: -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Излишне говорить ... просто измените параметр "delimitr" в разделитель на ваш выбор

Если вы когда-либо сделали (или на один) Вертикальное меню с помощью списка (Li)-теги и CSS, вы можете столкнуться, это еще одна ошибка в Internet Explorer, где IE 6 вставляет эти зазоры между элементами списка, которые содержат элементы на уровне блоков, т.е. если есть пробелы между элементами списка в разметке. Спасибо, но нет, спасибо, версия IE 7 кажется свободным от этой ошибке.
Если, как я, и многие другие, вы принадлежите к этой группе нарушенного разработчиков, которые до сих пор, чтобы получить свои новые макеты, работающих в IE6 тоже, то это может оказаться полезным. Посмотрите ...

Пример разметки:

<ul id="menu">
<li> <a href="#"> Home </ A> </ LI>
<li> <a href="#"> О </ A> </ LI>
<li> <a href="#"> услуги </ a> </ LI>
<li> <a href="#"> Портфель </ A> </ LI>
<li> <a href="#"> Справка </ A> </ LI>
<li> <a href="#"> Связаться с нами </ A> </ LI>
</ UL>

Вы можете создать несколько CSS, похожих друг ниже, transfrom над разметкой в ​​вертикальное меню ....

Пример CSS ...
# {Меню
маржа: 0; обивка: 0; фон: # FF9900;
Список стиле типа: нет, ширина: 150px;
}
# {Меню ли маржа: 0; обивка: 0;}
# {Меню Дисплей: блок;
цвет: # 555555;
текст-отделка: нет;
обивка: 0 15px;
высота строки: 2,5; нижней границы: 1px твердых # FFF;
}

Результат Вы увидите ...

Решение для этой ошибке ... (изменение / добавить CSS, выделенные жирным курсивом)

# {Меню
маржа: 0; обивка: 0; фон: # FF9900; Список стиле типа: нет, ширина: 150px;
float: left; / * это содержит плавающих элементов списка * /
}
# {Ли меню
маржа: 0; обивка: 0;
float: left; / * Эта исправления * /
Ширина: 100% / * пробелы ошибка в IE6 * /
}
# {Меню
Дисплей: блок; цвет: # 555555;
текст-отделка: нет;
обивка: 0 15px;
высота строки: 2,5; нижней границы: 1px твердых # FFF;
}

Если приведенные выше оленья кожа решение похоже на работу (по причинам, известным только в IE6) ... попробовать этот метод, а не

Просто добавьте эту дополнительную IE6 только стили разметки ...

<! - [Если IE 7 л>
<style type="text/css">
# Меню Ли {Дисплей: встроенный блок;}
# Меню Ли {Дисплей: блок;}
</ Стиль>
<[ENDIF] ->

Если XML / XSL преобразования ваш Домиана, то есть времена, когда мы хотим peice динамического кода, который будет использоваться библиотека пункта (будет сделано повторного использования). Что я имею в виду, вероятно, можно было бы сделать более ясной в этом примере сценария.

Представьте, что вы создаете веб-сайт (с использованием XML, XSL transfroms конечно же), и большинство из страниц будет иметь модуль комментариев. Ну! то либо скопировать или вставить этот код в каждую страницу шаблона (который я не имею сказать, но сделать техническое обслуживание и доработку кошмар), или даже лучше, вы создаете INCLUDE файл, который может вырваться в том, где бы Вы не хотите его в вашу страницу ( а) ...
Так как мы создаем файл XSL INCLUDE и включить его в другой файл XSL? Вот как ...

Просто чтобы было понятно ... Вот краткий список файлов, которые вы можете создать ... вот, мы будем в том числе информацию о фруктах и ​​овощах в родительской страницы называют пищей.

1. food.xml - XML-файл данных, на которых преобразования будут применяться
2. food.xsl - основной файл XSL, который превратит наш food.xml
3. inc_fruits.xsl - XSL включает файл, который будет оказывать фрукты данных
4. inc_vegtables.xsl - XSL включает файл, который будет оказывать vetetables данных

Я не думаю, что я во многом объясняют, коды для вышеуказанных элементов, будут понятны ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ XSL: шаблоны>
</ XSL: стиль>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Скачать все вышеуказанные файлы здесь (249 скачиваний)

Сообщение IE 6, MSIE был достаточно любезен, чтобы нам разработчиков пользовательского интерфейса, добавив еще несколько свойств CSS стандартный для большинства других стандартных браузеров. Одним из таких полезных свойств в "мин-высота". Довольно прямой собственности, которая не нуждается долго наматывается объяснение. Когда мин высоты для разделения установлен, он всегда сохраняет, что набор высоты, когда содержание этого дома занимает меньше, чем он может вместить и, главное (в отличие от простой ванили "высота" собственность) или в масштабах CSS словам, он ведет себя как деление которых "Высота" установлен в "авто" ...

Для некоторых из нас, бедных разработчиков, которые все еще ​​необходимы для кода CSS, которые должны работать в IE6, не-наличие "мин-высота", может оказаться показывать пробки где-то ... Не допускайте попадания отчаяния.

К счастью, у нас достаточно причуды в IE, что мы будем использовать, чтобы из преимуществ и взломать наш путь для достижения нашей цели ... то есть сделать DIVISION разделение, как будто ее мини-высота в IE6

Решение 1: Использование подчеркивания Hack [ Читать далее ... ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Решение 2: Использование атрибутов CSS Selector Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


Атрибутов CSS Selector Hack использует тот факт, что браузер IE6 Tha ранее игнорировались atribute-селектор. Обратите внимание на требование другой контейнер деление с классом = "SomeClass". Просто presense класса атрибута для этого отдела, перекрывает рост к авто для Opera, Mozilla и MSIE7 и выше. IE6, который не поддерживает atribute селекторов, игнорирует его.

Посмотреть демо мин высота хак для IE6

Если вы используете XML и XSL, то вы могли встретить то время, когда нужно играть с атрибутами и значениями узлами вы XSL. Они нагрузок сайтов долго наматывается информацию об этом, но никто не нашел были краткими и точными ... Это не XML / XSL учебника, но мои попытки поставить вместе, какой-то обман список ...

Образец XML, что мы будем работать с выглядит следующим образом ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

Итак, давайте начинать преобразования наших выше XML с помощью XSL

Пример 1: Вывод значения в выбранных атрибутов

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML результат будет выглядеть

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Пример 2: Цикл через и отображения XML все имена атрибутов и их значений

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

HTML результат будет выглядеть


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Смотреть это пространство, я буду обновлять этот новым выводам ...

Reset CSS, / CSS являются установить количество элементов стиля для конкретного базового, который создает последовательность в различных браузерах.

Мы все были через кошмары написания кросс-браузерный CSS в. Поэтому, когда мы начинаем писать наш CSS, это практика, чтобы сбросить его первым удалить / сброс любого поперечного несоответствия браузера. Сброс CSS, просты несколько строк CSS, что вы начинаете с CSS, что дает вам четкую базу, чтобы начать строить свой на.

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

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ол, ул {
Список стиле: нет;
}

h1, h2, h3, h4, h5, h6 {
Размер шрифта: 100%;
начертание шрифта: нормальный;
}

Сбросить размер шрифта в броузере
Также обратите внимание на сброс, который был применен в браузере размер шрифта в следующую строку ...

html {font-size: 76%;}

Выше CSS сбрасывает размер шрифта в броузере на 10 пикселей, и это дает возможность работать с относительными размерами шрифта (который каждый из важных соответствии WAI prespective)
Для, например, в следующем определении размера шрифта в диапазон установлен на 10 пикселей, что в paragarph установлен на 14 пикселей ...

span {font-size: 1em;}
p {font-size: 1.4em;}