Torawhite

Спасибо! Но у меня последний вариант скрипта в той теме не работает - подсвечивает только при переходе в раздел "еще", причём все разделы сразу. Скрипт присваивает класс .active блоку nav #menu: https://yadi.sk/i/4la_P316dGjeT В скрипте менял только наименование идентификатора и класса: <script>$(function () { $('#menu a').each(function () { var location = window.location.href var link = this.href var result = location.match(link); if(result != null) { $(this).parent().addClass('active'); } else { $(this).parent().removeClass('active'); } }); $('.active').size() == 2 && $('.active').eq(0).removeClass('active') });</script>Скорее всего, скрипт не работает из-за того, что написан под ненумерованный список меню, а у меня меню представлено в виде блока nav с вложенными ссылками: <nav id="menu"> <a title="Главная страница" href="http://torawhite.ru/" target="_self" id="home">■</a> <a href="http://torawhite.ru/magazine/" target="_self" id="magazine">ЖУРНАЛ</a> <a href="http://store.torawhite.ru/" target="_self" id="market">МАРКЕТ</a> <a href="http://torawhite.ru/more/" target="_self" id="more">ЕЩЕ</a> </nav>

Прочитай про каскадность и про то как работает сокращенное свойство background. #home { background: url(http://www.torawhite.ru/images/home.svg) no-repeat; width: 30px;}.active { background-color: #BF1238;} Сделай 301-й редирект. У меня все нормально подсвечивает. Спасибо большое! С каскадированием разобрался, сделал по-другому. Редирект тоже сделал, а вот скрипт всё же подсвечивает два раздела, выставляет класс .active обеим ссылкам:https://yadi.sk/i/PdFGZXFMdG9Kk

Здравствуйте! Задача стоит простая: существует 4 пункта меню, которые необходимо подсвечивать (выделять цветом) при его активности. Но возникло несколько проблем:. 1. Использованный скрипт, подсвечивает пункты вместе с пунктом главной страницы, который должен сниматься при переходе в другой раздел. 2. Если вставить в пункт "главная страница" картинку (в данном случае белый квадрат), то подсветка пункта не работает, а при наведении псевдокласс hover работает без проблем. 3. Если прописываю в браузере адрес без "www" то подсветка слетает - браузер сам не дописывает "www" почему-то, у другх сайтов пробовал - прописывает. Возможно, вопросы совсем глупые, но я новичок в этом. прошу помочь. Спасибо! Сам сайт, так проще смотреть http://www.torawhite.ru/ <!--Блок меню--><div id="top_nav"> <nav id="menu"> <a title="Главная страница" href="http://www.torawhite.ru/" target="_self" id="home"></a> <a href="http://www.torawhite.ru/magazine/" target="_self" id="magazine">ЖУРНАЛ</a> <a href="http://www.store.torawhite.ru/" target="_self" id="market">МАРКЕТ</a> <a href="http://www.torawhite.ru/more/" target="_self" id="more">ЕЩЕ</a> </nav> <!--Блок формы поиска--> <form> <input name="header_search" type="search" placeholder="ПОИСК" id="search"> </form> <!--Блок регистрации--> <div id="registration"> <a href="http://www.torawhite.ru/more/contacts.php" target="_self" id="enter">ВОЙТИ</a> <a href="#" target="_blank" title="Личный кабинет" id="user"></a> <a href="#" target="_blank" title="Регистрация" id="add"></a> </div></div><script>$(function () { $('#menu a').each(function () { var location = window.location.href var link = this.href var result = location.match(link); if(result != null) { $(this).addClass('active'); } });});</script>/*Стили навигации*/#top_nav { position: fixed; top: 140px; margin-left: auto; margin-right: auto; height: 40px; width: 1216px; background-color: #2d2d2d; z-index: 100; }#menu { position: absolute; display: table; width: 268px; height: 30px; left: 0px; bottom: 5px; }#menu a { display: table-cell; text-align: center; vertical-align: middle; background-size: contain; border-right: 1px solid #FFFFFF; cursor: pointer; font: bold 14px ProximaNova-Reg, Verdana; text-decoration: none; color: #FFFFFF; }#menu a:hover { background-color: #BF1238; }.active { background-color: #BF1238; }#home { background: url(http://www.torawhite.ru/images/home.svg) no-repeat; width: 30px; }#magazine { width: 90px; } #market { width: 84px; }#more { width: 60px; }/*Стили формы запроса*/#search { position: absolute; right: 300px; bottom: 5px; width: 616px; height: 30px; border: none; font: 14px ProximaNova-Reg; text-align: center; border-radius: none; }/*Стили блока регистрации*/#registration { position: absolute; display: table; height: 30px; width: 139px; bottom: 5px; right: 0px; }#registration a { display: table-cell; text-align: center; vertical-align: middle; background-size: contain; cursor: pointer; font: 14px ProximaNova-Reg, Verdana; text-decoration: none; background-color: #12BF2D; color: #FFFFFF; }#enter { width: 76px; height: 30px; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; }#user { background: url(http://www.torawhite.ru/images/user.svg) no-repeat; width: 30px; height: 30px; border-right: 1px solid #FFFFFF; }#add { background: url(http://www.torawhite.ru/images/add.svg) no-repeat; width: 30px; height: 30px; }#registration a:hover { background-color: #007212;; background-size: contain; }

Здравствуйте! Работает во всех браузерах, кроме Хрома. Суть скрипта - подсвечивает текущий раздел меню. Сталкивался кто-то? Скрипт <script type="text/javascript"> function shineLinks(id){ try{ var el=document.getElementById(id).getElementsByTagName('a'); var url=document.location.href; for(var i=0;i<el.length; i++){ if (url==el.href){ el.className = 'active_menu'; }; }; }catch(e){} }; </script>

Что? Вы вообще представляете, что такое таблица? Я вообще не понимаю, зачем вы абсолюты туда навтыкали. Представляю, но если убрать position:absolute, то ячейки прилипают к левому краю блока. Это же ссылки, которые представлены в виде табличной ячейки, а не цельная таблица. Что? Вы вообще представляете, что такое таблица? Я вообще не понимаю, зачем вы абсолюты туда навтыкали. Спасибо, что натолкнули на верный путь! Выставил у блока #menu display:table и убрал у ссылок position:absolute и left - всё стало по центру!

line-htight: поднимает только выше за границу ячейки Без position разве можно как-то позиционировать эти ссылки?

Здравствуйте! Столкнулся с такой проблемой: vertical-align отказывается работать - при установке значения "middle" выравнивает по верхнему краю, не могу понять почему... Возможно, сталкивался кто-то? HTML: <div id="menu"> <a title="Главная страница" href="http://www.torawhite.ru/" target="_self" id="home"></a> <a href="#" target="_self" id="magazine">ЖУРНАЛ</a> <a href="#" target="_self" id="market">МАРКЕТ</a> <a href="#" target="_self" id="more">ЕЩЕ</a> </div> CSS: #menu { position: absolute; height: 30px; width: 268px; bottom: 5px; left: 0px; } #menu a { display: table-cell; text-align: center; vertical-align: middle; background-size: contain; border-right: 1px solid #FFFFFF; cursor: pointer; font: 14px ProximaNova-Reg, Verdana; text-decoration: none; color: #FFFFFF; } #menu a:hover, #menu .active_menu { background-color: #BF1238; background-size: contain; } #home { position: absolute; background: url(http://www.torawhite.ru/images/main.svg) no-repeat; left: 0px; width: 30px; height: 30px; } #magazine { position: absolute; left: 31px; width: 90px; height: 30px } #market { position: absolute; left: 122px; width: 84px; height: 30px; } #more { position: absolute; left: 207px; width: 60px; height: 30px; }

Ребят, неужели никто не сталкивался с этим? Должно быть что-то наподобие favicon и прописываться через <link rel="icon" type="image/png" href="...">

В визуальных закладках Firefox и других браузерах присутствует изображение. На некоторых закладках там просто прорисовывается favicon сайта, но есть и такие, где совершенно иная иллюстрация на всю закладку! Откуда браузер берёт это изображение?

Здравствуйте! Выделять раздел при наведении курсора получилось http://www.torawhite.ru/, а как сделать, чтобы раздел оставался выделенным при его активности? То бишь, если главная, то выделена она цветом и так далее.

У IE такие же проблемы. Написано, что нужно поместить текст в файл с расширением *.htaccess в такую же папку, как папка, в которой лежат мои шрифты. То есть на сервере должен создаваться дубликат с моей папкой или сам файл должен создаваться в моей папке, в которой помещены шрифты? Аллилуйя! Наконец-то проблема решилась! Просто создал файл с названием ".htaccess" без указания расширения, поместил туда искомый текст, а сам файл залил через ftp-клиент в папку со шрифтами на сервер! IE тоже стал всё подгружать! Спасибо вам огромное за помощь!

Всё везде изменил на http://www.torawhite.ru/ . Стали подключаться, но не подключаются в разделе, который висит на домене третьего уровня (закладка "Маркет") http://www.store.torawhite.ru/ хотя абсолютные ссылки все одни и те же, папка со шрифтами одна и файл css, который их подключает тоже один.

Ребят! Неужели никто не сталкивался с подобной проблемой?

Прописал порядок так, как в статье, ссылку на которую Вы кинули, всё осталось по-прежнему

