[Gdn8Melbourne]

The problem: I'm writing few lines of html and css in Brackets.
And Brackets previews the page in a new window of Google Chrome in localhost. i.e.

[I]localhost-ip[/I]:[I]numbers[/I]/testing.html

This page fails to show the background if the image is not in the same folder as of the html file. It worked until yesterday without problem.
Moreover, if I open the particular html file in chrome file>open.., Then it works flawlessly too. Something is wrong with the localhost page.
Doesn't show broken link or anything. Simply doesn't display.

Files Location: The html files and images are located in a separate partition sda5. Root is sda1 and home is sda3.

Works in: If the file is opened in Google Chrome separately.
Or also works if the whole project file is anywhere in Home folder (sda3). Then even localhost shows the background. So something is wrong in sda5?

Problem Occurring Since: I cleaned the disk with bleachbit after writing the css yesterday.

Things I tried: Clearing Cache and Cookies. The problem is not with brackets. Because it shows the in-editor preview that it successfully fetched the image link. Also the file has no problem in opening or displaying anywhere else.

Confirmation: Be not confused by my last post. This is in my main account in Ubuntu. So no server was never set, not yet. It's simple like any desktop and was working until yesterday.

 

[hal8000]

Can you post your testing.html and CSS stylesheet?
I'll take a look

 

[Gdn8Melbourne]

Can you post your testing.html and CSS stylesheet?
I'll take a look

Yes, I can. Find them in the folder. But just saying: This may not replicate the problem. I have tested the stylesheet in three browsers and they are alright. Even Brackets can show them alright if the folder is in /home. But when it's not, brackets previews it with no background in local host.

I'm attaching a screenshot also.

 

[hal8000]

OK, now I see your problem. It works ok on the right hand screenshot but the left hand side screenshot the image is missing.

On the left hand screenshot you have this URL:

http://localserver:random-number/testing.htm

Can you open this URL:

http://localserver:random-number/

Copy and paste (if you like).
What you should see is your directory structure:
It should be similar to:

]Up to higher level directory
Name 	Size 	Last Modified

File: testing.css
File: testing.htm
File: testing.js

If you then click on "Up to higher level directory"
you should see a folder called "Images"

I think this folder is missing on localserver:random-number

and all you need to do is copy the Images folder to the location
of the localserver

 

[Gdn8Melbourne]

OK, now I see your problem. It works ok on the right hand screenshot but the left hand side screenshot the image is missing.

On the left hand screenshot you have this URL:

http://localserver:random-number/testing.htm

Can you open this URL:

http://localserver:random-number/

Copy and paste (if you like).
What you should see is your directory structure:
It should be similar to:

]Up to higher level directory
Name 	Size 	Last Modified

File: testing.css
File: testing.htm
File: testing.js

If you then click on "Up to higher level directory"
you should see a folder called "Images"

I think this folder is missing on localserver:random-number

and all you need to do is copy the Images folder to the location
of the localserver

Thankfully you understood the problem. It's very hard to explain in words.

Anyways, I wrote the localhost:random-numbers like that because I didn't know it's safe to upload or not. The url format is like just the common localhost ip address, a colon and then random numbers which I don't know what is and then this /testing.html. The random number changes sometimes.

Please tell me in details what to do. Open that page.. from where, how?

Btw, if you have gone through my css, the Images folder is one directory up and this localhost or bracket preview can't find it. But it can find it, if it is in the same directory. I have a mother-directory in sda5 where I keep all these.

 

[hal8000]

Are you running apache or some other web server?
For example localhost:8080 will say "unable to connect" unless you have something that can serve a web page.

Anyway, I can fix this two ways. I can modify your CSS to generate a background image similar to the png or I can find whats generating the webpage.

Can you post me the output of:

cat /etc/hosts

If youre running apache or a LAMP stack then your pages have to be uploaded to /var/www/ The first page index.htm or index.html would be placed in this directory.

 

[Gdn8Melbourne]

