Css Problem On Website

callumms

Feb 12 2008, 10:46 AM

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?
www.genesis.trap17.com/home.html

Reply

rvalkass

Feb 12 2008, 11:09 AM

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.

Reply

callumms

Feb 12 2008, 11:16 AM

QUOTE(rvalkass @ Feb 12 2008, 11:09 AM)

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

Reply

A200

Feb 12 2008, 11:37 AM

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

Make sure the folder name is ABSOLUTELY THE SAME as where it should be.

I hope that helps

Reply

jlhaslip

Feb 12 2008, 02:06 PM

http://www.genesis.trap17.com/index.html works for me...

Reply

imbibe

Feb 12 2008, 05:19 PM

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.

Reply

callumms

Feb 12 2008, 05:29 PM

QUOTE(jlhaslip @ Feb 12 2008, 02:06 PM)

http://www.genesis.trap17.com/index.html works for me...

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

Reply

rvalkass

Feb 12 2008, 09:19 PM

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

CODE

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:

CODE

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:

CODE

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

Reply

callumms

Feb 13 2008, 01:22 PM

QUOTE(rvalkass @ Feb 12 2008, 09:19 PM)

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

CODE

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:

CODE

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:

CODE

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

Reply

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute your information that might help someone here. Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

Css Problem On Website - I've uploaded the html/css files but the css isn't working/

Css Problem On Website - I've uploaded the html/css files but the css isn't working/