Uploading Files Help!!

[immort5]

Hello,

I finally finished my website files. Here is a picture of what they look like:

Alright. I uploaded everything and it looks like this on x10hosting:

and inside the "Eclipse files" folder is:

So it's all set up exactly in the same order as you seen in the folder in the first 2 pictures. Now, when I try going on my website, I click on the Eclipse.html and look what I get:

My background isn't there. I have all the files uploaded but the background isn't there and everything isn't centered the way I made it. Now look how it is when I open it on my Desktop in the same order:

See how it's all lined up and the background is there?

Someone please help me get it with the background and make it lined up online.

 

[descalzo]

Change the name of the directory "Eclipse files" to "Eclipse_files"

Never use spaces in file or directory names.

 

[immort5]

It worked. I have a smaller problem though. There is a button that shows Thinking clouds.Its large and its my button. It's a png file. I made it so when you click on it it brings you to new page. One thing though, on the online part, the website, I click on the picture it wont bring me to the new page. IF i click on the text below the picture, it brings me to the page....

Look:

That whole thing is a button... including the text. The text is part of the button. When I hover over the Thinking Cloud part, and click, it won't bring me to the next page. If I hover over the text, and click, it will bring me to the next page. How do I it go even wherever you click on the button?

 

[essellar]

The link, the part inside the <a href=...> tag, is what will take you to the target. There is a way to bind a click event to the outer <div>, making the entire button box clickable using JavaScript, but that leaves the problem of something looking like it should be a link but not being a link if JavaScript is disabled (or if there are errors elsewhere in the script). The easiest thing to do is to move everything you want clickable into the <a> tag.

That leaves another problem: strictly speaking, an <a> (which is an inline element naturally) can't contain a <div> (which is a block element, and is supposed to mean "a logical division in the document"). It would probably work in most browsers, which operate on the "be lenient in what you accept" principle, but they don't have to let it work. It would be better to use a <span> rather than a <div> to wrap the image and the text:

<td><div class="box">
          <a href="http://www.immortalslegion.x10.mx/Eclipse/Immortalschat.html">
          <span class="portal" id="portal-convo"><img src="conversation.png" width="190" height="140"></span>
          <span class="descr">Chat With Current Clan Members</span>
          </a>
        </div></td>

You would have to adjust your CSS as well to make sure the spans include display: block; so that they operate the same way that a div would.