The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Web Page is not loading properly
Phanman
post Jan 27 2021, 06:14 PM
Post #1





Group: Members
Posts: 4
Joined: 27-January 21
Member No.: 27,753



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2021, 06:23 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Phanman
post Jan 27 2021, 07:20 PM
Post #3





Group: Members
Posts: 4
Joined: 27-January 21
Member No.: 27,753



QUOTE(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?



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_38QjL...iew?usp=sharing
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2021, 07:23 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2021, 07:25 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Phanman
post Jan 27 2021, 07:43 PM
Post #6





Group: Members
Posts: 4
Joined: 27-January 21
Member No.: 27,753



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. wacko.gif



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2021, 07:48 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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/validat...ng=&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;
    <!--transition: all 4s ease-in-out;-->
}



This is how HTML and CSS comments look. Keep them where they belong.
CODE
<!-- html comment -->

CODE
/* CSS comment */


Alas removing it doesn't fix the problem. But I think getting the missing image up there will. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2021, 08:01 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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. wacko.gif



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. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Phanman
post Jan 27 2021, 08:18 PM
Post #9





Group: Members
Posts: 4
Joined: 27-January 21
Member No.: 27,753



[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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2021, 08:21 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 09:39 PM