script window

COMMENTS

1.TABLE page layout

1. css - BODY TAG; page margins =< 0.
2. html - 2X3 cols TABLE for background layout
css Table BORDERS (border: collapse; border:none )
3. edges in Photoshop from background img
and fit.

text content (value)

4. place text in DIV TAG (like these comments)

Full screen display

5. hide (ghost) scroll-bar
css BODY {overflow: hidden}

2. DIV layout
XML div format

a "default css" refers to the actual style sheet

1. "edges.css" BODY, page margins omitted

full screen

5. IE does not support hide (ghost scroll-bar)

DTD

6. Observe DTD (DOCTYPE etc); top lines of xml page
?necessity of xml: parent css file references?

1. TABLE PAGE LAYOUT

HTML

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<HTML>
<HEAD>

<TITLE>Introduction
	</TITLE>
<link rel="stylesheet" href="torn_edges-style/torn_edges-style.css" type="text/css">

</HEAD>
<BODY>
<!--   ___________2x3 kolonner PAGE background LAYOUT _________________
	xxxxxxxxxxxxxxxx
	x   img topleft   x   topmiddle   x  topright   x
	xxxxxxxxxxxxxxxx
	x   left   x   main   x right    x
	xxxxxxxxxxxxxxxx       
__________________________________________________________ -->
<TABLE WIDTH=100% HEIGHT=100%>
<!-- border="none" Mozilla, Safari, Google Chrome, IE7 - issue: border:collapse. Placed in style sheet   -->

<TR>
<TD class="background-image_topleft" HEIGHT="40">
 
</TD>

<TD class="background-image_topcenter">
 
</TD>

<TD class="background-image_topright">
 
</TD>
</TR></TD>	
<TR><TD style class="background-image_margin_left">
 
</TD>
<TD style class="background-image_main_center">
</TD>
<TD style class="background-image_margin_right">
 :
</TD>
</TR>
</TABLE>	

<!-- _____________ 100% page background layout TABLE END_____-->


<!-- /////////////////////Text box percentage (~semi-float) position - DIV!//////////////////   -->

<div class="textbox">
<p>

	Bagkataloget består af <I>live</I> optagelser af koncerter,
	studieoptagelser fra demoer mv.,
	trick indspilninger på bånd,
	lagkage indspilninger - midi og digital audio.
	<BR>
	Kronologi, genre og gruppenavne findes i sidemenu'en.
	<P>
	alle kompositioner registreret hos 
	<IMG SRC="grafik/KODA_Logo.jpg" HEIGHT=15><FONT face="Times"> 	<B>KODA</B></FONT>
</p>
<HR>	

<p> Adgang med login og password tildeles af Christer Irgens-Møller
</p>
<form>

<p>		Login:        <input type="password" name="pwd" size="20" />
<br>
		Password: <input type="password" name="pwd" size="20" />
		</form>
</p>
</div>
<!-- ________________ END DIV____________________  -->

</BODY>
</HTML>

css

/* //////////// CLASS SELECTOR //////////// 
margins of page as torn paper */

.background-image_topleft {width:43;
		background:
		url("grafik/baggr11_topleft.jpg");
}

.background-image_topcenter {
		background:
		url("grafik/baggr11_top_center.jpg");
}

.background-image_topright {width:41;
		background:
		url("grafik/baggr11_topright.jpg");
}

.background-image_margin_left {
		background:
		url("grafik/baggr11_margin_left.jpg");
}

.background-image_margin_right {width:40;
		background:
		url("grafik/baggr11_margin_right.jpg")
		repeat;
}

.background-image_main_center {
		background:
		url("grafik/baggr11main_center.jpg")
		repeat;
}

/* ////////////// text box with div /////////////////////////  */
.textbox	{width:float;
	padding:10px;
	border: none;
	margin:0px;
	position:absolute;
	top:30%;
	left:35%;
	right:30%;		/* % makes box float like a window-flexible table  */
	text-align:justify; 	/* aligns text according to browser window size. 
			width has to be set to 'float'  */
}
 

/* //////////////////// word TITLE ///////////////////////  */
[title=KODA]
{
border:5px solid green;
}

/*///////////// BODY ////////////////   */
body  { 	margin:-3;
	marginwidth:0; 
	marginheight:0;  /* MARGINS SET TO >= 0 */
	font-family: arial, verdana, sans-serif;
	font point-size: 9;
	font-size: 1em; 
	color: #660009;  
	overflow: hidden;  /* hides ghost scroll-bar to the right */
}


