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

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

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

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