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

Вы можете скачать исходный код примера, и воспроизвести этот пример на своем сайте.

То, что мы видим, это не фактическое изменение размеров изображения. Это – изменение размеров видимой области при наведении указателя мыши. Здесь используется CSS-свойство overflow.

Свойство overflow определяет отображение контента, когда он переполняет область контейнера. Если размеры контейнера ограничены по какой-либо причине, свойство overflow используют, чтобы определить поведение при переполнении контейнера. Возможные значения свойства overflow: visible, hidden, scroll и auto. На использовании свойства overflow и построен этот трюк. По умолчанию часть картиники скрывается, и появляется только при наведении указателя мыши.

Идея состоит в том, чтобы поместить изображение в какой-либо контейнер. Договоримся о том, что таким контейнером для изображения будет являться тэг a. Мы устанавливаем размеры (ширину и высоту) контейнера в требуемые значения, и устанавливаем свойство position контейнера relative. Изображение же внутри имеет position:absolute. Используем отрицательные значения свойств top и left, чтобы сместить изображение. Таким образом мы теперь видим только часть картинки в нашем контейнере. Оставшаяся часть картинки скрыта. И показана целиком она будет только лишь при наведении указателя мыши, т.е. при a:hover мы установим свойству overflow значение visible и покажем картинку целиком.

HTML-код – проще не бывает:

<ul id="thumbs">
  <li>
  <a href="http://example.com/"><img src="1.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="2.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="3.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="4.jpg" /></a>
  </li>
</ul>

Вот фрагмент CSS-кода с комментариями:

/* убираем поля и отступы, */
/* скрываем маркеры списка */
ul#thumbs, ul#thumbs li{
  margin:0;
  padding:0;
  list-style:none;
}

/* включаем элементы списка в плавающую модель, */
/* смещая их влево и таким образом вытягивая по */
/* горизонтали, заодно ставим легкую рамочку и */
/* задаем небольшое поле справа */
ul#thumbs li{
  float:left;
  margin-right:2px;
  border:1px solid #999;
  padding:1px;
}

/* вот он, контейнер для картинки, "глазок", в */
/* котором отображается ее часть */
ul#thumbs a{
  display:block;
  float:left;
  width:70px; /* ширина видимой части */
  height:70px; /* высота видимой части */
  line-height:70px;
  overflow:hidden; /* скрываем "лишнее" */
  position:relative; /* это важно! */
  z-index:1;
}

/* ну и сама картинка позиционируется абсолютно, */
/* ее верхний левый край смещается в невидимую */
/* область */
ul#thumbs a img{
  float:left;
  position:absolute;
  top:-10px;
  left:-35px;
}

Теперь CSS-код, который определит поведение при наведении указателя мыши на картинку.

/* показываем картинку полностью, "поднимаем" */
/* ее над соседними картинками и убираем рамку с */
/* элемента  - она теперь не нужна. */
ul#thumbs a:hover{
  overflow:visible;
  z-index:1000;
  border:none;
}
/* а вот полной картинке рамочку добавим */
ul#thumbs a:hover img{
  border:1px solid #999;
  background:#fff;
  padding:2px;
}

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

Вы можете скачать исходный код примера, и воспроизвести этот пример на своем сайте.

Вот и все. Надеюсь, кому-нибудь пригодится.

CSS:

css(name)

возвращает: String
Возвращает значения для css-свойства, указанного в name, для первого элемента в наборе.

В этом примере, чтобы получить доступ к css-свойству background-color нужно всего лишь кликнуть по элементу div.

$("div").click(function () {
  var color = $(this).css("background-color");
  $("#result").html("Цвет этого div'а <span>"
  + color + "</span>.");
});

Откройте пример в отдельном окне и посмотрите исходный код.

css(properties)

возвращает: jQuery
Устанавливает значения для css-свойств всех элементов набора, используя объект, состоящий из пар ключ/значение. Это наилучший способ установить значения для сразу нескольких css-свойств всех элементов набора.

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

