PDA

View Full Version : File hierarchy advice, please



SteveH
Jul 6th, 2009, 07:35 PM
Hello

I have a site on a server which uses style sheets but the site is not seeing them so the Web page is not formatting as it should.

In my <head> tags I have this:


<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all">

<script type="text/javascript" src="../_common/js/mootools.js"></script>



Note the dots here:

href="../_common
src="../_common

On a hard drive these dots do not appear to matter, but I suspect they are preventing me from seeing the site as I should.

Any advice, please?

Thanks.

Steve

Rowsdower!
Jul 6th, 2009, 08:00 PM
The dots preceding the forward slash are used to move up one single level from the current directory. For example, if we are viewing this file:
"http://www.somesite.com/articles/archives/new_file.html"

then the "../" would take us to this directory:
"http://www.somesite.com/articles/"

------------

Now, if the CSS file is located here:
"http://www.somesite.com/style/style.css"

We have two ways to get there using the <link> tag in the head. Method 1:
<link rel="stylesheet" href="../../style/style.css" type="text/css" media="all">

This backs us up exactly 2 directories and then moves forward into the "style" directory. The problem here is that if your relative directory "depth" changes all of your links will fail. That is, if you add another subdirectory between the subject document (new_file.html) and the root your CSS file will exist one level further above where it used to be relative to new_file.html. Your two sets of dots and slashes won't bring you far enough back out of the tree to get where you need to be.

Method 2:
<link rel="stylesheet" href="/style/style.css" type="text/css" media="all">

This takes us automatically all of the way to the root directory (of the "www" folder, which is the highest folder a user has access to) and then moves forward into the "style" directory.

Since I can't see all of your code (or any of your file tree) I can only guess that this could be part of the problem. Hopefully the above was not a total review (and waste of your time) but in addition to the above I will also say that I am unsure of whether directories can be prefixed with an underscore (as in "_common"). That might be the problem.

If you can give us a link to the page we can take a better look to see why this is failing.

SteveH
Jul 6th, 2009, 08:56 PM
Hello Rowsdower!

Thanks for your post.

I thought I may have been trying to accessa level I don't have permissions for, but when I went back to the site to post you the URL I saw that it had corrected itself and now looks OK.

However, the links on the page (the images), which are just simple 'take me there when I click' type of links, go nowhere.

This is the code behind them:


<ul>
<li class="landscapes"><a href="http://www.graphic9.com">Landscapes</a></li>

<li class="nature"><a href="http://www.bbc.co.uk">Nature</a></li>
</ul>

The link is here:

http://stevehigham59.7host.com/proofreader/imagemenu/index.htm

All I get is a kind of JavaScript type of warning with the URL printed on it!

Thanks for your explanation earlier

Cheers

Steve

abduraooft
Jul 7th, 2009, 11:15 AM
On a hard drive these dots do not appear to matter, but I suspect they are preventing me from seeing the site as I should.
I use absolute positions starting with a forward slash (/), which is very easy to handle. Take a look at
http://www.codingforums.com/showpost.php?p=784167&postcount=9


All I get is a kind of JavaScript type of warning with the URL printed on it!
it must have something to do with your javascript code, since the link works when the javascript is disabled.

Rowsdower!
Jul 7th, 2009, 02:31 PM
Indeed, this is an issue with your javascript. It most likely comes from somewhere in "imageMenu.js" and it looks like this script is meant to serve as a slideshow rather than a menu by default. You should be able to fix that though.

I'm not savvy enough with javascript to tell at a glance where this setting is made, but I have a few ideas/guesses. This is where I would start testing if I had to work this out (see highlighted sections):

/**************************************************************

Script : Image Menu
Version : 2.2
Authors : Samuel Birch
Desc :
Licence : Open Source MIT Licence

**************************************************************/

var ImageMenu = new Class({

getOptions: function(){
return {
onOpen: false,
onClose: Class.empty,
openWidth: 200,
transition: Fx.Transitions.quadOut,
duration: 400,
open: null,
border: 0
};
},

initialize: function(elements, options){
this.setOptions(this.getOptions(), options);

this.elements = $$(elements);

this.widths = {};
this.widths.closed = this.elements[0].getStyle('width').toInt();
this.widths.openSelected = this.options.openWidth;
this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))


this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});

this.elements.each(function(el,i){
el.addEvent('mouseenter', function(e){
new Event(e).stop();
this.reset(i);

}.bind(this));

el.addEvent('mouseleave', function(e){
new Event(e).stop();
this.reset(this.options.open);

}.bind(this));

var obj = this;

el.addEvent('click', function(e){

if(obj.options.onOpen){
new Event(e).stop();
if(obj.options.open == i){
obj.options.open = null;
obj.options.onClose(this.href, i);
}else{
obj.options.open = i;
obj.options.onOpen(this.href, i);
}


}

})

}.bind(this));

if(this.options.open){
if($type(this.options.open) == 'number'){
this.reset(this.options.open);
}else{
this.elements.each(function(el,i){
if(el.id == this.options.open){
this.reset(i);
}
},this);
}
}

},

reset: function(num){
if($type(num) == 'number'){
var width = this.widths.openOthers;
if(num+1 == this.elements.length){
width += this.options.border;
}
}else{
var width = this.widths.closed;
}

var obj = {};
this.elements.each(function(el,i){
var w = width;
if(i == this.elements.length-1){
w = width+5
}
obj[i] = {'width': w};
}.bind(this));

if($type(num) == 'number'){
obj[num] = {'width': this.widths.openSelected};
}

this.fx.start(obj);
}

});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events);


/*************************************************************/

If you're brave enough to try it, save a backup of your script so you can get back to where you were, then try editing the areas above separately and see if you get better results. If you aren't that adventurous you might try asking this question in the javascript forum.

Best of luck!

SteveH
Jul 7th, 2009, 03:12 PM
Hello Rowsdower!

Many thanks for your help.

I did not see your post until after I had posted a question in the JavaScript forum. It would be less to trouble if I could amend the script you posted - I had a quick look at it and cannot seem to find what the opposite is of 'null':o

I'd better hang back to see if the JavaScript people can advise, but I am grateful that you have identified what might be the issue.

I haven't actually posted the script you posted - I have posted the JS script on the home page, but I'll see what they say.

Many thanks again.

Steve