Задать вопрос
bshepelev

Борис Шепелев

Ответы пользователя по тегу CSS

  • Как можно сверстать страницу div-ами?

    bshepelev
    @bshepelev
    Можно и даже нужно! :)
    Ответ написан
    Комментировать
    Комментировать

  • Есть ли разница seo : голый сайт без CMS, либо wordpress?

    bshepelev
    @bshepelev
    Разницы нет если у вас у каждой страницы свой уникальный: Title, Keywords, Description...
    CMS нужна для удобного манипулирования данными! без знаний и навыков программирования, а также для того, чтобы не плодить десятки страниц с одинаковым кодом.
    Ответ написан
    Комментировать
    Комментировать

  • Как задать цвет отдельных категорий в WordPress?

    bshepelev
    @bshepelev
    С использованием JS:

    Обычно категории записи выводятся через: <?php the_category(', '); ?>

    Поэтому будет приемлемо использование JS (JQuery):
    $('.post-category a').each(function () {
    if ('ссылка' == $(this).attr('href')) { $(this).addClass('class1');
    if ('ссылка2' == $(this).attr('href')) { $(this).addClass('class2');
    if ('ссылка3' == $(this).attr('href')) { $(this).addClass('class3');
    });

    А стили оформить уже стандартно: .class1 , .class2, .class3

    Либо если использовать чистый CSS, но надо добавлять код PHP в цикл "The Loop":

    <?php
    $category = get_the_category();
    foreach((get_the_category()) as $category) {
    if ($category->term_taxonomy_id == 1) { $class="blue"; }
    if ($category->term_taxonomy_id == 2) { $class="green"; }
    if ($category->term_taxonomy_id == 3) { $class="red"; }
    echo '<a class="'.$class.'" href="'.$category->slug.'">'.$category->cat_name.'</a>';
    }
    ?>

    Оба метода рабочие! использую часто в своих проектах!

    В первом случае мы пробегаем по всем ссылкам внутри блока и сравниваем ссылки!
    Во втором мы получаем массив всех категорий и в зависимости от ID выводим ссылку с нужным КЛАСС именем
    Ответ написан
    2 комментария
    2 комментария

  • Кроссбраузерный @font-face

    bshepelev
    @bshepelev
    Конечно в файле стилей перед общим списком надо обнулять все!

    Я подключаю шрифты через конструкцию:

    @font-face {
    font-family: 'a_avantebsitalic';
    src: url('font/aavantebsitalic-webfont.eot');
    src: url('font/aavantebsitalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('font/aavantebsitalic-webfont.woff') format('woff'),
    url('font/aavantebsitalic-webfont.ttf') format('truetype'),
    url('font/aavantebsitalic-webfont.svg#a_avantebsitalic') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    Шрифты генерирую тут: www.fontsquirrel.com/tools/webfont-generator

    The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
    Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web Open Font Format) font.
    Firefox, Chrome, Safari, and Opera also support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts).
    Chrome, Safari and Opera also support SVG fonts/shapes.
    Internet Explorer also supports EOT (Embedded OpenType) fonts.
    Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

    W3C: www.w3.org/TR/css-fonts-3
    Ответ написан
    3 комментария
    3 комментария

  • Зависимость неродственных классов

    bshepelev
    @bshepelev
    $('ul li a').hover(
    function() {
    $bshepelev = $(this).parent().index();
    $('div.image img').eq($bshepelev + 1).show();
    }, function() {
    $('div.image img').eq($bshepelev + 1).hide();
    });

    Использован алгоритм без классов! по ИНДЕКСУ

    <div>
    <ul>
    <li><a href="#" class="link1" rel="item1">1</a></li>
    <li><a href="#" class="link2" rel="item2">2</a></li>
    </ul>
    </div>

    <div class="image">
    <img src="..." alt="" class="item1">
    <img src="..." alt="" class="item2" />
    </div>

    $('ul li a').hover(
    function() {
    $bshepelev = $(this).attr('rel');
    $('.' + $bshepelev).show();
    }, function() {
    $('.' + $bshepelev).hide();
    });

    Вон использование через атрибут "REL" т.е. в ссылке в атрибут задаем имя класса картинки! Но мне кажется более практично использовать первый код, так как он не потребует ничего дополнительно, а элементы без лишних классов
    Ответ написан
    Комментировать
    Комментировать