VPF::Закладки. z-index. Списки. - Форум программистов

Enya

Дата 22.11.2006, 00:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Мне Illuminaty, дал вот эту ссылку.
Хорошая статья. Может поможет

Я давно обратила внимание что за основу для навигации берут списки. Хочу поподробнее разобраться.
Вот у меня html file

Код


<html>
<head>
<title>:: CSSING ::</title>
<link rel="stylesheet" href="cssing_li_menu_style.css" type="text/css">
</head>
<body id="home">
            
 <div id="navcontainer">
  <ul id="nav">
<li><a href="index.htm"  id="first">Homepage</a></li>
   <li><a href="art.htm" id="second">Articles</a></li>

    <li><a href="arch.htm" id="third">Archives</a></li>
     <li><a href="exit.htm" id="forth">Exit</a></li>
     <div class="clr"></div>
  </ul>
  </div>
                             
</body>
</html>

о вот css file

Код


#navcontainer{
    margin: auto;
    width: 750px;
    position: relative;
    margin-top: 30px;
height:29px;
overflow:hidden;
}
.clr{
    clear: both;
}
#nav {
    margin: 0;
    padding: 0;
    height: 29px;
    list-style: none;
    display: inline;
    overflow: hidden;
}

#nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline;
}

#nav a {
    float: left;
    padding: 29px 0 0 0;
    overflow: hidden;
    height: 0px !important;
    height: 29px; /* for IE5/Win only */
    text-indent: -1000em;
    position: absolute;
}
    
#first{
    left: 0;
    z-index: 40;
}
#second{
    left: 164px;
    z-index: 30;
}
#third{
    left: 328px;
    z-index: 20;
}
#forth{
    left: 492px;
    z-index: 10;
}
#nav a{
    background-position: 0 -29px;
    width: 174px;
}
    #nav #first{
    background-image: url(ob1.gif);
}
    #nav #second{
    background-image: url(ob2.gif);
}
        #nav #third{
    background-image: url(ob3.gif);
}
        #nav #forth{
    background-image: url(ob4.gif);
}


#home #nav #first, #articles #nav #second, #archive #nav #third, #exit #nav #forth {
    background-position: 0 0;
}
#nav a:hover{
    background-position:0 -40px;
}
#archive #third,#articles #second, #exit #forth{
    z-index:100;
}
/*EVEN MORE CUTIER*/
#archive #first, #exit #first{
    z-index:1;
}
#exit #second {
        z-index:2;
}

Основа взята вот отсюда пример
у меня 4 файла, вот такого содержания (см прикреплённый).

Чт конкретно не получается? я вставила свои картинки и попробывала подогнать под размеры, но сами понимаете что ничего не вышло. Обыдно, где-то ошиблась smile

Помоги как правильно спозиционировать?
Очень интересный пример.

Присоединённый файл ( Кол-во скачиваний: 16 )

ob1.gif 1,44 Kb

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

SelenIT

Дата 22.11.2006, 04:20 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Вот набросал пример с картинками из Вашей предыдущей темы ;) с использованием все того же скрипта tabControl-а и ориентируясь на этот пример навигации. Проверял в IE 6, FF2, Opera 9. В IE могут быть незначительные глюки (несмотря на некоторое "шаманство"), зато верстка выдерживает масштабирование на +2 ступени в IE и практически +-5 ступеней - в FF. В 5-м IE скорее всего развалится, но его поддерживать уже нет особого смысла.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Enya

Дата 22.11.2006, 09:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

SelenIT, класс! Только давайте разберём поподробнее этот пример. Мне уж очень сильно хочется понять как оно работает. smile

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Enya

Дата 22.11.2006, 10:16 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

SelenIT, вот эту строчку не понимаю (конкретно что значит 1em/1em это что значит):

Код


#menu {
...
font: normal 1em/1em verdana, sans-serif;
...
}

и тут мало я такого видела (что эта за звёздочка, что это за параметры z-index)

Код


* html #menu li {
  display:inline;
  position: relative;
  z-index: expression(this.nextSibling ? this.nextSibling.style.zIndex+1 : 1);
}

и вот тут блин, и ID меню, и два тега, и класс left

Код


#menu li span.left {
  background:url(bg10.gif) 0 0 no-repeat; left: -3px; width: 3px; z-index: 0;
}
#menu li span.right {
  background:url(bg11.gif) 0 0 no-repeat; right: -2.2em; z-index: 2; width: 2.2em;
}

Вообще не много не понимаю почему за основу для меню берут списки, ведь списки они обычно вертикальные, а получаются и горизонтальные..
Просто не понимаю как на <li> (точку) вешают картинку. smile

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Enya

Дата 22.11.2006, 10:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

SelenIT, почему размеры указаны в em ?

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Enya

Дата 22.11.2006, 11:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

SelenIT, а вот это и есть шаманство?

Код


img
{
    -moz-outline: 1px solid #ff0000 !important;
    outline: 1px solid #ff0000 !important;
}

input[type=image]
{
    -moz-outline: 1px solid #00ff00 !important;
    outline: 1px solid #00ff00 !important;
}

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

SelenIT