Are you running apache or some other web server?
For example localhost:8080 will say "unable to connect" unless you have something that can serve a web page.

Anyway, I can fix this two ways. I can modify your CSS to generate a background image similar to the png or I can find whats generating the webpage.

Can you post me the output of:

cat /etc/hosts

If youre running apache or a LAMP stack then your pages have to be uploaded to /var/www/ The first page index.htm or index.html would be placed in this directory.

Oh no, that's what I said in my first post I didn't setup any web server yet. It's still normal like a desktop. Typing localhost in the address returns "this site can't be reached". I don't know how and why Brackets previews the webpages in localhost window. Ex. 127.0.0.1:xxxxx (5 numbers always) /testing.htm
It was fine until I cleaned the pc with bleachbit. Something happened and since then it's like as you saw in the screenshot.

cat /etc/hosts
127.0.0.1	localhost
127.0.1.1	Studio

 

[Gdn8Melbourne]

Just ran the files with netbeans ide and it also opens them in a localhost page and same thing is happening.

 

[hal8000]

What location are you saving the html and css files?
If its some tmp/ directory then bleachbit may have wiped it clean.

If youre not running apache, then some sort of web server is running and answering
yo localhost:xxxx where xxxx is your server port

 

[Gdn8Melbourne]

What location are you saving the html and css files?
If its some tmp/ directory then bleachbit may have wiped it clean.

If youre not running apache, then some sort of web server is running and answering
yo localhost:xxxx where xxxx is your server port

Okay Let me further clarify the details. Although it's same like my first post.

The Html and css files are stored in sda5 in a folder. Say X, which contains for folders. So the breadcrumbs would be like sda5/X/Codes/Images, Tests. Tests/testing.html, testing.css, testing.js

sda1 is root and sda3 is /home. sda5 is the extended storage partition in EXT4.

Disk /dev/sda: 111.8 GiB, 120034123776 bytes, 234441648 sectors
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0x91d764de

Device     Boot     Start       End   Sectors  Size Id Type
/dev/sda1  *         2048  48828415  48826368 23.3G 83 Linux
/dev/sda2        48828416  52733951   3905536  1.9G 82 Linux swap / Solaris
/dev/sda3        52733952 111327231  58593280   28G 83 Linux
/dev/sda4       111329278 218748927 107419650 51.2G  5 Extended
/dev/sda5       111329280 218748927 107419648 51.2G 83 Linux

Both Brackets and Netbeans have their own Live preview system for html pages, so one can preview without opening the pages. And they both opens it up in localhost with those ports.

As both the softwares are displaying same problem, I believe it has something to do with my system.
They can only display the backgrounds if they are in same directory as of the html and css pages. Not if they are somewhere else. Not even with the correct file path.

This is occurring since I cleaned my system with bleachbit. Can anything be done?

I hope the things are clearer now.

 

[hal8000]

Now I understand what youre doing.
You have downloaded Brackets IDE, presumablly

https://github.com/adobe/brackets/releases

Realse 1.10 64 but debian.

When you start brackets with command

brackets

It opens the index.html file and gives me the location

http://127.0.0.1:46796/index.html

I am assuming it is simlar on your linux computer.
The brackets live preview is acting as a kind of server on localhost (127.0.0.1) port 46796
However that is a special address just fdr the help file.

When I downloaded your zip file and extracted it in ~/Downloads it opened ok in brackets
with the background image for the first time ONLY ???
Now when I open the background is missing.

This is therefore a bug in Brackets.

Brackets is not in the software repository in Linux Mint (not sure about Ubuntu).
Anyway the solution, use Bluefish.

The bluefish editor is in the repositories of Mint and Ubuntu and is a fully fledged editor
and has code syntax highlighting. The "web" icon also lets you do a preview using firefox or chrome as a browser

 

[Gdn8Melbourne]

Now I understand what youre doing.
You have downloaded Brackets IDE, presumablly

https://github.com/adobe/brackets/releases

Realse 1.10 64 but debian.

When you start brackets with command


It opens the index.html file and gives me the location

