Some expert advice for amateur site builder, please

[Mintaka]

Thanks for being there, I have made a website in Dreamweaver, for my work.
When I 'preview' it in Firefox or IE, it displays fine, but after uploading it to my server using Mozilla and then Dreamweaver itself, it displays without any structure or CSS...all the text bunches over to the left and everything is lost. It looks a mess and not at all what I designed.

I have uploaded my Site Root folder to:

http://www.sendspace.com/file/0unhxp

in the hope that someone who knows about these things can help me to fix the problem. I am not a coder and have an idea that this is where the problem lies. It's urgent because I need this site to make my living.


Can anyone help, please?

I am even willing to trust some good soul with my FTP details if they can help me to solve this by comparing the files in the Root Folder with those on the server.

Many thanks...Joe.

[Fang]

Some of the paths are absolute to the local server. They should be relative to the server root

Wrong
<link rel="stylesheet" type="text/css" href="file:///C|/Users/VAIO/Desktop/Joesite Russian/public_html/style.css" media="screen"/>
Use
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

[Mintaka]

href="file:///C|/Users/VAIO/Desktop/Joesite Russian/public_html/style.css"


Thank you Fang,

On my server the files are all in a folder called public_html,
so should the link above read:

href="file: public_html/ style.css"?

[Mintaka]

oops,

sorry, just saw that you gave me the right way, will go and try, thanks!

[Fang]

Ask in the Dreamweaver forum how to force Dreamweaver to insert the correct path.

[Mintaka]

Will do, thanks again.
I seem to have got it more or less up and running, but would ask your help with one last thing.
I will have to study CSS for next time, but my code is such a mess now that I am afraid to mess with it, in case i make it worse.

If you look at the Navigation Menu on the right hand side of the page.

http://www.joekilroy.co.uk

You see the blue links. I have spent two hours trying to make them turn black when you roll-over them, using the 'a:hover' rule, but even though the CSS rule is there, nothing happens.

Is there anything obvious happening there that I have missed?


Thanks for the Dreamweaver link too.

[Fang]

Validate css and html

[Dasher]

You need to change the css to;

