Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> "Резиновый" фон для меню навигации, Проблема с IE 
:(
    Опции темы
oXyd
Дата 11.7.2008, 03:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Здравствуйте.
Необходимо сделать резиновый фон для активного пункта меню навигации.
user posted image
Вроде получилось, только одна проблема - в експлорере все очень криво(с оперой и фф проблем нет).
ФФ3
user posted image
ИЕ
user posted image
Можно ли его подогнать под ИЕ, или необходимо полностью переделывать? Если переделывать полностью, подскажите пожалуйста как его реализовать, чтобы не возникло проблем в различных браузерах.

Вот код
Само меню, фон на первом элементе
Код

 <div id="nav">
              <a href="index.html" class="hover">
             <div class="hover">        
                   <div id="nav_l">    
                   </div>    
                      <div id="nav-title">О нас</div>                 
                   <div id="nav_r">                                  
                   </div> 
                </div>
              </a>                
         
              <a href="index1.html">Контактная информация</a>
              <a href="index2.html">Рекламодателям</a>
              <a href="index3.html">Каталог компаний</a>
            <div class="clear"></div>
   </div>

Стили
Код

#nav {
    font-size:140%;
    background:url(images/nav.png) repeat-x;
    text-align:center;
    margin:0 76px 0 76px;
    padding:0 0 0 0;
}

#nav a {
    margin:0px 22px 0px 22px;
    color:#1E90FF;
    padding-bottom:20px;
}

#nav a.hover{
    color:white;
    text-decoration:none;
    padding-bottom:20px;
}

#nav div.hover{
    background:url(images/nav_body.png) repeat-x;
    height:37px;
    margin:0 0 0 0;
    display:inline-block;
}

#nav_l {
    background:url(images/nav_left.png) no-repeat;
    display:inline-block;
    margin:0 1px 0 0;
    width:10px;
    height:37px;
}

#nav_r{
    background:url(images/nav_right.png) no-repeat;
    display:inline-block;
    margin:0 0 0 1px;
    width:10px;
    height:37px;
}

#nav-title{
    display:inline-block;
    padding-bottom:10px;
    border:1px solid black;
}


Это сообщение отредактировал(а) oXyd - 11.7.2008, 09:39
PM MAIL   Вверх
webster
Дата 11.7.2008, 14:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 34
Всего: 34
Принцип действия в такой ситуации может быть следующим:
Код

...
<head>
<title></title>
<style type="text/css">
* {margin: 0px; padding: 0px;}
a {display: block; width: 4em;}
a span {line-height: 37px; text-align: center; display: block; width: 4em;}
a:hover {background: transparent url(./rc.gif) no-repeat top right;}
a:hover span {background: transparent url(./lc.gif) no-repeat top left;}
</style>
</head>
<body>
<a href="#">
<span>О нас</span>
</a>
</body>
...


Это сообщение отредактировал(а) webster - 11.7.2008, 16:49
PM MAIL   Вверх
oXyd
Дата 11.7.2008, 17:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
webster, во-первых небольшое уточнение, фон должен появляться не на ссылке на которую наведен курсор(a:hover не используем), а на той которая ведет к активному на данный момент разделу. Т.е. сделаны 4 страницы(по количество пунктов меню), на каждой подсвечен свой пункт.
Попробовал а сделать блочным, вот что получилось
ФФ3
user posted image
ИЕ
user posted image

Похоже ИЕ не понимает свойства, так как располагает каждый блок на новой строке
Код

display:inline-block;


Код сейчас получился такой
Код

<div id="nav">                     
                   <div id="nav_l">    
                   </div>    
                    <a href="index.html" class="nav-hover">О нас</a>         
                   <div id="nav_r">                                  
                   </div>                             
              <a href="index1.html">Контактная информация</a>
              <a href="index2.html">Рекламодателям</a>
              <a href="index3.html">Каталог компаний</a>
            <div class="clear"></div>
 </div>

Код

#nav {
    font-size:140%;
    background:url(images/nav.png) repeat-x;
    text-align:center;
    margin:0 76px 0 76px;
    padding:0 0 0 0;
}

#nav a {
margin:0px 22px 0px 22px;
color:#1E90FF;
}

#nav a.nav-hover{
    color:white;
    text-decoration:none;
    display:inline-block;
    line-height:37px;
    padding:0 1em 0 1em;
    background:url(images/nav_body.png) repeat-x;
}

#nav-hover{
   
    height:37px;
    margin:0 0 0 0;
    display:inline-block;
}

#nav_l {
    background:url(images/nav_left.png) no-repeat;
    display:inline-block;
    margin:0 0 0 0;
    width:10px;
    height:37px;
}

#nav_r{
    background:url(images/nav_right.png) no-repeat;
    display:inline-block;
    margin:0;
    width:10px;
    height:37px;
}


Может я чего не правильно сделал?!

Это сообщение отредактировал(а) oXyd - 11.7.2008, 17:07
PM MAIL   Вверх
webster
Дата 11.7.2008, 17:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 34
Всего: 34
display:inline-block; - нет такого свойства. http://w3schools.com/css/pr_class_display.asp А что вам мешает в моем примере определить класс .hover

Это сообщение отредактировал(а) webster - 11.7.2008, 17:53
PM MAIL   Вверх
oXyd
Дата 11.7.2008, 19:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
webster, спасибо, я раньше описания ксс свойств смотрел тут http://www.htmlbook.ru/ , отсюда и взял inline-display:(

Сделал вашим способом - получилось, только вот фон тега а занимает всю ссылку, в итоге она получается прямоугольной, как вытащить боковые изображения?
user posted image
И еще один непонятный мне момент, почему остальные ссылки выстроились на той же строке что и первая(которую мы сделали блочной)? Мне так и надо, только вот не понимаю за счет чего так получилось, блок ведь занимает строку целиком вроде(если ему не задано обтекание), или к объектам к которым задано свойство display:block эта особенность блоков не относится?
Недавно начал заниматься версткой, с блочной вообще чуть меньше недели назад познакомился, многое еще не понятно.

Вот код получившегося меню
Код

 <div id="nav">                                    
              <a href="index.html" class="nav-hover"><span id="nav_l"></span>О нас<span id="nav_r"></span></a>                                                 
              <a href="index1.html">Контактная информация</a>
              <a href="index2.html">Рекламодателям</a>
              <a href="index3.html">Каталог компаний</a>
   </div>

Код

#nav {
    font-size:140%;
    background:url(images/nav.png) repeat-x;
    text-align:center;
    margin:0 76px 0 76px;
    padding:0 0 0 0;
}

#nav a {
margin:0px 22px 0px 22px;
color:#1E90FF;
}

#nav a.nav-hover{
    color:white;
    text-decoration:none;
    display:inline-block;
    line-height:37px;
    padding:0 1em 0 1em;
    background:url(images/nav_body.png) repeat-x;
}

#nav_l {
    background:url(images/nav_left.png) no-repeat top-left transparent;
    margin:0 0 0 0;
    width:10px;
    height:37px;
}

#nav_r{
    background:url(images/nav_right.png) no-repeat top-right transparent;
    margin:0;
    width:10px;
    height:37px;
}



Это сообщение отредактировал(а) oXyd - 11.7.2008, 19:42
PM MAIL   Вверх
webster
Дата 11.7.2008, 20:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 34
Всего: 34
Высоту ссылки a мы определили при помощи свойства line-height:37px; которое заодно и обеспечило нам выравнивание текста ссылки по вертикали внутри тега a.
А вот эта конструкция:
Код

background:url(images/nav_body.png) repeat-x;
у вас задает повторение бэкгроунда по горизонтали - по оси x. Вам же нужно примерно следующее:
Код

background:url(images/nav_body.png) no-repeat top left;
И потом, непонятно, почему вы используете span над и под текстом ссылки, а не вокруг него? Здесь достаточно использовать только два тега <a><span>О нас</span></a> одному тегу будет принадлежать картинка одного угла, а другому - другого, причем картинку заведомо можно сделать широкой, чтобы заодно "залить" бэкгроундом все пространство ссылки (шириной например 350px)
PM MAIL   Вверх
oXyd
Дата 11.7.2008, 20:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Два спана потому что в одном фоном служит левый угол картинки, во втором правый. В самом теге а фоном я задал центральную часть картинки(это изображение nav_body.png)
user posted image
рипит для нее задан чтобы фон получился "резиновым", т.е. мог растягиваться в зависимости от ширины текста. 

Если использовать только изображения правого и левого угла, можно ли получить нечто подобное?

Цитата

Высоту ссылки a мы определили при помощи свойства line-height:37px; которое заодно и обеспечило нам выравнивание текста ссылки по вертикали внутри тега a.

Про выравнивание внутри тега а понятно, но ведь первый а мы определили как блок, а блок начинается и заканчивается новой строкой. Почему остальные ссылки, после первого тега а остались на той же строке?
PM MAIL   Вверх
webster
Дата 11.7.2008, 20:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 34
Всего: 34
Посмотрите как это правильно делать здесь:
http://www.dynamicdrive.com/style/csslibra...orizontal_menu/
Вот эта запись неправильная - background:url(images/nav_right.png) no-repeat top-right transparent;
И у вас нигде тег a не объявлен блоком.