http://127.0.0.1:46796/index.html

I am assuming it is simlar on your linux computer.
The brackets live preview is acting as a kind of server on localhost (127.0.0.1) port 46796
However that is a special address just fdr the help file.

When I downloaded your zip file and extracted it in ~/Downloads it opened ok in brackets
with the background image for the first time ONLY ???
Now when I open the background is missing.

This is therefore a bug in Brackets.

Brackets is not in the software repository in Linux Mint (not sure about Ubuntu).
Anyway the solution, use Bluefish.

The bluefish editor is in the repositories of Mint and Ubuntu and is a fully fledged editor
and has code syntax highlighting. The "web" icon also lets you do a preview using firefox or chrome as a browser

Finally you replicated the problem. Yes, that's the exact issue I'm facing.

But the problem is, it's not only Brackets. I downloaded Netbeans IDE too and that also gave same kind of problem. Something is wrong in the localhost.

 

[hal8000]

If netbeans also shows your page displayed as:

http://localhost:xxxxx

where xxxx is some random port number then it suffers from the same problem as
brackets.
I've uninstalled brackets as its not very good/

There are some excellent IDE's in linux, such as Geany, Eclipse, Bluefish.
Your code works perfectly in bluefish and you dont need to install anything else.

Open your file in Bluefish, click the browser button and you will see that it works just as you want it to.

 

[Gdn8Melbourne]

If netbeans also shows your page displayed as:

http://localhost:xxxxx

where xxxx is some random port number then it suffers from the same problem as
brackets.
I've uninstalled brackets as its not very good/

There are some excellent IDE's in linux, such as Geany, Eclipse, Bluefish.
Your code works perfectly in bluefish and you dont need to install anything else.

Open your file in Bluefish, click the browser button and you will see that it works just as you want it to.

I found a solution. And it's not Brackets or Netbean's fault I still believe. Because I also tested with Microsoft's Visual Code Editor, and faced same problem. I guess same will be with Atom too.

I tested Bluefish. It opens the exact html file path in browser, not in localhost. Which is not a problem unless it's okay to refresh everytime.

Anyways, the solution is -
We need to teach localhost about the directory. I don't know how it works but it works. Weird.

I first put the the files out of the folder so the files and the Images folder are in the same parent directory.

tree ~/Desktop/Example
    /home/myhome/Desktop/Example
    ├── Images
    │   └── 1.png
    ├── testing.htm
    └── testing.css
    └── pages

instead of,

tree ~/Desktop/Example
    /home/myhome/Desktop/Example
    ├── Images
    │   └── 1.png
    └── pages
        ├── testing.htm
        └── testing.css

And run. Once the localhost gets the map of what else are in the parent directory, now we can move the html and css files anywhere in that parent directory and it can render the images.

Maybe it's a cache memory thing or something which bleachbit interrupted.

 

[hal8000]

Yes, its possible.
I noticed when I read the index.html file that came with brackets, it was moved elsewhere to /var/www/ some other directory.

Beware though, you had 2 folders, pages/ and Images/ any reference to the old pages/ directory would break your code.

For this reason I always choose Bluefish.
Brackets may be ok for simple examples but if you had a fully fledges web site moving all the directory structure would not be practical.

 

[Gdn8Melbourne]

Yes, its possible.
I noticed when I read the index.html file that came with brackets, it was moved elsewhere to /var/www/ some other directory.

Beware though, you had 2 folders, pages/ and Images/ any reference to the old pages/ directory would break your code.

For this reason I always choose Bluefish.
Brackets may be ok for simple examples but if you had a fully fledges web site moving all the directory structure would not be practical.

Yes, that's right. Bracket's introductory html file is in /opt/brackets/www/.

And yes, Brackets is a new code editor, not a full-fledged IDE. As I'm learning web-developing, it's easier for me because it autopredicts a lot of things and are very easy to input and autocomplete. Besides it's modern too. But you are also right - a fully functional IDE is required to make a working website, which I may need later when I know the all the stuff.