Дата 22.11.2006, 14:32 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Ок, по пунктам:

em - относительная единица, чтобы шрифты и все с ними связанное (как уголок закладки в нашем случае) могли масштабироваться во всех браузерах. font: 1em/1em ... соркащение для font-size и line-height соответственно (обычно высота строки больше размера шрифта за счет отступа, но нам лишнее вертикальное пространство не нужно).
* в CSS означает любой тег. * html означает несуществующую последовательность "тег <html>, вложенный во что угодно" и потому игнорируется всеми браузерами... кроме IE 5-6. Поэтому это работает как CSS-хак для IE (стили только для IE ниже 7-го).
expression - IE-only-фича, можно присваивать CSS-свойствам вычисляемые выражения Javascript (если Javascript не выключен, конечно). В данном случае я просто не нашел другого способа заставить следующую закладку "подлезть" под предыдущую в IE.
#menu li span.left - на самом деле все просто, разбирается последовательно: span с классом left, вложенный в li, в свою очередь вложенный во что-то с ID="menu".
-moz-outline - стиль только для Мозиллы/FF, в данном случае - аналог border-a, но отображаемый внутри элемента (если не путаю).
input[type=image] - селектор по атрибуту, означает тег <input> с атрибутом type, равным "image". К сожалению, не поддерживается в IE вплоть до последней беты 7-ки (в релизе 7-ки вроде бы уже есть).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Enya

Дата 22.11.2006, 14:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

SelenIT, сам css код очень интересен. И из последнего сообщения, я узнала для себя очень много. огромное спасибо.
Ещё два вопросика:
1. Если я хочу добавить закладку мне достаточно скопировать и не много отредактировать 2 строчки в html?

Цитата

    <div class="cont">
        <ul id="menu">
            <li><a href="#t1"><span class="left"></span>Закладка раз<span class="right"></span></a></li>
            <li><a href="#t2"><span class="left"></span>Закладка два<span class="right"></span></a></li>
            <li><a href="#t3"><span class="left"></span>Еще закладка<span class="right"></span></a></li>
            <li><a href="#t4"><span class="left"></span>Еще закладка<span class="right"></span></a></li>
        </ul>
    </div>

    <div id="main">
        <div id="t1" class="bigtab hidden">Текст первой вкладки.</div>
        <div id="t2" class="bigtab">Текст второй вкладки. Она открывается по умолчанию, т.к. ей единственной не назначен CSS-класс <i>hidden</i>.</div>
        <div id="t3" class="bigtab hidden">Текст последней вкладки.</div>
        <div id="t3" class="bigtab hidden">Текст последней вкладки.</div>
    </div>

И так у меня получиться ещё пол-функциональная вкладка?

2. Да, все верно, закладки работаю отменно. Но мне нужно чтобы по клику пользователь переходил к ссылающемуся документу.
А то засунуть в 6 вкладок миниатюрок для объектов, и загружать всё это одним разом - будет напряжно.
По этому на кажду вкладку нужна ссылка на документ, а не на скрытый div.biftab
А то у меня 1 вкладка видна, а 5 ещё скрыто. Но они уже загружены. А там не только текст и чуть графики.
По этому я и стала рассматривать пример (ссылку я давала в начале темы.)

Зы. Но это нечто, это просто шедевр. Одни бесконечные плюсы.

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Enya

Дата 22.11.2006, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

SelenIT, я вот сейчас стараюсь под себя подстроить. И есть div класса cont

Код


<div class="cont">
        <ul id="menu">
            <li><a href="#t1">

Но в css этот класс не описан. smile

это опечатка?

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

SelenIT

Дата 22.11.2006, 16:36 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Это остаток от прошлого варианта, там он был востребован). Можно убрать, конечно.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Enya

Дата 22.11.2006, 16:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

SelenIT, вот есть, если я не ошибаюсь, такие псевдо-классы как hover, active, а есть ли псевдо класс для ссылки покоторой уже перешли, и она остаётся выделенной специальным цветом.

может чуть проше опишу, попробую:
вот у нас есть стиль CSS

Код


#menu {
  display:table;
  padding:0;
  margin: 0 0 -1px;
  font: normal 0.8em/0.8em verdana, sans-serif;
  white-space:nowrap;
  list-style-type:none;
  position: relative;
}
* html #menu {
  display:inline-block;
  width:1px;
  bottom: -0.09em;
}  
#menu li {
  display:table-cell;
}
* html #menu li {
  display:inline;
  position: relative;
  z-index: expression(this.nextSibling ? this.nextSibling.style.zIndex+1 : 1);
}
#menu li a {
  position: relative;
  display: block;
  padding:0.2em 0.2em 0.2em 1em;
  margin: 0 0.7em;
  background:#337935; 
  color:#fff;
  text-decoration:none;
}
#menu li span {
  position: absolute; top: 0; height: 1.2em;
}
#menu li span.left {
  background: url(../images/bg10.gif) no-repeat 0 0; left: -3px; width: 3px; z-index: 0;
}
#menu li span.right {
  background: url(../images/bg11.gif) no-repeat 0 0; right: -2.2em; z-index: 2; width: 2.2em;
}
* html #menu li a {
  display:inline-block;
  margin: 0 0.5em;
}
#menu li.actual {
  position: relative;
  z-index: 100;
}
#menu li.actual a {
  color:#337935; 
  background:#fff;
  position: relative;
  z-index: 100;
}
#menu li.actual span {
  background-position: 0 -100px;
}