$("p").hover(function () {
  $(this).css({
    backgroundColor:"yellow",
    fontWeight:"bolder"
  });
}, function () {
  var cssObj = {
    backgroundColor: "#ddd",
    fontWeight: "",
    color: "rgb(0,40,244)"
  }
  $(this).css(cssObj);
});

Откройте пример в отдельном окне и посмотрите исходный код.

css(name, value)

возвращает: jQuery
Устанавливает значение одного css-свойства для всех элементов набора. Если в качестве значения какого-либо из css-свойств используется число, оно автоматически конвертируется в значение в пикселах.

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

$("p").mouseover(function () {
  $(this).css("color","red");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Позиционирование:

offset()

возвращает: Object{top,left}
Для первого элемента в наборе получает текущие отступы относительно точки просмотра. Возвращается объект, содержащий значения (целые числа) отступов сверху и слева. Этот метод работает только с видимыми элементами.

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

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

Откройте пример в отдельном окне и посмотрите исходный код.

Высота и ширина:

height()

возвращает: Integer
Получает текущее значение высоты в пикселах для первого элемента в наборе. Начиная с версии jQuery 1.2, этот метод позволяет найти высоту для window и document.

В этом примере мы получаем несколько значений высоты. Функция showHeight вспомогательная, просто для вывода значений в элемент div.

function showHeight(ele, h) {
  $("div").text("Высота элемента "
+ ele + " равна " + h + "px.");
}
$("#getp").click(function () {
  showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
  showHeight("document", $(document).height());
});
$("#getw").click(function () {
  showHeight("window", $(window).height());
});

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

Откройте пример в отдельном окне и посмотрите исходный код.

height(val)

возвращает: jQuery
Устанавливает высоту в CSS-свойстве для каждого элемента в наборе. Если единицы измерения не определены однозначно (например ‘em’ или ‘%’), тогда значение устанавливается в px.

В этом примере по клику на элементе div, для него устанавливается высота в 30px и заодно изменяется цвет.

$("div").one('click', function () {
  $(this).height(30).css({cursor:"auto", backgroundColor:"green"});
});

Откройте пример в отдельном окне и посмотрите исходный код.

width()

возвращает: Integer
Получает текущее значение ширины в пикселах для первого элемента в наборе. Начиная с версии jQuery 1.2, этот метод позволяет найти ширину для window и document.

В этом примере мы получаем несколько значений высоты. Функция showWidth вспомогательная, просто для вывода значений в элемент div.

function showWidth(ele, w) {
  $("div").text("Ширина элемента " + ele + " равна " + w + "px.");
}
$("#getp").click(function () {
  showWidth("paragraph", $("p").width());
});
$("#getd").click(function () {
  showWidth("document", $(document).width());
});
$("#getw").click(function () {
  showWidth("window", $(window).width());
});

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

Откройте пример в отдельном окне и посмотрите исходный код.

width(val)

возвращает: jQuery
Устанавливает ширину в CSS-свойстве для каждого элемента в наборе. Если единицы измерения не определены однозначно (например ‘em’ или ‘%’), тогда значение устанавливается в px.

В этом примере по клику на элементе div, для него устанавливается ширина в 30px и заодно изменяется цвет.

$("div").one('click', function () {
  $(this).width(30).css({cursor:"auto", "background-color":"blue"});
});

Откройте пример в отдельном окне и посмотрите исходный код.

Вот и все на сегодня. Статья получилась не очень большая, но, надеюсь эта информация пригодится многим.

Вы можете скачать исходный код примера, и воспроизвести это пример на своем сайте.

В этом примере не используется ни JavaScript, ни какие-либо другие приложения. Используется только HTML-разметка и CSS.

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

Стоит только осознать идею Алена, как все становится понятным. Для построения диаграммы выбран элемент dl (definition list). Но можно рассматривать элементы dt (definition titles) как пункты по оси X и элементы dd (definition descriptions) как значения по оси Y.

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

1-й день

27

2-й день

53

А вот соответствующий этому HTML-код:

<dl>
  <dt>1-й день</dt>
  <dd>27</dd>
  <dt>2-й день</dt>
  <dd>53</dd>
</dl>

Далее добавляем внутрь элементов dd элементы span и внутри них элементы em. Элементам span назначаем имена классов. В итоге должно получиться вот это:

<dd><span class="type2 p80"><em>80</em></span></dd>

Теперь начнем разбираться с таблицей стилей.

dl#csschart, dl#csschart dt, dl#csschart dd{
    margin:0;
    padding:0;
}
dl#csschart{
    background:url(bg_chart.gif) no-repeat 0 0;
    width:400px;
    height:400px;
}

Удаляем установленные по умолчанию поля и отступы и в следующем правиле задаем для элемента dl свойство background и определяем его ширину width и высоту height.
Файл bg_chart.gif – картинка фона для диаграммы в которой нарисованы оси X и Y. Картинка как раз имеет размеры 400х400 px.

dl#csschart dt{
    display:none;
}

Делаем невидимыми элементы dt, поскольку информация, содержащаяся в них (1-й день, 2-й день,…) нам не нужна.
Дальше – интереснее…. Элемент dd содержит два дочерних элемента – span и em. Таким образом можно манипулировать тремя элементами.
Элементы dd позиционируются с помощью добавления полей, установки их высоты в 100% и ширины в соответствии с шириной шага сетки на фоновой картинке. Элементы dd включаются в «плавающую» модель (float:left;), используется относительное (position:relative;) позиционирование, что позволяет сопоставлять дочерние по отношению к dd элементы (span и em) со своим родителем (dd). Ниже это можно увидеть в CSS-коде.

dl#csschart dd{
  position:relative;
  float:left;
  width:36px;
  height:360px;
  margin-top:20px;
}
dl#csschart dd.first{
  margin-left:22px;
}

Элементы span выполняют роль колонок, позиционируются абсолютно относительно своего родительского элемента (dd) и располагаются в самом низу, что позволяет им «вырастать» до нужного размера, базируясь на значении количества процентов. Элементы em – квадратики, где цифрами отображается количество процентов. Кусочек этого кода приведен ниже:

dl#csschart span{
  position:absolute;
  display:block;
  width:33px;
  bottom:0;
  left:0;
  z-index:1;
  color:#555;
  text-decoration:none;
}
dl#csschart span em{
  display:block;
  font-style:normal;
  float:left;
  line-height:200%;
  background:#fff;
  color:#555;
  border:1px solid #b1b1b1;
  position:absolute;
  top:50%;
  left:3px;
  text-align:center;
  width:23px;
}

Но как же получается требуемая высота?
Давайте снова обратим внимание на HTML-разметку.

<dd><span class="type2 p80"><em>80</em></span></dd>

Мы увидим, что элемент span имеет два css класса.
Первый класс определяет тип столбика диаграммы, посмотрите css-код и тут все станет понятно:

dl#csschart span.type1 {
  background:url(type1.gif) repeat-y;
}
dl#csschart span.type2{
  background:url(type2.gif) repeat-y;
}
dl#csschart span.type3{
  background:url(type3.gif) repeat-y;
}
dl#csschart span.type4{
  background:url(type4.gif) repeat-y;
}

Просто в качестве фонового изображения используются небольшие разноцветные полоски.
Второй же класс (p0 – p100) фактически определяет высоту элементов span.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
dl#csschart span.p3{height:3%;}
dl#csschart span.p4{height:4%;}
.........................
dl#csschart span.p99{height:99%;}
dl#csschart span.p100{height:100%;}

Вот так работает эта штука.

В общем расслабьтесь и поиграйте пока, а все пояснения потом, когда отдохнете.

Для того, чтобы сделать эту игрушку на своем сайте необходимо будет скачать библиотеку jQuery и плагин jqPuzzle.

В примере, исходный код которого Вы можете скачать на моем сайте, плагин jqPuzzle уже есть.

В раздел HEAD страницы надо файлов javascript, вот так:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqpuzzle.js"></script>

и, если Вы используете не пример с моего сайта Вам надо будет подключить файл стилей (в моем примере стили включены в страницу).

<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

Дальнейшая настройка возможна тремя различными способами:
Способ первый, самый простой.
Просто добавляем на страницу понравившуюся картинку

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle" />

и указываем имя класса class=»jqPuzzle». Это все! Пятнашки будут работать! Правда все настройки будут установлены по умолчанию и Вам придется довольствоваться надписями на кнопках на английском языке.

Способ второй, настройка с использованием CSS микроформатов.
Этот способ позволит настроить наиболее важные возможности. По сути, Вы просто добавляете второе (дополнительное) имя класса к уже существующему имени в тэге IMG, соблюдая следующий синтаксис:

jqp[-LANGUAGE]-rROWS-cCOLS[-hHOLE][-sSHUFFLE_ROUNDS][-FLAGS]

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

LANGUAGE: код языка. По умолчанию – английский (en). Доступные языки – fr, de, pt и я дописал для русского – ru (это если использовать исходный код с моего сайта).
ROWS: количество строк (от 3 до 9)
COLS: количество столбцов (от 3 до 9)
HOLE: позиция свободного места (от 1 до ROWS*COLS). По умолчанию – последняя позиция, в правом нижнем углу.
SHUFFLE ROUNDS: количество циклов перемешивания. По умолчанию установлено 3.
FLAGS: дополнительные опции с помощью которых можно настроить вид игрушки при загрузке страницы (перечислены ниже). Можно использовать любое количество флагов, в любом порядке.
S: картинка будет перемешана при загрузке страницы.
N: при загрузке цифры будут скрыты.
A: скрывает кнопку «Перемешать».
B: скрывает кнопку «Оригинал».
C: скрывает кнопку «Цифры».
D: скрывает количество перемещений.
E: скрывает количество секунд.

Несколько примеров, чтобы стало совсем понятно.

Пример 1: 3 строки, 5 колонок, «дырка» в позиции 5.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-r3-c5-h5" />

Пример 2: язык – немецкий, 5 строк, 5 колонок.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-de-r5-c5" />

Пример 3: язык – русский, 3 строки, 3 колонки, «дырка» в позиции 5, загружается со скрытыми цифрами и не отображается количество перемещений и время.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-ru-r3-c3-h5-NDE" />

думаю, что смысл здесь вполне понятен.

Способ третий, использование синтаксиса jQuery.

<script type="text/javascript">
    $(document).ready(function() {
        $("img").jqPuzzle();
    });
</script>

это простейший пример, с настройками по умолчанию, который сделает пятнашки из всех тэгов img на странице. Понятно, что это для примера, реально Вы можете использовать любой селектор. Вообще же jqPuzzle() может принимать два аргумента, первый из которых содержит настройки, а второй – надписи на кнопках. Выглядеть это может вот так:

<script type="text/javascript">
$(document).ready(function(){
  var myTexts = {
    shuffleLabel: "Перемешать",
    toggleOriginalLabel: "Оригинал",
    toggleNumbersLabel: "Цифры",
    confirmShuffleMessage: "Перемешать?",
    movesLabel: "перемещений",
    secondsLabel: "секунд"
  }
  var settings = {
    rows: 4,
    cols: 4,
    hole: 16,
    shuffle: false,
    numbers: true,
    language: en
  }
  $(".jqPuzzle").jqPuzzle(settings, myTexts);
});
</script>

Что касается стилевого оформления – можно подправить все на свой вкус и цвет, естественно не трогая названий классов.

Согласитесь, прикольная игрушка?

Для примера придумаем несложный HTML-код. Пусть это будет элемент DIV, внутри которого есть картинка и текст. Ну например вот такой:

<div id="example">
 <img src="http://myserver.ru/img/im1.png" alt="Это картинка" />
  А это просто текст слов...
</div>

Я не буду задавать какие-либо стили для элементов, находящихся внутри блока #example, ведь это только пример, а вот CSS-правило для этого блока разберем подробно.

#example {
  position:absolute;
  top:50%;
  left:50%;
  width:250px;
  height:200px;
  margin-left:-125px;
  margin-top:-100px;
  border:1px dotted red;
}

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

Задавая элементу #example абсолютное позиционирование, мы извлекаем его из нормального потока и имеем возможность поместить в любом месте страницы. Что мы и делаем, помещая верхний левый угол элемента в центр окна браузера, задавая свойствам top и left значения 50%.