a:link {color: #333;}
a:hover {
	color:#000;
	font-weight:bold;
	font-size: 14px;
           }
a:visited {color: #333;}

You also have a lot of redundancy in your css lots of #red {blah blah} entries for example.

[Mintaka]

You need to change the css to;

a:link {color: #333;}
a:hover {
	color:#000;
	font-weight:bold;
	font-size: 14px;
           }
a:visited {color: #333;}

You also have a lot of redundancy in your css lots of #red {blah blah} entries for example.

Thank you. But where in the CSS should I put this?


I know that there are many redundancies, it's because Im not sure what Im doing and applied each HTML rule as a separate instance.

[Fang]

Included are the html and css files.
There is still a huge amount or redundancy in the css and html. You need to understand the basics: http://www.w3schools.com/

[Dasher]

Open style.css search for a:link;

a {color: #333
 ;}
a:link {color: #333;}

edit it to

a:link {color: #333;}
a:hover {
	color:#000;
	font-weight:bold;
	font-size: 14px;
           }
a:visited {color: #333;}

[Mintaka]

Thank you both for your help! Very helpful and problem solved....

Now I will study my CSS book.

[noahqw]

Make sure your CSS bath is correct. This is most likely the problem. May I see the CSS path you're currently using and the paths to the files (CSS file and HTML file using the CSS)?

[Mintaka]

Make sure your CSS bath is correct. This is most likely the problem. May I see the CSS path you're currently using and the paths to the files (CSS file and HTML file using the CSS)?

/*
Name:Joe Kilroy
Date: 2007-02-20
Description: Soft and natural single/two-column template.
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
*/

/* default elements */
* {margin: 0; padding: 0;}

body {
background:#80663B ;
color: #351A05;
font: normal 60.0% sans-serif;
padding: 2% 0;
}
#picture { float:left;
width: 200px;
padding: 4px 25px 0 6px;
}


a:link {color: #333;}
a:hover {
color:#666;
font-weight:bold;
font-size: 18px;
}
a:visited {color: #333;}


big {font-size: 1.1em;}

h1,h2,h3 {color: #333 ; padding: 8px 0 2px;}
h1 {
font: normal 14px serif,sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #333;
font-weight: normal;
}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline; color:#000;}

h2 {font: normal 1.6em serif,sans-serif;}
h3 {font: bold 1.2em serif,sans-serif;}






blockquote {
background: url('img/quote.gif') no-repeat;
display: block;
font: normal 1.1em Georgia,serif;
padding-left: 26px
}

form,table {margin-bottom: 1.2em;}
img {border: none;}
label {
display: block;
font-size: 16px;
font-weight: bold;
}
li {line-height: 1.5em;}
p {
padding: 2px 0 10px;
font-weight: bold;
color: #333;
font-family: Verdana, Geneva, sans-serif;
color: #900;
font-size: 14px;
font-style: normal;
font-variant: normal;
}
small,.small {font: normal 0.9em sans-serif;}
ul {
padding: 0 2em 1.2em;
font-size: 14px;color: #333;

}

/* structure */
#wrapper {
background: #351A05 url(img/wrapper.gif) no-repeat left bottom;
margin: 0 auto;
width: 762px;
}
#container {
background: #000;
font-size: 2.3em;
line-height: 1.3em;
margin: 0 auto;
width: 750px;
border: 10px solid #000;
}

/* header */
.title {
background: #FBFCE7 url(img/header-h1.jpg) repeat-x;
border-top: 1px solid #996;
}
.title h1 {
color: #0ABAFA ;
font: normal 2.2em Georgia,"Trebuchet MS",sans-serif;
padding: 10px 0 10px 18px;
}

.header {
border-top: 2px solid #663;
background: #9B8F7E ;
height: 220px;
}

/* navigation */
.navigation {
background: #DED9D0 url(img/nav.gif) repeat-x; height: 1px;
border-top: 1px solid #BEA586 ;
}
.navigation a {
background: #FFF url(img/nav.gif) repeat-x;
border-right: 1px dashed #BEA586 ;
color: #BEA586 ;
float: left;
font: bold 1.1em Tahoma,sans-serif;
padding: 0 14px;
line-height: 41px;
text-align: center;
text-decoration: none;
}
.navigation a:hover,.navigation a#active {background-position: left bottom; color: #331;}

/* main */
.main#two-columns {background: #FFF url(img/two-columns.jpg) repeat-y;}

/* bottom */
.bottom {
border-top:1px solid #FBFCE7;
color: #09F;
padding: 14px 20px;
background-color: #CCC;
background-repeat: repeat;
background-position: left bottom;
}
.bottom .left,.bottom .right {width: 43%;}

/* footer */
.footer {
background: #674941 ;
color: #EED;
padding: 10px;
}
.footer .left {width: 66%;}
.footer .right {
width: 33%;
text-align: right;
}
.footer a {
color: #FFF;
text-decoration: none;
}
.footer a:hover {
color: #FFF;
text-decoration: underline;
}

/* gallery */
.gallery td {
vertical-align: top;
text-align: center;
}
.gallery em {display: block;}

/* misc */
.clear,.clearer {clear: both;}
.clearer {
font-size: 0;
color: #FFF;
}
.col2 .left {
width: 64%;
font-weight: normal;
font-size: 14px;

}
.col2 .right .content {background: #FFF;}
.col2 .right {width: 33%;background: #69D2E7}

.content {
padding: 50px 20px;
font-weight: normal;
font-size:14px;
color:#333;
}

.left {float: left;}
.right {float: right;}
.right .content {padding: 18px 12px 12px;}.right {float: right;}
.right .content {padding: 18px 12px 12px;}


/* block list */
ul.block {
border-top: 1px dashed #BEA586 ;
margin: 4px 0;
padding: 0;
width: 90%;
}
.block li {
border-bottom: 1px dashed #BEA586 ;
list-style: none;
}
.block li a,.block li em {
color: #09C;
display: block;
}
.block li em {
font-size: 1.4em;
font-style: normal;
}
.block li a {
padding: 4px 3%;
text-decoration: none;
width: 94%;
}
.block li a span {font-weight: bold;}
.block li a:hover {

color: #000 ;
font-weight: bold;
}

.right .block,.right .block li {
border-color: #9999FF;
font-family: Verdana, Geneva, sans-serif;
}
.right .block li a:hover {
font-weight:bold;

color: #000;
font-variant: normal;
}
#wrapper #container .title table tr td h1 strong {
font-family: Verdana, Geneva, sans-serif;
font-size: 1.8em;
}
#size {
font-size: 16px;
}
#verdana {
font-family: Verdana, Geneva, sans-serif;
}
#size-2 {
font-size: 14px;
}

#wrapper #container #two-columns .col2 .left .content #b u {
font-size: 16px;
}
#bigtext {
font-size: 18px;
}
#size {
font-size: 18px;
font-weight: bold;
}
#bold {
font-weight: bold;
}
#wrapper #container .bottom .right .style2 #contact {
font-size: 16px;
}
#bold {
font-weight: bold;
}

[Mintaka]

Make sure your CSS bath is correct. This is most likely the problem. May I see the CSS path you're currently using and the paths to the files (CSS file and HTML file using the CSS)?

Thanks, I posted the CSS file.

My problem is (apart from being a coding illiterate) I don't know how the CSS and HTML are supposed to interract and which has priority. I can't understand the idea of hierarchy and nesting etc etc, so I end up in a mess. I need to study it. Do you want the HTML file too? Can't you see that by using 'View source?'