How do i set the relative path and folder paths in HTML and CSS from VS 2012?

i’m creating a simple HTML site with css and javascript. so there are folders named css and scripts also images for images. the Project structure is like in this image i have posted on stack overflow

The problem i have is how to set the paths for the css, images and js files from the html

i have styles.css file with the following style

    html {
    padding-top: 25px;    
    background-image: url(images/bg_page.png); 
}

the link to styles.css file from html like this

<head>
    <title>Chapter 2</title>
    <link  href="css/styles.css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Gravitas+One" rel="stylesheet" />
</head>

problem: it doesn’t set the styles in the css to the html. I don’t know how to set the image URL path in css as well. Any one who uses VS 2012, would be able to fix this path problems?

There is this “solution1” folder that it creates, which is kind of annoying. so i wonder is there a better way to organize folders and files especially in VS 2012?

thanks

It’s not finding them because the path is relative to the current location, so if you’re in the Solution Items folder, it’s looking for Solution Items/css/styles.css, which is not where it is.

The easiest (and safest) way is to put all paths in relative to the root, which just means adding the leading slash…

html {
    padding-top: 25px;    
    background-image: url(/images/bg_page.png); 
}
<head>
    <title>Chapter 2</title>
    <link  href="/css/styles.css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Gravitas+One" rel="stylesheet" />
</head>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.