Зная ширину (250px) и высоту (200px) элемента #example мы задаем свойствам margin-left и margin-top отрицательные значения, равные половине ширины и, соответственно высоты центрируемого элемента, заставляя его таким образом сдвинуться влево и вверх и занять место в центре окна браузера.

Свойство border добавлено лишь для наглядности.

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

Но все-таки для большинства задач это решение вполне подойдет.

Как всегда первый шаг – это создание HTML-разметки.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="products.html" id="current">Продукция</a></li>
  <li><a href="gallery.html">Фото</a></li>
  <li><a href="responses.html">Отзывы</a></li>
  <li><a href="feedback.html">Контакты</a></li>
</ul>

Здесь необходимо обратить внимание на пункт, где встречается id=»current». В реально работающем меню необходимо определять текущую страницу при ее загрузке и присваивать этот id соответствующему пункту.

А теперь приведу таблицу стилей для организации этого списка в горизонтальное меню.

ul {
  padding:3px 0;
  margin-left:0;
  border-bottom:1px solid #003;
  font:bold 8pt Verdana, sans-serif;
}
ul li {
  list-style:none;
  margin:0;
  display:inline;
}
ul li a {
  padding:3px 0.5em;
  margin-left:3px;
  border:1px solid #003;
  border-bottom:none;
  background-color:#FFA6BD;
  text-decoration:none;
  color:#AD2039;
}
ul li a:hover {
  background-color:#AD2039;
  color:#FFA6BD;
}
ul li a#current {
  background-color:#fff;
  border-bottom:1px solid #fff;
}

Ничего особенно хитрого тут нет. Сначала зададим отступы и левое поле для элемента ul, там же определяем нижнюю рамку для всего элемента и шрифт, а вот затем начинается более интересное правило. Для ul li мы скрываем стандартные маркеры, полям задаем значение 0 и наконец display:inline; – вот что заставляет наш список «вытянуться» в строку.

Дальше описываем элемент a, задавая ему отступы, поля, рамки, определяя цвет фона и шрифта. Обращу внимание разве что на определения свойства border. Сначала заданы значения свойства border для всех четырех сторон, а в следующей строке мы пишем border-bottom:none;, т.е. отменили рамку снизу. Такой вариант написания вполне имеет право на существование.

Далее определяем стили элемента а при наведении на него указателя мыши – тут мы изменим только цвет фона и цвет текста.

И самое последнее – стили для элемента имеющего id=»current». Цвет фона задаем совпадающим с цветом основного фона страницы, как впрочем и цвет нижней рамки.

Вот, что у нас получилось в итоге.

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

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="about.html">О компании</a></li>
  <li><a href="products.html">Каталог продукции</a></li>
  <li><a href="gallery.html">Фото объектов</a></li>
  <li><a href="responses.html">Отзывы клиентов</a></li>
  <li><a href="scheme.html">Схема проезда</a></li>
  <li><a href="feedback.html">Форма для связи</a></li>
</ul>

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

ul {
  list-style:none;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.9em;
  font-weight:bold;
  width:20em;
  border-bottom:1px solid #003;
  border-right:1px solid #003;
  border-left:1px solid #003;
}
ul li {
  border-top:1px solid #003;
}
ul li a {
  display:block;
  padding:2px 2px 2px 0.5em;
  border-left:15px solid #AD2039;
  background-color:#FFA6BD;
  color:#AD2039;
  text-decoration:none;
  width:100%;
}
html > body ul li a {
  width:auto;
}
ul li a:hover {
  border-left:15px solid #FFA6BD;
  background-color:#AD2039;
  color:#FFA6BD;
}

Рассмотрим подробнее стилевое оформление элемента ul. Сначал скроем стандартные маркеры списка, затем установим значения свойств margin и padding (почему мы устанавливаем именно оба свойства можно прочитать в статье «CSS: задание отступов и изменение стилей маркера в списках.»). Свойства font установят нужные шрифты и размер. Свойство width ясное дело будет отвечать за ширину списка. Следующие три строки устанавливают рамку шириной в 1px справа, снизу и слева для элемента ul.

Почему не сверху? Потому, что неплохо иметь такую же тонкую рамку, которая будет отделять каждый элемент списка. Это мы проделаем, написав правило border-top:1px solid #003; для ul li (для всех элементов li, являющихся дочерними по отношению к элементу ul).

В следующем правиле ul li a мы зададим стили ссылок. Поскольку элемент a по умолчанию – это строчный элемент, нам необходимо изменить его отображение, чтобы элементы a отображались как блочные. Это необходимо для того, чтобы можно было использовать меню щелкая мышью на всем выбираемом элементе, а не только на тексте ссылки. Делаем это, задавая свойству display значение block.

Определяем отступы со всех сторон в свойстве padding, задаем рамку слева толщиной в 15px в свойстве border-left, определяем свойства background-color (цвет фона) и color (цвет текста), а также удаляем подчеркивание ссылок, воспользовавшись свойством text-decoration.

Последняя строчка задает теперь уже блочному элементу ширину width в 100%. Это сделано специально для IE, но может создать проблемы в Netscape Navigator и IE для Mac и поэтому следующее правило html>body ul li a написано специально для решения этой проблемы. IE не сможет его прочесть, поскольку не умеет обрабатывать правила для селектора потомка.

И наконец последнее правило будет задавать стили использующиеся при наведении указателя мыши на ссылку. Здесь мы просто задаем другие цвета в свойствах border-left, background-color и color.

Вот как это будет выглядеть. По моему неплохо. Такое меню будет вполне работоспособно и при отключенной поддержке стилевого оформления.

Правда сразу оговорюсь, что для начала мы разберем скорее теоретические основы, поскольку существует браузер названИЕкоторого все знают. Нормальное решение основано на использовании автоматически генерируемого контента, а вышеупомянутый браузер (будем честными до конца – не только он один) не поддерживает эту возможность. Зато это прекрасно работает в Mozilla, FireFox, Netscape 6+, Opera и Safari. А затем разберем и универсальное решение. К сожалению не такое изящное.

Посмотрите на этот CSS-код:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
  text-indent:-1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}
li:before {
  content:"\00BB \0020";
}

Для начала скрываем маркер списка, который имеется по умолчанию с помощью list-style:none; затем устанавливаем левый отступ 1em, но при этом сдвигаем текст влево на ту же величину, т.е. -1em для того, чтобы «вытолкнуть» стандартный маркер из блока элемента списка. С помощью псевдоэлемента :before генерируем текстовый маркер. В свойстве content нужные символы указаны с помощью шестнадцатеричного escape-эквивалента Unicode, как того требует спецификация CSS2.1. В примере сгенерирована последовательность символов из двойной стрелки-ёлочки и пробела. Изящно, просто и красиво, но не для IE …

… и решение, которое подойдет для всех браузеров. К сожалению, уже не такое красивое. Текстовый маркер придется просто вставлять перед каждым элементом списка. Как показано ниже:

<ul>
  <li>» Первый пункт списка</li>
  <li>» Второй пункт списка</li>
  <li>» Третий пункт списка</li>
  <li>» Четвертый пункт списка</li>
  <li>» Пятый пункт списка</li>
</ul>

а таблицу стилей для этого варианта надо немного изменить. Вот так:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}

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

Разберем другой вопрос: как сделать маркер, используя картинку?

Для того, чтобы применить графический маркер используется свойство list-style-image, как показано в примере ниже

ul {
  list-style-type: disc;
  list-style-image: url(marker.png);
}

Свойство list-style-type используется здесь на всякий случай, если браузер пользователя не имеет возможности использовать изображение. А в свойстве list-style-image задается путь к нужной картинке. Управлять размером картинки, которая используется как маркер списка, из таблицы CSS мы не сможем и поэтому надо убедиться в том, что картинка имеет подходящие размеры. Еще один нюанс состоит в том, что значения графических маркеров наследуются и если Вы создаете вложенные списки и хотите отказаться от маркера изображения в них, надо опять использовать свойство list-style-image. Вот таким образом:

ul ul {
  list-style-image:none;
}

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

ul {
  margin-left:10px;
  padding-left:0px;
  list-style:none;
}
li {
  padding:0.5em 0 0.5em 54px;
  font: 1.3em/1.6 Verdana, Arial, sans-serif;
  background:url(bigMarker.png) no-repeat;
}

Сначала задаем значения и для левого поля и для левого отступа списка (почему именно так, я объяснял в одной из предыдущих статей). Потом удаляем маркер, используемый по умолчанию. Теперь главное: padding:0.5em 0 0.5em 54px; – мы освобождаем место слева от элемента списка, для того, чтобы вставить туда нашу большую картинку (например 54х54 пиксела), затем задаем свойство font таким образом, чтобы текст элемента списка не диссонировал с размером картинки-маркера и наконец используем свойство background, чтобы эту картинку вставить в качестве маркера списка.

Надеюсь, что это статья поможет кому-нибудь…

Решение в этом случае достаточно простое. При создании стилевого оформления списка надо просто учесть этот факт и задать оба свойства, например вот так:

ul {
  margin-left: 50px;
  padding-left: 0px;
}

Если же Вы попытаетесь разделить эти 50px между свойствами margin и padding, то отображение страницы в разных браузерах будет уже неодинаковым.
С одним вопросом немного разобрались. Теперь во всех браузерах отступы одинаковые, но вот как-то бедно выглядят эти списки. У одного в качестве маркера – закрашенный кружочек, у другого – ничем не примечательные цифры.

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

Для того, чтобы поменять стандартный стиль списка, воспользуйтесь свойством list-style-type и Вы сможете изменить маркер или тип счетчика. Приведу возможные значения для ненумерованного списка.
disc – обычно по умолчанию. Закрашенный кружок.
circle – незакрашенный кружок.
square – закрашенный квадратик.
Т.е., если мы хотим вместо появляющегося по умолчанию закрашенного кружочка увидеть квадратик, пишем:

li {
  list-style-type: square;
}

Точно так же для нумерованного списка по умолчанию применяется значение decimal, т.е. начинается с 1, затем 2, 3 и так далее…
Приведу еще несколько возможных значений:
decimal-leading-zero – начинается с 01, потом идет 02, 03 и так далее. Количеству ведущих нулей может равняться числу значащих цифр. Например 0001 будет показан в списке из например 9999 элементов.
lower-roman – строчные римские цифры.
upper-roman – заглавные римские цифры.
lower-greek – начинается с букв греческого алфавита: альфа, бета, гамма и т.д. (не поддерживается в IE).
hebrew – начинается с традиционного иврита (не поддерживается в IE).
none – как же без этого – маркеры не отображаются.

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

<div id="header">
... какой-то заголовок или слоган ...
</div>
<div id="sidebar">
... здесь может быть меню сайта ...
</div>
<div id="content">
... здесь основное содержимое ...
</div>
<div id="info">
... дополнительная  информация ...
</div>

Вы можете посмотреть пример, того что получилось, и после этого разберем следующий CSS код.

body {
  margin:5px 0 0 5px;
  background-color:#000;
  background-image:url(flowers.jpg);
  background-position: top right;
  background-repeat:no-repeat;
  color:#fff;
}
#header {
  position:absolute;
  right:5%;
  top:10%;
  width:40%;
  font-weight:bold;
  font-size:1.4em;
}

#sidebar {
  position:absolute;
  left:35%;
  top:1%;
  width:65%;
  background-color:#333;
}
#content {
  position:absolute;
  left:5%;
  top:20%;
  width:45%;
}
#info {
  position:absolute;
  left:80%;
  width:20%;
  top:80%;
  background-color:#333;
}

Для размещения фонового изображения задаем значения в процентах, что позволит ему перемещаться вместе с содержимым страницы при изменении размеров окна браузера.
Далее мы используем свойство position, которому задаем значение absolute и определяем позицию элемента, задавая его положение (свойства top, left, right, bottom) опять же в процентах.
Еще легче создать несимметричный макет с фиксированным расположением элементов на странице. Используйте вместо относительных величин (проценты), абсолютные (например px).