SE@RCHER
SE@RCHER
Библиотека JAVASCRIPT
03www.ru
Библиотека JAVASCRIPT
03www.ru
Библиотека JAVASCRIPT
03www.ru
Золотая библиотека JAVASCRIPT
1997






Javascript + CSS :: • блок • текст • линк • меню • фото • окно • кнопка • фон
примеры библиотеки javascriptПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
примеры библиотеки javascriptПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
примеры библиотеки javascriptПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS

Как выглядит красивый HTML?

Что делает код HTML красивым? Вот небольшой список того, что говорит о мастерстве кодера:

  • Объявлен Doctype. Для правильного отображения браузерами вашей страницы.
  • Аккуратная секция head. Прописаны метатеги, присутствует title, объявлена кодировка, добавлен файл со стилями, включая версию для печати (желательно для других устройств тоже). Внешние файлы (стили и скрипты) имеют отдельные папки «css» и «scripts».
  • Тегу body прописан id. Позволяет создавать стили применительно к отдельной странице.
  • Семантическое меню. Для меню используются неупорядоченные списки.
  • Основной внешний div. Обернув все содержимое на каждой странице в один div позволит легко контролировать ширину страницы.
  • Div вместо table. Вместо таблиц используются div, таблицы используются для представления табличных данных. Присутствуют такие свойсива как caption, th и т.д.
  • Используются семантические элементы и атрибуты по их прямому назначению.
  • Семантические class и id. Используются семантически-правильные названия классов и значения id (например id=”news-box”, а не id=”left-green-block”).
  • В начале основное содержимое. Наиболее важная информация (новости, события) находится на первом месте в HTML.
  • Подключаемые повторяющиеся элементы. Элементы повторяющиеся на каждой странице, подгружаются автоматически, например с помощью PHP.
  • Читабельный код. Код состоит из нескольких секций и имеет вложенную структуру.
  • У тегов img проставлены атрибуты alt и title.
  • Никаких инлайновых стилей. HTML сфокусирован на структуре и содержимом, а не на оформлении! Все стили прописаны отдельно.
  • Оптимальный HTML. HTML имеет оптимальный размер и не перегружен лишним кодом.

 

 

1. Div’ное море

Поклонники безтабличной верстки, старайтесь не использовать лишние элементы div, вложенные друг в друга. Также не стоит использовать class и id тут и там. Лучше обойтись без них где это возможно.

2. «Охватывание» плавающих элементов

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

#container {
   overflow:hidden;
   height:1%
}

3. Устаревшие элементы

Не пользуйтесь устаревшими оформительскими элементами и атрибутами такими как b, i, small, big. Пользуйтесь средствами CSS для визуального оформления. Это значительно облегчит и сократит ваше время на работу с сайтом в дальнейшем.

4. «Подвал» всегда внизу страницы

Чтобы «подвал» был всегда внизу страницы используйте такую структуру:

<html>
   <body>
      <div id="content">
         <div id="before_footer"></div>
      </div>
      <div id="footer"></div>
   </body>
</html>

и следующие стили:

html {height:100%}
body {height:100%}
#content {min-height:100%}
#footer {height: 40px; margin-top:-40px; position:relative}
#before_footer {height:40px; clear:both}

К сожалению IE6 не понимает свойство min-height, однако свойство height в этом браузере дает необходимый нам эффект. Поэтому для контейнера #content нужно подключить это правило для IE6 с помощью условных комментариев.

 

 

jQuery: Колонки с одинаковой высотой

Создание колонок равной высоты, используя элементы div, связано с некоторыми проблемами. Обычно такой эффект реализуется с помощью фоновых изображений. Однако, данный метод лишь создаёт иллюзию равной высоты у колонок и имеет определённые минусы. В качестве альтернативы этому методу можно использовать javascript и популярный фреймворк jQuery.

Допустим, необходимо сделать три колонки одинаковой высоты.

<div class="column news">
   …
</div>
<div class="column articles">
   …
</div>
<div class="column contacts">
   …
</div>

Предварительно сделаем их «плавающими», а ширину каждой колонки сделаем равной 1/3 ширины окна.

.column{
    float:left;
    width:33%
}
.news{
    background:#4B2185
}
.articles{
    background:#DC85DE
}
.contacts{
    background:#C43959;
    width:34%
}

Добавим файл библиотеки и небольшой код:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
        tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() {
    equalHeight($(".column"));
});
</script>

Параметром функции equalHeight является класс элементов, которым необходимо сделать одинаковую высоту.

 

 

архив javascript + CSS :: • до 2005 • 2006 • 2007 • 2008 • 2009 • 2010 • 2011

Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER