На главную   В начало   В окончание 

Студия Алексея Шраймана.

Пособие для дизайнеров. Трюки и хаки.

Web-design
Пишите:
alexshraiman@rambler.ru
ivan.petrunya@gmail.com

Кроссбраузерная вёрстка и не только.

—

Как решить проблемы с кроссбраузерностью?


Часто у многих верстальщиков возникают проблемы с кроссбраузерностью. Во всех браузерах всё работает идеально, а в Internet Explorer возникают проблемы (чаще всего так и бывает). Или наоборот. Для этого существуют хаки (трюки) на CSS. Вот некоторые методы достижения кроссбраузерной верстки: если какой-то браузер "глючит", можно написать для него отдельный стиль. Смотрите:
Пример для браузера Internet Explorer
  • <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="style/ie.css" />
    <![endif]--><!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="style/ie7.css" />
    <![endif]-->
    Этот скрипт для всех версий IE:

    <!--[if IE]>
                <link rel="stylesheet" type="text/css" href="all-ie-only.css" />

    <![endif]-->
    А этот скрипт для всех версий IE ниже восьмой:

    <!--[if lt IE 9]>
                <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
    <![endif]-->


    А этот скрипт для всех браузеров кроме IE:

    <!--[if !IE]><!-->
                <link rel="stylesheet" type="text/css" href="not-ie.css" />
     <!--<![endif]-->

Пример для браузера Opera
  • <script type="text/javascript">
    if(window.opera) {
    document.write('<link rel="stylesheet" type="text/css" href="style/opera.css" />');
    }
    </script>
Пример для браузера Safari
  • <script type="text/javascript">
    var detect = navigator.userAgent.toLowerCase();
    if((detect.indexOf('safari')) != -1) {
    document.write('<link href="style/safari.css" rel="stylesheet" type="text/css" />');
    }
    </script>

Ещё одно важное замечание:
Вам не надо создавать копию стилевой таблицы для того браузера, который вы хотите "обмануть": достаточно просто прописать в ней только те стили и классы, которые нужно изменить именно для этого браузера. И всё!
Я вдохновился этим сайтом: http://webering.ru/blog/html_css/crossbrowsers/

 

—

Как правильно прописать путь к файлу?


Глупый вопрос? Для программистов — скорее всего да. Но не для дизайнеров :)
Как правило, уже готовый свёрстанный html-сайт мы разбиваем на отдельные php-блоки, сохраняя в виде отдельных файлов шапку, подвал и меню (header.php, footer.php, menu.php) и по аналогии прочие повторяющиеся элементы. Желательно сохранять их в отдельной папке под названием "inc" (от английского "include", "включать в себя"). Смотрите примеры:

PHP include. Простой способ.

  • <?php
    include "inc/header.php";
    ?>

    Этот способ уместен, если Ваш файл лежит в корневой папке сайта а шапка, как в моём примере, находится в папке "inc".
PHP include. Универсальный способ.

  • <?php $root = $_SERVER["DOCUMENT_ROOT"]."/";
    include $root.'inc/header.php'?>

    Или одной строкой:

    <?php include $_SERVER["DOCUMENT_ROOT"].'/inc/header.php'; ?>

    Этот способ универсален. Ваш файл может находиться в любой другой папке на сайте.
PHP include. Выполняет условие пользователя!
  • <?php if('contacts.php'==$uri) include 'file.php';
    else include 'file1.php';
    ?>

     

    В данном случае в зависимости от Вашего выбора подгружается либо первый "file.php" , либо второй "file1.php" файл. Т.е. в этом примере если Вы находитесь на странице "contacts.php", то у Вас подгрузится файл "file.php". В противном случае подгрузится файл "file1.php". И всё, хотя при желании это условие можно усложнить. Порой это просто очень удобно!

 

—

Как сделать неактивную ссылку на странице?


Суть в том, что у нас одно меню для всего сайта в отдельном файле, например "inc/menu.php" (о нарезке на php-блоки я писал выше).
Необходимо сделать так, чтобы на текущей странице ссылка на неё саму была неактивна. Я заранее прошу прощения за несколько сумбурный пример, просто нет времени доводить его до совершенства...
Предлагаю Вам скачать архив (Zip, 50 Кб) и разобраться в коде.
Ссылка на архив »