<rmcreative>

RSS

Как прописать путь

20 октября 2010

Данный вопрос, в вариациях «как прописать путь к картинке в CSS», «как прописать путь к CSS в HTML» и других, часто возникает у начинающих веб-разработчиков. Даже довольно опытные разработчики частенько путаются с абсолютными путями в CSS.

Абсолютные пути

С абсолютными всё просто. Работают они одинаково как в CSS, так и в HTML. Если адрес сайта у нас, например, http://rmcreative.ru/, то /img/miimage.jpg будет указывать на http://rmcreative.ru/img/miimage.jpg какая бы страница не была открыта у пользователя.

Относительные пути в HTML

Относительные пути, если на странице нет тега base, отсчитываются относительно текущего пути страницы. Например, если мы находимся на странице http://rmcreative.ru/blog/post/tsitaty-prepodavateley, то ссылка вида <a href="test.zip">test</a> будет указывать на http://rmcreative.ru/blog/post/test.zip.

Если используется тег base, то ссылки отсчитываются от его href:

<head>
<base href="http://rmcreative.ru/" />
</head>
<body>
  <a href="test.zip">test</a>
</body>

Здесь ссылка test будет указывать на http://rmcreative.ru/test.zip.

Относительные пути в CSS

В CSS относительный путь отсчитывается не от пути страницы, а от пути к самому CSS.

Например, для файла http://rmcreative.ru/css/test.css

body {
  background: url("test.png");
}

браузер будет пытаться подгрузить картинку по адресу http://rmcreative.ru/css/test.png.

Комментарии RSS

  1. №3251
    Dmitry Scriptin
    Dmitry Scriptin 20.10.2010, 12:50:37

    Странно, что эти "начинающие разработчики" никогда не читают документацию и не пробуют разобраться самостоятельно перед тем, как спросить. Надеюсь, что большинство из них хотя бы сначала спрашивают у поисковых систем.

    Иногда уже просто достают с одинаковыми вопросами. Я на одном форуме веду раздел про программирование, так вот большинство новоприбывших (думаю, не меньше 60-80%) не пробуют написать свои программки на Pascal до того, как лезть на форуме. Видимо, эти люди никогда сами думать не пробовали. И ладно бы спрашивали про какие-нибудь частные случаи, так ведь спрашивают даже реализации популярных алгоримтов вроде нахождения наибольшего общего делителя.

    Но такие люди тоже нужны, иначе на чьем фоне хорошо смотрелись бы профессионалы? ;)

  2. №3254
    Sam
    Sam 20.10.2010, 13:10:52

    Я думаю, что помогать надо. Со ссылками на документацию. Все мы когда-то были достаточно беспомощными, достаточно хорошенько вспомнить.

  3. №3255
    Ekstazi
    Ekstazi 20.10.2010, 13:22:19

    Еще бы про ./ написать, раз уж про такие азы написано.

  4. №3256
    Костег
    Костег 20.10.2010, 14:37:03

    Что лучше использовать: тег base или же абсолютные ссылки (с хостом сайта)?. IE к примеру добавляет содержимое тега base к ссылке с анкором (#foo старен http://site.com#foo).

  5. №3257
    Sam
    Sam 20.10.2010, 16:01:13

    Ekstazi, так это то же, что и без ./. Или это было про всякие ..?

    Костег, от ситуации зависит.

  6. №3260
    Ekstazi
    Ekstazi 21.10.2010, 0:01:43

    Про всякие ..

  7. №3343
    СайтоДел
    СайтоДел 03.11.2010, 9:23:14

    Просто и понятно, может продолжая тему сделаете пару постов "как сделать пути на пхп посредством глобального массива"

  8. №4102
    St
    St 12.03.2011, 18:31:17

    По опыту знаю, что лучше прописывать base. Иначе могут начаться танцы с браузерами.

  9. №4136
    Victor
    Victor 19.03.2011, 23:17:01

    Ну мои эксперименты показали что тег влияет только на ссылки вида ./index.html и index.html. А вот /index.html ведет к корню сайта который задается другими методами...

  10. №5152
    новичек
    новичек 06.08.2011, 23:15:37

    Не хочу говорить плохо про умников плохо отзывающихся о новичках. Но не смотря на тонны причитанного остается один вопрос (и вероятно именно он и беспокоит всех новичков). Возможно ли прописать путь для той же картинки, если страница и картинка находятся в разных папках. Т.е. нужен абсолютный путь, а использовать его нет смысла, так как все это добро в localhost. Но зато есть острая необходимость просмотра на другом компе, а localhost уже другой. Тащишь ты всю эту неподъемную ношу на флешке в отвисающем от груза кармане, а в итоге ни одной картинки, ни страницы кроме стартовой ни видать. Лупает новичек глазенками, мол как же так я неделями не спал, а где же? А только на родном компе, или вываливай все страницы в одну папку даже если их аграх/ количество - так выходит? Или все таки есть способ?

  11. №5153
    Sam
    Sam 07.08.2011, 4:10:10

    новичек, в абсолютном пути не обязательно указывать имя хоста. Достаточно начать его с /.

  12. №8042
    Сергей
    Сергей 04.06.2013, 15:34:56

    Создаю регистрацию.В файле index.php ссылка на регистрацию <a href="registration.php">Регистрация</a> Но на сайте при нажатии на Регистрация сайт не видит файла и не отображает формы.Я пробовал <a href="./registration.php">Регистрация</a> <a href="/registration.php">Регистрация</a> Путь к файлу проходит через следущие файлы на сервере domains/stroy-master.in.ua/public_html/wp-content/themes/stroy-master/

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.