How to Create This Web page

This is just the background pic put on the HTML layer with this text just typed in the Body section.

The CSS to do so:

html {     /*Bits like this are notes to yourself or other readers of the CSS*/
	height:100%;
	max-height:100%; /* Height for different browsers are in these first two */
	padding:0;			/* Removes the browsers Padding */
	margin:0;			/* And Margins */
	border:0;			/* and Borders */
	background:#fff;	/* colours the background.  fff or ffffff is white */
	font-size:85%;	/* tells the page the font size: is inheritited throughout */
	font-family: trebuchet ms, tahoma, verdana, arial, sans-serif; /* Fonts to be used */
	background:url(../images/jets.jpg) #E5F1FD; /* the pic and it's address in relation to this page. 
Address and name are case sensitive on most servers for web pages. The color here overides the color above */ background-position:-18px 0; /* Moves the pic 18pixels left */ background-repeat: no-repeat; /* Makes the pic appear only once */ /* hide overflow:hidden from IE5/Mac As it says */ /* \*/ overflow: hidden; /* removes the Scoll bars */ /* */ }
The above text has a HTML line break to make the comments on the background pic viewable as there are not scroll bars.

You will see if you move the right hand side of you browser window in and out, that the <pre> text (The sample <style> or CSS coding above) disappears off the edge. That is because of the last line that removes the scroll bars.

The Body CSS will look like this:

body {
	height:100%; 
	max-height:100%; 
	padding:0; 
	margin:0; 
	border:0;
	overflow: hidden;
	}
Although it has not been added to this page yet. As you can see the hidden over flow is not hidden by the comment /* \*/ (it is the \* slash that Mac IE ignores with the comment area marked by the /* (comment) */

As the text has got too low to read very well over the darker parts of the picture, I have created a <div> called "shade" to put a background to the area of the current typing. The css styling at the top of the page also includes two <p> tags. <p> is used to distinguish where text starts. It does not have to be closed like other tags but some HTML editors like Dreamweaver like you to close them.

Back to Web Page Journey