Occasionally, I enjoy the challenge of "reverse engineering" websites, especially those with a complex design. By dissecting these sites, I aim to gain insight into the techniques employed by other developers.
Recently, my curiosity led me to analyze the League of Legends website. My initial approach was to investigate how they positioned their site's header/navigation image. Using Firefox, I utilized the "right-click -> inspect" function, which revealed the following snippet:
<html>..........
<body class="not-front not-logged-in page-node node-type-lc-article no-sidebars i18n-en pvpnetbar">
<style> … </style>
<div id="lol-header" class="i18n-en" role="banner">
<div class="section clearfix">
<div id="lol-header-sitename">
<a id="site-name" class="hidden-text" alt="Home" rel="home" title="Home" href="http://na.leagueoflegends.com/"> … </a>
</div>
......</html>
The 'lol-header' div contains a CSS Url property with the value:
url("../img/lol-header-sprite.png")
Typically, when encountering two dots before a forward slash in a URL, it indicates navigating to the parent directory. However, in this case, even though the relative URL should be "http://na.leagueoflegends.com/img/lol-header-sprite.png" based on the parent directory, it doesn't seem to work. This inconsistency persists even when accessing the main page.
This discrepancy has left me feeling puzzled, as I thought I had a solid understanding of web coding. It's a bit disorienting :-\