Css Problem On Website Ive uploaded the html/css files but the css isnt working/

[callumms 0]

Help?I've uploaded all of the html files and css files into the public_html folder , but the css isn't taking effect. I've checked both the css and te html files , nothing wrong with them. Halp me?http://forums.xisto.com/no_longer_exists/

[rvalkass 5]

The directory 'style' doesn't appear to exist. Make sure you created the style directory inside the public_html directory, otherwise it is not publicly accessible.After a bit more probing it appears that you didn't actually create the style directory you refer to in your HTML. Make that directory and move the two CSS files into it and it should then take effect.

[callumms 0]

The directory 'style' doesn't appear to exist. Make sure you created the style directory inside the public_html directory, otherwise it is not publicly accessible.
After a bit more probing it appears that you didn't actually create the style directory you refer to in your HTML. Make that directory and move the two CSS files into it and it should then take effect.

Sorry to sound stupid but how would I do that? I'm a bit new to this =[

[A200 0]

You can make that folder via FTP or cPanel File Manager. And to move the files, you just click it and select the folder you want to move it to :oMake sure the folder name is ABSOLUTELY THE SAME as where it should be.I hope that helps

[jlhaslip 4]

http://forums.xisto.com/no_longer_exists/ works for me...

[imbibe 0]

Do look the folder structure on your server through CPanel or FTP as pointed out by others. The site isn't displaying correctly on FF.

[callumms 0]

http://forums.xisto.com/no_longer_exists/ works for me...

Do the images work? I can't get them going on my Pc =/

[rvalkass 5]

This is again down to your directory structure. In your CSS, you have lines like this:

background: #FFFFFF url(main.png) repeat-y;

That path, main.png, corresponds to the current directory - /public_html/style/. Of course, there is no file called main.png in that directory. Through a lucky guess I found that it was in a folder called images, which is inside the public_html directory.

 

To represent this in your CSS, you need to use the sequence of characters that means "go to the previous directory". That sequence of characters is

 

../

 

So, to get from the styles directory to the images directory, we need to go up one level to the public_html directory, then into the images directory, then finally we can find main.png

 

This means your code needs to actually say:

background: #FFFFFF url(../images/main.png) repeat-y;

That needs to be changed for every path to an image in the CSS file colours.css. For your benefit, I've done that below. Just put the code below in your colours.css file instead of the code that is there at the moment:

body{ background: #FFFFFF url(../images/back.png) repeat;  color: #57696F;}blockquote{ background: #FFFFFF;  color: #57696F;  border-color: #1798E9;}#main{ background: #FFFFFF url(../images/main.png) repeat-y;  color: #57696F;}#links, #footer{ background: #1798E9 url(../images/linkfoot.png);  color: #FFFFFF;  border-color: #57696F;}#links a, #footer a, #links a:hover, #footer a:hover{ background: transparent;  color: #FFFFFF;}#logo{ background: #FFFFFF url(../images/logo.jpg) no-repeat;  color: #57696F;  border-top-color: #57696F;  border-bottom-color: #1798E9;}#logo h2{ background: transparent;  color: #CCC;}h1{ background: transparent;  color: #1798E9;  border-color: #E1E1E1;}#menu{ background: transparent;  color: #57696F;}#menu li a{ background: #76C9F8;  color: #57696F;  border-color: #109CEF;}#menu li a:hover, #menu li a#selected, #menu li a#selected:hover{ background: #109CEF;  color: #FFFFFF;} #content, #column2, #column2 a{ background: #FFFFFF;  color: #57696F;  border-color: #57696F;}#column2 a:hover{ background: #FFFFFF;  color: #1798E9;  border-color: #1798E9;}.sidebaritem{ background: #F9F9F9;  color: #57696F;  border-color: #E1E1E1;}.sbilinks li a, .sidebaritem a{ background: transparent url(../images/link_arrow.png) no-repeat left center;  color: #57696F;} .sbilinks li a:hover, .sidebaritem a:hover{ background: transparent url(../images/link_arrow_sel.png) no-repeat left center;  color: #1798E9;} input, textarea{ background: #FFFFFF;  color: #57696F;  border-color: #E1E1E1;}

[callumms 0]

This is again down to your directory structure. In your CSS, you have lines like this:

background: #FFFFFF url(main.png) repeat-y;

That path, main.png, corresponds to the current directory - /public_html/style/. Of course, there is no file called main.png in that directory. Through a lucky guess I found that it was in a folder called images, which is inside the public_html directory.

 

To represent this in your CSS, you need to use the sequence of characters that means "go to the previous directory". That sequence of characters is

 

../

 

So, to get from the styles directory to the images directory, we need to go up one level to the public_html directory, then into the images directory, then finally we can find main.png

 

This means your code needs to actually say:

background: #FFFFFF url(../images/main.png) repeat-y;

That needs to be changed for every path to an image in the CSS file colours.css. For your benefit, I've done that below. Just put the code below in your colours.css file instead of the code that is there at the moment:

body{ background: #FFFFFF url(../images/back.png) repeat;  color: #57696F;}blockquote{ background: #FFFFFF;  color: #57696F;  border-color: #1798E9;}#main{ background: #FFFFFF url(../images/main.png) repeat-y;  color: #57696F;}#links, #footer{ background: #1798E9 url(../images/linkfoot.png);  color: #FFFFFF;  border-color: #57696F;}#links a, #footer a, #links a:hover, #footer a:hover{ background: transparent;  color: #FFFFFF;}#logo{ background: #FFFFFF url(../images/logo.jpg) no-repeat;  color: #57696F;  border-top-color: #57696F;  border-bottom-color: #1798E9;}#logo h2{ background: transparent;  color: #CCC;}h1{ background: transparent;  color: #1798E9;  border-color: #E1E1E1;}#menu{ background: transparent;  color: #57696F;}#menu li a{ background: #76C9F8;  color: #57696F;  border-color: #109CEF;}#menu li a:hover, #menu li a#selected, #menu li a#selected:hover{ background: #109CEF;  color: #FFFFFF;} #content, #column2, #column2 a{ background: #FFFFFF;  color: #57696F;  border-color: #57696F;}#column2 a:hover{ background: #FFFFFF;  color: #1798E9;  border-color: #1798E9;}.sidebaritem{ background: #F9F9F9;  color: #57696F;  border-color: #E1E1E1;}.sbilinks li a, .sidebaritem a{ background: transparent url(../images/link_arrow.png) no-repeat left center;  color: #57696F;} .sbilinks li a:hover, .sidebaritem a:hover{ background: transparent url(../images/link_arrow_sel.png) no-repeat left center;  color: #1798E9;} input, textarea{ background: #FFFFFF;  color: #57696F;  border-color: #E1E1E1;}

That still doesn't work. I replaced the old Css file but it still doesen't work =/

sorry if I'm sounding stupid

Edited February 13, 2008 by callumms (see edit history)