Jump to content
xisto Community
callumms

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

Recommended Posts

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/ :o

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 =[

Share this post


Link to post
Share on other sites

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 :D

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

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 by callumms (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.