Это сообщение отредактировал(а) webster - 11.7.2008, 21:03
PM MAIL   Вверх
NDenis
Дата 12.7.2008, 13:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 8
Всего: 8
oXyd, еще одна хорошая статья на русском
PM MAIL   Вверх
oXyd
Дата 14.7.2008, 12:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
webster, NDenis, спасибо огромное за ссылки на статьи.

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

Осталась одна проблемка, как такое меню выровнять по центру экрана? Ведь флоат выравнивает элементы по краю экрана. Задавать отступы не пойдет, при изменении разрешения экрана все разъедится. Как быть? 

Код получившегося меню
Код

 <div id="nav">
             <ul class="nav-menu">
                    <li class="current"><a href="index.html"><b>О нас</b></a></li>
                    <li><a href="index1.html"><b>Контактная информация</b></a></li>
                    <li><a href="index2.html"><b>Рекламодателям</b></a></li>    
                    <li><a href="index3.html"><b>Каталог компаний</b></a></li>                     
             </ul>
   </div>

Код

#nav {
    font-size:130%;
    background:url(images/nav.png) repeat-x;
    padding:0;
}

#nav a {
    margin:0px 20px 0px 20px;
    color:#1E90FF;
    padding-bottom:20px;
}

.nav-menu{
    position: relative;
    padding: 0 0 0 34px;
    margin:0;
    height: 37px;
    list-style: none;
    margin-left:18%;    
}

.nav-menu li{
    float:left;
}

.nav-menu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 90%;
    font-weight: bold;
    padding:0 0 0 5px;
    height: 37px;
    line-height: 37px;
    cursor: pointer;
}

.nav-menu li a b{
    float: left;
    display: block;
    padding: 0 16px 0 8px;
}

.nav-menu li.current a{
    color: #fff;
    background: url(images/nav_left.png) no-repeat;
    background-position: left top;
    margin:0;
}

.nav-menu li.current a b{
    color: #fff;
    background: url(images/nav_ri.png) no-repeat right top;
}
PM MAIL   Вверх
bars80080
Дата 14.7.2008, 12:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
главному контейнеру, содержащему меню (div#nav) присвоить 
margin-left: auto; margin-right: auto;
а внешнему контейнеру (в котором находится nav) - text-align: center;
PM MAIL WWW   Вверх
oXyd
Дата 14.7.2008, 14:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
bars80080, не выходит. Поставил контейнеру нав отступы справа и слева авто, добавил еще один контейнер навигатион, который является родительским для нав, задал ему текст по центру. Если убрать у .nav-menu отступ margin-left:18%, то все меня прилипнет к левому краю экрана.

Код

<div id="navigation"> 
        <div id="nav">
             <ul class="nav-menu">
                    <li class="current"><a href="index.html"><b>О нас</b></a></li>
                    <li><a href="index1.html"><b>Контактная информация</b></a></li>
                    <li><a href="index2.html"><b>Рекламодателям</b></a></li>    
                    <li><a href="index3.html"><b>Каталог компаний</b></a></li>                     
             </ul>
        </div>
   </div>


Код

#navigation {
    text-align:center;
}

#nav {
    font-size:130%;
    background:url(images/nav.png) repeat-x;
    padding:0;
    margin-left: auto; margin-right: auto;
}

#nav a {
    margin:0px 18px 0px 18px;
    color:#1E90FF;
    padding-bottom:20px;
}

.nav-menu{
    position: relative;
    padding: 0;
    margin:0;
    height: 37px;
    list-style: none;
    margin-left:18%;
}

.nav-menu li{
    float:left;
}

.nav-menu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 90%;
    font-weight: bold;
    padding:0 0 0 7px;
    height: 37px;
    line-height: 37px;
    cursor: pointer;
}

.nav-menu li a b{
    float: left;
    display: block;
    padding: 0 16px 0 8px;
}

.nav-menu li.current a{
    color: #fff;
    background: url(images/nav_left.png) no-repeat;
    background-position: left top;
    margin:0;
}

.nav-menu li.current a b{
    color: #fff;
    background: url(images/nav_ri.png) no-repeat right top;
}
PM MAIL   Вверх
bars80080
Дата 14.7.2008, 14:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
так ты флоат убери
PM MAIL WWW   Вверх
oXyd
Дата 14.7.2008, 14:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
bars80080, если убрать флоат то пункты меню вообще выстроятся на отдельных строках. Меню же на списке ul построено.
PM MAIL   Вверх
bars80080
Дата 14.7.2008, 14:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
а заменить флоаты на display: inline; 

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

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0600 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.