Всё же проблема осталась! Как-то через раз подключает, очень капризные оказались Firefox и IE. Прописал так: @font-face { font-family: 'avante'; src: url('http://torawhite.ru/fonts/avante.eot'); src: url('http://torawhite.ru/fonts/avante.eot?#iefix') format('embedded-opentype'), url('http://torawhite.ru/fonts/avante.ttf') format('truetype'), url('http://torawhite.ru/fonts/avante.svg#avante') format('svg'), url('http://torawhite.ru/fonts/avante.woff') format('woff'); } @font-face { font-family: 'helvetica'; src: url('http://torawhite.ru/fonts/helvetica.eot'); src: url('http://torawhite.ru/fonts/helvetica.eot?#iefix') format('embedded-opentype'), url('http://torawhite.ru/fonts/helvetica.ttf') format('truetype'), url('http://torawhite.ru/fonts/helvetica.svg#helvetica') format('svg'), url('http://torawhite.ru/fonts/helvetica.woff') format('woff'); }

Спасибо!

@font-face { font-family: 'avante'; src: url('http://torawhite.ru/fonts/avante.eot#') format('embedded-opentype'), url('http://torawhite.ru/fonts/avante.ttf') format('truetype'), url('http://torawhite.ru/fonts/avante.svg#avante') format('svg'), url('http://torawhite.ru/fonts/avante.woff') format('woff'); } @font-face { font-family: 'helvetica'; src: url('http://torawhite.ru/fonts/helvetica.eot#') format('embedded-opentype'), url('http://torawhite.ru/fonts/helvetica.ttf') format('truetype'), url('http://torawhite.ru/fonts/helvetica.svg#helvetica') format('svg'), url('http://torawhite.ru/fonts/helvetica.woff') format('woff'); } Синтаксис немного поправил - у Firefox подключился, а IE так и не желает! Разобрался, вроде! С таким ситаксисом подключает даже у IE: @font-face { font-family: 'avante'; src: url('http://torawhite.ru/fonts/avante.eot#'), url('http://torawhite.ru/fonts/avante.ttf') format('truetype'), url('http://torawhite.ru/fonts/avante.svg#avante') format('svg'), url('http://torawhite.ru/fonts/avante.woff') format('woff'); } @font-face { font-family: 'helvetica'; src: url('http://torawhite.ru/fonts/helvetica.eot#'), url('http://torawhite.ru/fonts/helvetica.ttf') format('truetype'), url('http://torawhite.ru/fonts/helvetica.svg#helvetica') format('svg'), url('http://torawhite.ru/fonts/helvetica.woff') format('woff'); } А изначально был такой вариант: @font-face { font-family: 'avante'; src: url('http://www.torawhite.ru/fonts/avante.eot'); } @font-face { font-family: 'avante'; src: url('http://www.torawhite.ru/fonts/avante.ttf') format('truetype'), url('http://www.torawhite.ru/fonts/avante.svg#avante') format('svg'); } @font-face { font-family: 'helvetica'; src: url('http://www.torawhite.ru/fonts/helvetica.eot'); } @font-face { font-family: 'helvetica'; src: url('http://www.torawhite.ru/fonts/helvetica.ttf') format('truetype'), url('http://www.torawhite.ru/fonts/helvetica.svg#helvetica') format('svg'); }

Дело в том, что эти шрифты у меня включены в php-блоки, если прописать там относительные ссылки, то блоки работать не будут на других страницах.

Здравствуйте! Проблема следующая: изначально все ссылки в CSS на шрифты указывал относительные - все браузеры отлично подгружали как с хостинга, так и с Denwer, но сейчас все ссылки изменил на абсолютные и теперь шрифты отказывается погружать Firefox, IE! Chrome, Opera и Yandex-браузер работают корректно и всё подгружают! В чём может быть проблема?

Спасибо огромное! Получилось! А сколько я маялся с этим "hover"! Ссылки я потом пропишу абсолютные, это временно!

Вот страница: http://torawhite.ru/ в футере первая ссылка на Вконтакте, там, собственно, картинки и нет.

Путь верный. Может, дело в расширении - SVG?

Вот, что показывает фаербаг изначально: http://yadi.sk/d/lqmHdw86R4Z7u и при наведении: http://yadi.sk/d/jmLIYRpkR4Z7Z "scroll 0 0 rgba(0, 0, 0, 0)" - это вообще не понимаю, откуда он берёт!

Здравствуйте! Прошу помочь со следующей проблемой: пытаюсь сделать замену одной картинки на другую при наведении на неё курсора мыши с помощью псевдокласса "hover", но ничего не выходит, картинка имеет расширение *.svg. Результат следующий: область, где должна быть картинка, работает, как ссылка, при наведении, но там пусто (изображения нет ни исходного, ни при наведении)! html-код <div id="vk_f"> <a href="http://www.vk.com/" target="_blank" id="vk_f_1"></a> </div> css-код #vk_f { position:absolute; right:284px; top:85px; border:none; } #vk_f_1 { background: url(images/vk_logo_0.svg); display: block; width: 30px; height: 30px; } #vk_f_1:hover { background: url(images/vk_logo_1.svg); }

В http пусто, сейчас там моя структура папок с сайтом, index в корне.