вот у нас html

Код


<div class="cont">
        <ul id="menu">
            <li class="actual"><a href="№"><span style="outline-color: rgb(0, 0, 255); outline-style: solid; outline-width: 1px;" class="left"></span>Раз закладка<span style="outline-color: rgb(0, 0, 255); outline-style: solid; outline-width: 1px;" class="right"></span></a></li>
            <li class=""><a href="№"><span style="outline-color: rgb(0, 0, 255); outline-style: solid; outline-width: 1px;" class="left"></span>Два закладка<span style="outline-color: rgb(0, 0, 255); outline-style: solid; outline-width: 1px;" class="right"></span></a></li>
            <li class=""><a href="№"><span style="outline-color: rgb(0, 0, 255); outline-style: solid; outline-width: 1px;" class="left"></span>Три закладка<span style="outline-color: rgb(0, 0, 255); outline-style: solid; outline-width: 1px;" class="right"></span></a></li>
                        <li class=""><a href="№"><span style="outline-color: rgb(0, 0, 255); outline-style: solid; outline-width: 1px;" class="left"></span>Четыре закладка<span style="outline-color: rgb(0, 0, 255); outline-style: solid; outline-width: 1px;" class="right"></span></a></li>
        </ul>
    </div>

и вот у нас здесь указано для <li class="actual"> класс "actual", а можно JS просто менять z-index и имя класса.
Просто те JS которые в вашем примере, для меня они лишнии. Мне нужно загружать новую страничку.

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

SelenIT

Дата 22.11.2006, 17:06 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(Enya @ 22.11.2006, 16:56

)

псевдо класс для ссылки покоторой уже перешли

:visited?

Цитата(Enya @ 22.11.2006, 16:56

)

а можно JS просто менять z-index и имя класса

Конечно можно. Наверное можно даже задать класс самой ссылке и обойтись без JS, одними псевдоклассами CSS (жалко, сейчас нет времени самому поэкспериментировать...).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Enya

Дата 24.11.2006, 00:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Ну, вот почти, получено желаемое.
Такой вопрос. У меня в меню 6 пунктов.
По умолчанию, как бы первому пункту присвоен класс selected
Я хочу, что бы после того как кликнул, перешёл на другую страницу пункта меню.
То тот пункт по которому кликнул - принял класс selected и стал беленьким, а остальные стали зелёненькими. (Белый и зеленый цвета у меня так определены).
А то не будет такого эффекта перебора закладок.

Добавлено @ 00:26
Я тут в архивчик сбросила, стили, картинки, разметку.

Присоединённый файл ( Кол-во скачиваний: 5 )

horizontal_CSS_Menu.zip 4,39 Kb

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Enya

Дата 29.11.2006, 23:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Я вот так и не поняла, как сделать полноценный эффект перебора закладок smile

Цитата

У меня в меню 6 пунктов.
По умолчанию, как бы первому пункту присвоен класс selected
Я хочу, что бы после того как кликнул, перешёл на другую страницу пункта меню.
То тот пункт по которому кликнул - принял класс selected и стал беленьким, а остальные стали зелёненькими. (Белый и зеленый цвета у меня так определены).

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

SelenIT

Дата 29.11.2006, 23:54 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Enya, так если закладки - это обычные ссылки и при клике происходит перезагрузка страницы, то на новой странице просто класс selected будет присвоен другой закладке... или я чего-то недопонимаю?

Это сообщение отредактировал(а) SelenIT - 29.11.2006, 23:55

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Enya

Дата 30.11.2006, 09:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

SelenIT, ага. Точно. Буду пробывать.

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Nuxx

Дата 30.11.2006, 16:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.11.2006

Репутация: нет
Всего: нет

Посмотри как сделано здесь: http://informa.net.ru
Если хочешь, могу потом показать php-код реализации

Enya

Дата 30.11.2006, 18:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Nuxx, спасибо конечно, но
1. Вы предложили вертикальное меню, а меня интересует горизонтальное
2. И в вашем примере я увидела навигационную панель далеко не как система закладок.
smile

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Nuxx

Дата 1.12.2006, 12:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.11.2006

Репутация: нет
Всего: нет

display: inline; – и вуаля – вертикальный список превращается в горизонтальный smile

(только это не все конечно)
Я вообще-то хотел обратить внимание совсем не на то, какого вида список. Просто привел пример, как будет выглядеть меню при выборе того или иного пункта. На самом деле вся реализация происходит на уровне php, когда пункту, который выбран, присваивается какой-либо класс, например 'selected', чтобы внешний вид выбранного пункта отличался от остальных, вот и все собственно. Можно конечно и с помощью js такое реализовать, но тогда возникает вероятность того, что не каждый пользователь увидит это – причины, надеюсь, понятны.

Это сообщение отредактировал(а) Nuxx - 1.12.2006, 12:48

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »