Forum Topic: Proper Way To Link Folders Html

(239 views • 16 replies)

This topic is 1 page long.

<< < > >>
Resigned

DeviantSpaceMan

Reply To Post Reply & Quote

Posted at: 10/19/09 03:39 AM

DeviantSpaceMan DARK LEVEL 05

Sign-Up: 10/07/09

Posts: 39

I'm having a problem linking stuff together.

Say for instance I'm using this code

<html>

<head>
<style type="text/css">
body
{
background-image:url('..\Pictures\SpaceMan.gif');
}
</style>
</head>

<body>
<p> blah </p>
</body>

</html>

When I use that code It won't display my image for the background. It does the same thing if I just try using the "img src" tag and link it to the same picture.

I'm assuming it's because I'm not linking the picture correctly. The location of the picture is found in a folder that is one up from the source code hence the ".." and then in a folder called Pictures and the image is called SpaceMan.

This works in IE6 but not in Mozilla Firefox. Can someone please tell me how to do this correctly.

BBS Signature

None

CronoMan

Reply To Post Reply & Quote

Posted at: 10/19/09 06:57 AM

CronoMan EVIL LEVEL 06

Sign-Up: 07/19/04

Posts: 2,987

Use forward slashes instead of backslash

background-image: url('..\Pictures\SpaceMan.gif')
instead, write
background-image: url('../Pictures/SpaceMan.gif')
Spaceman, I always wanted you to go, into space man

"no sound in ass"


None

Super-Yombario

Reply To Post Reply & Quote

Posted at: 10/19/09 02:49 PM

Super-Yombario FAB LEVEL 06

Sign-Up: 03/16/07

Posts: 1,178

Well see, with CSS, you have to link to the image from the point of view of the CSS doc.

Say the image is images/image.png
The file is index.html
The CSS is css/style.css

In the index.html file you would link to ./images/image.png
In the CSS you would link to ../images/image.png

RIP Ed McMahon - RIP Farrah Fawcett - RIP Michael Jackson
But wait, there's more...
RIP Billy Mays


None

urbn

Reply To Post Reply & Quote

Posted at: 10/19/09 04:02 PM

urbn FAB LEVEL 18

Sign-Up: 06/10/07

Posts: 2,301

At 10/19/09 02:49 PM, Super-Yombario wrote: Well see, with CSS, you have to link to the image from the point of view of the CSS doc.

The slashes are more important, as it denotes local or remote files on windows.

A little tidbit for Linux is that you don't need to get confused between either as it only used / ;)
BBS Signature

None

Relish

Reply To Post Reply & Quote

Posted at: 10/19/09 04:29 PM

Relish NEUTRAL LEVEL 06

Sign-Up: 01/22/08

Posts: 780

The single quotes around the URL are unecessary.


None

urbn

Reply To Post Reply & Quote

Posted at: 10/19/09 04:43 PM

urbn FAB LEVEL 18

Sign-Up: 06/10/07

Posts: 2,301

At 10/19/09 04:29 PM, Relish wrote: The single quotes around the URL are unecessary.

Not sure if they are prohibited or not in the W3 spec though.

BBS Signature

None

smulse

Reply To Post Reply & Quote

Posted at: 10/19/09 07:01 PM

smulse EVIL LEVEL 30

Sign-Up: 03/24/05

Posts: 5,928

At 10/19/09 04:43 PM, urbn wrote:
At 10/19/09 04:29 PM, Relish wrote: The single quotes around the URL are unecessary.
Not sure if they are prohibited or not in the W3 spec though.

You may use any of the following and they're all valid

url(bla.gif); //ie no quotes
url('bla.gif'); //ie single quotes
url("bla.gif"); //ie double quotes
BBS Signature

None

urbn

Reply To Post Reply & Quote

Posted at: 10/19/09 08:46 PM

urbn FAB LEVEL 18

Sign-Up: 06/10/07

Posts: 2,301

At 10/19/09 07:01 PM, smulse wrote: You may use any of the following and they're all valid

Ah there we go! Cheers, always useful (even though I just never sue them).

BBS Signature

None

CronoMan

Reply To Post Reply & Quote

Posted at: 10/20/09 03:11 AM

CronoMan EVIL LEVEL 06

Sign-Up: 07/19/04

Posts: 2,987

At 10/19/09 04:29 PM, Relish wrote: The single quotes around the URL are unecessary.

They are necessary if there are spaces in the filename

"no sound in ass"


None

DeviantSpaceMan

Reply To Post Reply & Quote

Posted at: 10/20/09 05:36 AM

DeviantSpaceMan DARK LEVEL 05

