Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Web Page is not loading properly

Posted by: Phanman Jan 27 2021, 06:14 PM

Hello everyone! I recently retired from the Navy and as my post military job I am starting my own business for computer repair. I have tinkered around with coding here and there and figured I would tackle my webpage. I purchased a domain and was off and running, so I thought. I wrote my code in Adobe Dreamweaver and everything looked good for a start out and then I was hoping to build more in the future and jazz it up some more. After purchasing my domain name I was hit in the face with cPanel. I figured out where to upload my code into cPanel but it looks nothing like the code that I built in Dreamweaver and the page seems to be jumbled up and I dont know what the issue could be since it works fine in Dreamweaver or from my local computer. Here is the website https://www.mpinnovationsjax.com/ . As I said, it is a pretty rudimentary website as I am self teaching myself to code it. Any help would be greatly appreaciated.

Posted by: pandy Jan 27 2021, 06:23 PM

Yeah, that doesn't look too good. The CSS seems to be there, so that's not the problem. If you view the page from your hard drive, but in a real browser instead of in DW, does it look as intended or as bad as on the web?

Also, you don't need to use your control panel to upload files. It's much quicker and easier with an FTP program. You will see your files in about the same way as when you use Windows Explorer, only one side shows files on your hard drive and the other shows files on your server. Typically you can drag and drop to upload and download but you can also use commands.

FileZilla is still good, I think. And free.
https://filezilla-project.org/

Posted by: Phanman Jan 27 2021, 07:20 PM

QUOTE(pandy @ Jan 27 2021, 06:23 PM)

When I view is from local in Chrome it looks normal. See attached photo. I didnt mess with the code at all from copying it over to File Manager and even deleted it and recopied over just in case.
https://drive.google.com/file/d/1_tvO_38QjLGfetW1GDKJjsTmNuTI1V6a/view?usp=sharing

Posted by: pandy Jan 27 2021, 07:23 PM

Oh, did you copy the HTML and paste it into some kind of editor in you CP? Something probably went wrong there. That CP has a file upload facility, I think. Try that. Then download that FTP program.

Posted by: pandy Jan 27 2021, 07:25 PM

But viewing source, all bits seem to be there. I mean, there is a doctype and the beginning and the end of the HTML document and the CSS is there.

Posted by: Phanman Jan 27 2021, 07:43 PM

QUOTE(pandy @ Jan 27 2021, 07:25 PM)

But viewing source, all bits seem to be there. I mean, there is a doctype and the beginning and the end of the HTML document is there.

I just deleted all of it again, then verified a blank webpage. I used FileZilla to copy everything over from my hard drive. Same issue as before with it jumbled up.

Posted by: pandy Jan 27 2021, 07:48 PM

The image motherboard.jpg isn't uploaded. Or at least it isn't where you say it is.
https://www.mpinnovationsjax.com/motherboard.jpg

Talking about images, you can't have spaces in URLs. You can call an image 'Logo FullSize.png' but when you link to it you must url encode the space, i.e. use a special code instead of the space, %20.

CODE

Logo%20FullSize.png

It's much easer and neater to avoid spaces in file names. You can use underscore or hyphen as word separators.

CODE

Logo_FullSize.png

Servers are mostly running Linux or some other flavour of *nix. Those OS are case sensitive, unlike Windows. Pic.JPG, PIC.JPG, pic.jpg, PIC.jpg, PiC.jPg and so on are different files on such a server. To avoid mishaps it can be a good idea to keep all file names lowercase. But that's up to you.

You have some errors in your CSS. One is serious. See here https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.mpinnovationsjax.com%2Fstyle_ver_1.0.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en .
The first error is because you have HTML comment in your style sheet. Probably the style sheet isn't read after that.

This is what the validator says:

CODE

95 form Parse Error <!--transition: all 4s ease-in-out;

And here it is in your style sheet.

CODE

form {
    margin-top: 10px;
    text-align: center;
    
}

This is how HTML and CSS comments look. Keep them where they belong.

CODE

CODE

/* CSS comment */

Alas removing it doesn't fix the problem. But I think getting the missing image up there will.

Posted by: pandy Jan 27 2021, 08:01 PM

QUOTE(Phanman @ Jan 28 2021, 01:43 AM)

QUOTE(pandy @ Jan 27 2021, 07:25 PM)

But viewing source, all bits seem to be there. I mean, there is a doctype and the beginning and the end of the HTML document is there.

I just deleted all of it again, then verified a blank webpage. I used FileZilla to copy everything over from my hard drive. Same issue as before with it jumbled up.

Oh, you hadn't needed too. I'm pretty sure it's because of the missing image. But good you got FileZilla. You'll have use for it.

Posted by: Phanman Jan 27 2021, 08:18 PM

[quote name='pandy' date='Jan 27 2021, 07:48 PM' post='141008']
The image motherboard.jpg isn't uploaded. Or at least it isn't where you say it is.
https://www.mpinnovationsjax.com/motherboard.jpg

I fixed all the errors from the validator. I also realized that in my code I was referencing motherboard.jpg (lowercase M) and should have been referencing Motherboard.jpg (uppercase M). Everything seems to be in order now. Thank you so much for the help! I am sure I will be back with more questions and assistance.

Posted by: pandy Jan 27 2021, 08:21 PM

It was case? I thought I checked the usual suspects, but obviously I didn't. Well, that shows why lower case is a good idea.

You are welcome. And welcome back.