Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Css Problem On Website, I've uploaded the html/css files but the css isn't working/
callumms
post Feb 12 2008, 10:46 AM
Post #1


Newbie [Level 1]
*

Group: Members
Posts: 19
Joined: 30-January 08
Member No.: 57,079
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
sad.gif

(list)

Go to the top of the page
 
+Quote Post
rvalkass
post Feb 12 2008, 11:09 AM
Post #2


apt-get moo
Group Icon

Group: [MODERATOR]
Posts: 2,056
Joined: 28-May 05
From: Hertfordshire, England
Member No.: 7,593
Spam Patrol
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.

(list)

Go to the top of the page
 
+Quote Post
callumms
post Feb 12 2008, 11:16 AM
Post #3


Newbie [Level 1]
*

Group: Members
Posts: 19
Joined: 30-January 08
Member No.: 57,079


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

(list)

Go to the top of the page
 
+Quote Post
A200
post Feb 12 2008, 11:37 AM
Post #4


Premium Member
********

Group: [HOSTED]
Posts: 191
Joined: 24-May 07
From: Brisbane, Australia
Member No.: 43,581
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 smile.gif

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

I hope that helps smile.gif

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 12 2008, 02:06 PM
Post #5


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,882
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
http://www.genesis.trap17.com/index.html works for me...

(list)

Go to the top of the page
 
+Quote Post
imbibe
post Feb 12 2008, 05:19 PM
Post #6


Member [Level 1]
****

Group: Members
Posts: 67
Joined: 25-June 06
From: Den
Member No.: 25,638
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.

(list)

Go to the top of the page
 
+Quote Post
callumms
post Feb 12 2008, 05:29 PM
Post #7


Newbie [Level 1]
*

Group: Members
Posts: 19
Joined: 30-January 08
Member No.: 57,079
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 =/

(list)

Go to the top of the page
 
+Quote Post
rvalkass
post Feb 12 2008, 09:19 PM
Post #8


apt-get moo
Group Icon

Group: [MODERATOR]
Posts: 2,056
Joined: 28-May 05
From: Hertfordshire, England
Member No.: 7,593
Spam Patrol
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;
}

(list)

Go to the top of the page
 
+Quote Post
callumms
post Feb 13 2008, 01:22 PM
Post #9


Newbie [Level 1]
*

Group: Members
Posts: 19
Joined: 30-January 08
Member No.: 57,079
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

This post has been edited by callumms: Feb 13 2008, 01:33 PM