Menu
I like to sometimes try to "reverse engineer" websites, particularly ones that look complex. I feel in doing so it will help me learn techniques that other developers use.
I recently wanted to look at the league of legends website. The first thing I tried was to see how they placed their site's head/nav image. I use firefox so I used the "right-click -> inspect" function. In doing so I found this
<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 div that has a CSS Url property is 'lol-header' and it's value is
url("../img/lol-header-sprite.png")
I know that anytime you see two dots before a forward slash that it means you go to the parent directory. Now, I can see if the url was "http://na.leagueoflegends.com/learn/new_user_guide' then the relative url should be http://na.leagueoflegends.com/img/lol-header-sprite.png" ...but this doesn't work. Also, if you are on the main page it has the same relative URL.
How can that be? I thought I knew a good amount about web coding, but I'm kind of lost :-\
277
The page you're referring to loads the CSS files like this:
@import url('/sites/default/files/lol_global_elements/css/lol_global_elements.css');
The CSS rule itself is:
background: transparent url(../img/lol-header-sprite.png) 50% 0px no-repeat;
The ../ means go up one level, relative to the path the file was loaded from. So taking the first URL, it would begin with:
http://na.leagueoflegends.com/sites/default/files/lol_global_elements/
Then it adds img/lol-header-sprite.png to give you:
http://na.leagueoflegends.com/sites/default/files/lol_global_elements/img/lol-header-sprite.png
The img location is relative to the location of the CSS file that includes the styling for this div.
As you can see the css file is:
http://eune.leagueoflegends.com/sites/default/files/lol_global_elements/css/lol_global_elements.css
which means , that the image is here:
http://eune.leagueoflegends.com/sites/default/files/lol_global_elements/img/lol-header-sprite.png
../img of /css folder is lol_global_elements/img
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With