/*  /////////////  P //////////////   */
p   {  font: arial, sans-serif;
	font point-size: 12;
	font-size: 12;
	letter-spacing: 0px;
	line-height: 101,01%; 
			/*font-size: 0,5em;
			determines td format, if put above in this style-sheet. 
			Only IE if put below.
			Font-size em; IE, Moz, Safari */
}


/*  //////////////////  TABLE //////////   */

table 	{ border-collapse:collapse;  
	border: none;                                 /* OBS! "none" : all browsers 
				explicit for the back-ground  */

}

/* //////////////// Table definitions //////////////////////////////////    */
/* table 	{ border: 1px solid black;  
} 
td 	{font-size: 50,1%;
	font point-size: 18;
	line-height:135%;
	letter-spacing: 1px;
	font-variant: small-caps; */
}		/* font point-size: IE (determines all fonts); [Mozilla, Safari NO]  */

2.div LAYOUT

browser output

XML

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"> <head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" /> <title>bagkatalog</title> <link rel="stylesheet" type="text/css" href="default-style.css" media="screen,projection" title="Default" /> </head> <body>  <div id="left_margin"> </div> <div id="top_margin"> </div> <div id="right_margin"> </div> <div id="topleftcorner_margin"> </div> <div id="toprightcorner_margin"> </div>   <div class="textbox"> <p> Bagkataloget består af <I>live</I> optagelser af koncerter, studieoptagelser fra demoer mv., trick indspilninger på bånd, lagkage indspilninger - midi og digital audio. <BR> Kronologi, genre og gruppenavne findes i sidemenu'en. <P> alle kompositioner registreret hos <IMG SRC="grafik/KODA_Logo.jpg" HEIGHT=15><FONT face="Times"> <B>KODA</B></FONT> </p> <HR> <p> Adgang med login og password tildeles af Christer Irgens-Møller </p> <form> <p class="forminput"> Login: <input type="password" name="pwd" size="27" /> <br><br> Password: <input type="password" name="pwd" size="20" /> </form> </p> </div>  </body> </html>

CSS

additional files
"default-style.css" reference file to folder "torn_edges-style"

css default

@charset "ISO-8859-1"; @import "torn_edges-style/edges.css";

folder "torn_edges-style" containing file "edges.css"
(and an "img" folder with the jpg-files)

body { background-color: white; background-image: url("img/baggr11main_center.jpg"); background-repeat: repeat; margin:-3; font-family: arial, verdana, sans-serif; font point-size: 12; font-size: 0.9em; color: #660009; overflow: hidden; /* hides ghost scroll-bar to the right */ } /* ///////////////////// text div ///////////////////////////////////// */ .forminput {text-align:right} /* ////////////// text box with div ///////////////////////// */ .textbox {width:float; padding:10px; border: none; margin:0px; position:absolute; top:30%; left:33%; right:33%; /* % makes box float like a window-flexible table */ text-align:left; /* aligns text according to browser window size. width has to be set to 'float' */ font-size:4; } /* ///////////////////// LAYOUT div /////////////////////////// */ #left_margin { position: absolute; top: 45px; left: 0px; background-color: #88A; color: white; height: 100%; width: 45px; background-image: url("img/baggr11_margin_left.jpg"); background-repeat: repeat-y; } #top_margin { position: absolute; left: 45px; top: 0px; height: 100px; width: 95%; margin: 0px; /* background-color: black; */ background-image: url("img/baggr11_top_center.jpg"); background-repeat: repeat-x; } #right_margin { position: absolute; top: 42px; right: 0px; background-color: #88A; color: white; height: 100%; width: 45px; background-image: url("img/baggr11_margin_right.jpg"); background-repeat: repeat-y; } #topleftcorner_margin { position: absolute; top: 0px; left: 0px; background-color: #88A; color: white; height: 45px; width: 50px; background-image: url("img/baggr11_topleft.jpg"); background-repeat: no-repeat; } #toprightcorner_margin { position: absolute; top: 0px; right: 0px; background-color: #88A; color: white; height: 43px; width: 48px; background-image: url("img/baggr11_topright.jpg"); background-repeat: no-repeat; /* color: purple; ... this refers to font color .... */ }