Sign-Up: 10/07/09

Posts: 39

At 10/19/09 06:57 AM, CronoMan wrote: Use forward slashes instead of backslash

background-image: url('..\Pictures\SpaceMan.gif')
instead, write
background-image: url('../Pictures/SpaceMan.gif')

Thanks Cronoman this fixed the problem straight away. But, should I always use forward slashes, or only use them when I have to go back a folder?

BBS Signature

None

CronoMan

Reply To Post Reply & Quote

Posted at: 10/20/09 06:22 AM

CronoMan EVIL LEVEL 06

Sign-Up: 07/19/04

Posts: 2,987

At 10/20/09 05:36 AM, DeviantSpaceMan wrote: Thanks Cronoman this fixed the problem straight away. But, should I always use forward slashes, or only use them when I have to go back a folder?

On the internet, always use forward slashes. Backslashes are only used on Windows and OS/2, which explains why they only work in IE :P

"no sound in ass"


None

DeviantSpaceMan

Reply To Post Reply & Quote

Posted at: 10/20/09 06:48 AM

DeviantSpaceMan DARK LEVEL 05

Sign-Up: 10/07/09

Posts: 39

At 10/20/09 06:22 AM, CronoMan wrote: On the internet, always use forward slashes. Backslashes are only used on Windows and OS/2, which explains why they only work in IE :P

Strange that W3schools doesn't mention anything about this on their HTML tutorial. =P Wonder what other dirty little secrets they're hiding from me.

BBS Signature

None

Super-Yombario

Reply To Post Reply & Quote

Posted at: 10/20/09 11:27 AM

Super-Yombario FAB LEVEL 06

Sign-Up: 03/16/07

Posts: 1,178

They're keeping a lot of stuff out to be as vague as possible while still getting the point across. They don't want to fill your head with useless information, so they fill it with web design.

RIP Ed McMahon - RIP Farrah Fawcett - RIP Michael Jackson
But wait, there's more...
RIP Billy Mays


None

DeviantSpaceMan

Reply To Post Reply & Quote

Posted at: 10/21/09 08:26 AM

DeviantSpaceMan DARK LEVEL 05

Sign-Up: 10/07/09

Posts: 39

Well guys I've got a pretty solid idea on how to use HTML and CSS. I'm going to learn javascript now, but for future reference when it comes to it which is the preferred language between ASP and PHP?

BBS Signature

None

CronoMan

Reply To Post Reply & Quote

Posted at: 10/21/09 09:05 AM

CronoMan EVIL LEVEL 06

Sign-Up: 07/19/04

Posts: 2,987

At 10/21/09 08:26 AM, DeviantSpaceMan wrote: Well guys I've got a pretty solid idea on how to use HTML and CSS. I'm going to learn javascript now, but for future reference when it comes to it which is the preferred language between ASP and PHP?

Depends on who you ask :P
I've completely stopped using PHP after I started with ASP.NET, but the majority of the population on this forum use PHP

"no sound in ass"


None

urbn

Reply To Post Reply & Quote

Posted at: 10/21/09 01:33 PM

urbn FAB LEVEL 18

Sign-Up: 06/10/07

Posts: 2,301

At 10/21/09 09:05 AM, CronoMan wrote: I've completely stopped using PHP after I started with ASP.NET, but the majority of the population on this forum use PHP

Freeness, open source and multi platform.

The fact that I use Arch Linux on my server restricts me from using ASP anyway, though I do not "have a go" at ASP or it's developers.

BBS Signature

None

Super-Yombario

Reply To Post Reply & Quote

Posted at: 10/24/09 06:04 PM

Super-Yombario FAB LEVEL 06

Sign-Up: 03/16/07

Posts: 1,178

PHP all the way.

First of all, PHP is open-source and multi-platform. PHP can be used on Windows, Mac, Linux, anything. Plus anyone can look at every bit of code it takes to run PHP. ASP is only usable on an IIS, which is only usable on Windows. 9/10 of the hosts you find on the internet use a version of Linux on their servers, which doesn't allow ASP.

Second of all, ASP was made basically as a copy of languages like PHP. Microsoft has done this a ton of times. C# to C++ and Java, SQLite to MySQL, Windows to Mac OS.

RIP Ed McMahon - RIP Farrah Fawcett - RIP Michael Jackson
But wait, there's more...
RIP Billy Mays


All times are Eastern Standard Time (GMT -5) | Current Time: 04:56 PM

<< Back

This topic is 1 page long.

<< < > >>
You need a Grounds Gold Account to post on the NG BBS! If you don't have one, click here to sign up now! It's fast, free, and easy — and opens up tons of great NG features!