Writing Friendly Code - Part 2, Style Rules | WebReference

Writing Friendly Code - Part 2, Style Rules

OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word

The Clockwise Box (The Style Rules)

Note -
Sizes and offsets and such are actually calculated in the script, depending on the screen size and navigator.user.Agent. You often need something defined for a default value to write a change to.


//General element styles.

body{margin:0;background: #d3d3d3;
font-weight:bold;
font-family:'Times New Roman' , serif}

textarea{ background-color:#ffdead;
font-weight:bold}
input{ background-color:#c0c0c0;
font-weight:bold}
.btn{font:menu;font-weight:bold; 
color:#000080;cursor:hand;
background-color:buttonface}
p{ text-indent:30;width:560;margin:5}
h3{color:#000080;margin:5}

iframe{position:absolute;left:5;top:35;
width:580;height:300;z-index:2}

//Paragraph styles for this application. These styles go in the content HTML.

.noClass{display:none}
.wrap{ text-indent:30;width:400;margin:2}
.cent{text-align:center}
.spacer{padding:30}
.stuff{padding:185 0 185 0}

//The main style for the individual pages and the cover page.

.pageClass{ position:absolute; 
visibility:visible;z-index:2;
left:55; top:35;width:590;height:365; 
clip:rect(0 590 365 0);
font-weight:bold; padding:0}

.coverClass{position:absolute; 
visibility:hidden;
z-index:2;left:46; top:35;width:600;
height:360; clip:rect(0 600 360 0);
font-weight:bold; padding:6 10 10 20}

.coverClass h3{padding:10}
.coverClass p{padding:10}
.coverClass a{font-size:1.1em}

 

//Top Toolbar class.

.tabClass{position:absolute; z-index:3; top:10;visibility:hidden;
width:560;height:30; left:50;
clip:rect(0 560 30 0)}

/*This class and the following id calls define the other three toolbars.

.toolClass{position:absolute; z-index:3; 
visibility:hidden}
#toolBox{top:410;left:50;width:500;
height:35; clip:rect(0 500 35 0)}
#nexter{top:370;left:550;width:120;height:30;
clip:rect(0 120 30 0)}
#optins{top:40;left:560;width:80;height:30;
 clip:rect(0 80 30 0)}

//Info tips initial size and position.

.innerClass{position:absolute; visibility:hidden;z-index:2;text-align:center;
background-color:#c0c0c0;vertical-align:middle;
font-weight:bold;
top:40;left:10;width:400}

//This style is applied to the text that is clicked to call the popups:

.inf{color:#006400;font-weight:800;
text-decoration:underline}

 

 

The Friendly HTML  Next Page

OverviewPrinciplesDueling BrowsersSafety NetXFilesValid HabitsLayoutNamesStyle RulesHTMLLast Word

Comments are welcome

 



URL: http://webreference.com/dev/clockwise/clockwise8.html