Structure of File Folders and Calling Files

@greenspartan21May 30.2015

I know this is a basic question, but I was wondering if there was an industry standard for structuring the folders of your website?
Currently, I have the basic structure as one main website folder with three sub-folders: html, css, and img. The css has my css stylesheet document, the html has the pages of my website, and the img folder has my images.

My second question is that I am trying to use one of the png images in my “img” folder as the background image for the top of my website but it is not showing in the browser. I think it is a problem in the way I am calling the image or in the structure of my folders but I cannot figure it out. I am trying to have the waterfalltop.png be the background image of the top portion of my flat design page with the nav bar just being the “ABOUT” and “CONTACT” links and the main text (h1) sitting in the center of the background image (“HELLO, I’M…”).
My html is as follows:

[code=html] <body> <div class=”container-fluid” id=”waterfalltop”> <div class=”row”> <ul> <li id=”about”><a href=””>ABOUT</a></li> <li id=”contact”><a href=””>CONTACT</a></li> </ul> </div> <div class=”row”> <h1 class=”center”>HELLO, I’M CONOR GREEN</h1> </div> </div> [/code]

My css is as follows:

[code] #waterfalltop { background-image: url(/img/waterfalltop.png) no-repeat; height:1200px; max-height: 85vh; } h1.center { text-align: center; } [/code]

I appreciate the help and please excuse the basic question. I did try to find the answer elsewhere before posting it here.

to post a comment

HTML

6 Comments(s) _↴

@rtretheweyMay 30.2015 — #The common practice is to keep resource pages like images, CSS files and JavaScript files in their own folders as you have done, and then keep your content HTML documents in a hierarchical folder structure with the primary content pages in the site's root/main directory and then have folders and sub-folders for specific topics (categories and sub-categories).

@jedaisoulMay 30.2015 — #"height:1200px" may be a problem. Also I'm not sure why you have "max-height:85vh" (which does not work on IE8 and below anyway)?

@greenspartan21authorMay 30.2015 — #Thank you for the reply rtrethewey. Jedaisoul, the original graphic has the dimensions 1920 px width and 1200 px height in order to work with almost all screen sizes. If the screen size is big enough I wanted the height to be the full 1200px, however, conceptually I did not want it to exceed more than 85% of the page which is why I have the styling "max-height: 85vh."

@jedaisoulMay 31.2015 — #A background image of that size is likely to make the load time of the landing page excessive, unless it is heavily optimised. That may no be apparent if you have a super-fast cable access to the internet, but it could well be penalised by Google. If you use Google Chrome you can test the page load time for, say, a mobile device on a 2G network by:

- access developer tools.

- select: network "good 2G".

- right click on reload.

- select: "empty cache and hard reload".

Also, I've not tested it but I suspect that you could have a problem using vh (and vw) units on a responsive web page. This is because it is usual to relate the viewport to the device width/height. Which may be fine for mobiles, but I'm not sure how it will work on a PC using a windowed display? It may be nothing, but I'd suggest you may want to check it out. And, as I said, it definitely will not work on IE8 and below (which still accounted for 10% of users last time I checked).

P.S. I've just checked and that figure for users with IE8 and below is out-of-date.

@greenspartan21authorJun 14.2015 — #Jedaisoul,

If you would advise against using vh (and vw) units how would you suggest that I structure the home page so that the png image is the full-width background image of the landing page with text centered in the middle of it and the navbar links of "About" and "Contact" on top of the background image on the top left and right corners?

As far as the size of the png image (1920 w, 1200 h), I was advised to make it that size so that it is compatible with 95% of all screen sizes. What would you suggest I change the size to to lower the load time of the page, but work as a crisp full-width background image on almost all devices?

Thanks again for your time.

@jedaisoulJun 17.2015 — #That is not what I said. I suggested that "I'm not sure how it will work on a PC using a windowed display".

As for a full-screen background, you need to take into account portrait mode as well as landscape, particularly on medium to smaller-screen devices. So I'd suggest having different sizes of image for different displays. E.g. Something like an 800x800 image for medium and 480x480 for small devices. However, there is a problem with using different sized images, it is only a benefit if just the relevant image is downloaded.

As for larger screens, is your web page really going to fill a 1080p display? That's an awful lot of screen acreage to fill. And it can look silly with just a small amount of text in the middle. However, I've done a mock-up [b][url=http://www.emberwebsites.co.uk/demo/?pset=3]here[/url][/b] of a full-screen display. It's not exactly what you are talking about, but is similar...

Also in #HTML _↴

How embed image in html......?Image mouseover Bulletts

Success!

Help @greenspartan21 spread the word by sharing this article on Twitter...

Tweet This

Structure of File Folders and Calling Files

6 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Structure of File Folders and Calling Files

6 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #HTML _↴