How to add 2 classes to 1 div?

PROBLEM:
You have one div and you want use 2 classes for whatever reasons .
What to do ?

SOLUTION:
simply add space between classes name
<div class="class1 class2">CONTENT</div>

Polite reminder:
class2 will overwrite class1 properties.

web development notes

WARNING!

This is personal notes for personal and my friends only:

http://dominiksymonowicz.blogspot.co.uk/2014/01/itnotes-information.html

You can read them,but I suggest look to link,resources only

It contains  all information about HTML,CSS and JavaScript (and their framework).

HTML

HTML notes:

• http://www.w3.org/community/webed/wiki/HTML/Elements
• list of all html elements (from http://www.w3.org)
• www.checkupdown.com/status/error1.html
• this website explains meaning of the numbers.(Useful,if you want your server return right return code
•  http://reference.sitepoint.com/html
•  Great reference for html 
• http://meyerweb.com/eric/tools/css/reset/
• How to reset css

CSS

CSS notes:

• http://reference.sitepoint.com/css

• 
  

• Prevent long word (like url ) from breaking - www.css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
• http://www.sitepoint.com/12-little-known-css-facts/

JavaScript

JavaScript notes:

• Javascript scope
• "The second important feature is that functions provide scope. In JavaScript there’s no  curly braces local scope; in other words, blocks don’t create scope. There’s only function scope. Any variable defined with var inside of a function is a local variable, invisible outside the function. Saying that curly braces don’t provide local scope means that if you define a variable with var inside of an if condition or inside of a for or a while loop, that doesn’t mean the variable is local to that if or for. It’s only local to the wrapping function, and if there’s no wrapping function, it becomes a global variable. minimizing the number of globals is a good habit, so functions are indispensable when it comes to keeping the variable scope under control." (find resource!)

JavaScript resources:

• http://reference.sitepoint.com/javascript/domcore

XPath

Definition:
XPath is a language for finding information in an XML document.
XPath is used to navigate through elements and attributes in an XML document.


Basics:

• XPath, there are seven kinds of nodes:

1. attribute,
2. comment,
3. document nodes
4. element,
5. namespace,
6. processing-instruction, 
7. text 

• XML documents are trees of nodes.
• Items are atomic values or nodes.
• Atomic values are nodes with no children or parent.
• Each element and attribute has one parent. Element nodes may have zero, one or more children.
• Nodes that have the same parent.
• Ancestors A node's parent, parent's parent, Descendants A node's children, children's children,
• XPath uses path expressions to select nodes or node-sets in an XML document.
• Predicates are used to find a specific node or a node that contains a specific value.
• XPath wildcards can be used to select unknown XML elements.
• By using the | operator in an XPath expression you can select several paths.
• An axis defines a node-set relative to the current node.
• A location path can be absolute or relative.An absolute location path starts with a slash ( / ) and a relative location path does not.
• An XPath expression returns either a node-set, a string, a Boolean, or a number.
• XQuery is used to querying XML data.
• XSLT is the style sheet language for XML files.

SOLUTIONS FOR COMMON PROBLEMS:

• Note: In IE 5,6,7,8,9 first node is[0], but according to W3C, it is [1]. To solve this problem in IE, set the SelectionLanguage to XPath.
•  How to prevent uneven linespacing  when subscripts or superscripts are used  on web pages.
• https://www.cs.tut.fi/~jkorpela/www/linespacing.html

Resources:

• 
  
• http://en.wikipedia.org/wiki/XPath
• Specifications:
• http://www.w3.org/TR/xpath/
• http://www.w3.org/TR/xpath20/
• http://blog.froont.com/brief-history-of-web-design-for-designers/
• Interesting blog entry about history of web design for designer 
• i.stack.imgur.com/whhD1.png 
• Great picture (if you know author let me know!) about work-flow which how  respond number you get http

Misc. informations:

• w3schools is quite famous website that provide web development learning content ,but there are many professionals who hats this page and they are even pages about it like http://www.w3fools.com .I am unable to jurge this,but it is worth to mention as it r

Useful link: Introduction to Bootstrap 3

Bootstrap is a tool to create front end for web application and website.

A very nice introduction to Bootstrap 3  written by Erick fromhttp://www.helloerik.com can be found here:
http://www.helloerik.com/bootstrap-3-grid-introduction


More about Bootstrap can be found here:
http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
http://getbootstrap.com/getting-started/

Review of "Visual QuickStart Guide CSS3" by Jason Cranford Teague

* Please, keep in mind, that I am NOT an expert, so treat this review as personal opinion rather than as prophecy!

 Jason Cranford Teague

 Visual QuickStart Guide CSS3

Peachpit Press(2011) 

My knowledge about CSS was more than basic and but far not enough to what I need to know at job, so I decided to read book to learn CSS properly.

I start my looking for right book from check “CSS cookbook” published by O’Relly. This book is great as reference book but is not too useful to learn. Next, I saw books “Smashing CSS” published by Willow ,but it was too colourful for me ,then I look to “CSS for web developer” published  by ABook, but it looks like story line rather than book to learn, so I look to book  "Visual QuickStart Guide CSS3" and I saw examples, explanation, info, so it was exactly what I want.

Book is written in simple way; focus on what you should to know. It is  easy to read and learn from this book.

All basic term are well explained and it is very easy to understand, even for international people who do not use English on regular basics.

It lots of explanation, tables and information how well every feature is supported across major browser.

Examples are simple and show what you will achieve if you set something.

After read a book you will know everything what you need to know about CSS and you just need practice with few examples, which you should create by yourself.

Book can be use as reference book as well, because chapter are well designed, so it very easy to find what you look for.

Book contains all information about CSS3, so book will be useful for years.

One of the best written it book, which I read so far.

Conclusions.

It is mandatory book for people who want learn CSS.

  Mark: 4/4  

How justify text align works in html?

 Justify text works in different way as is work in normal word processor does. 
Text is justified only when a line of text wraps at the right edge of container( like  cell border in table and etc).
(So text remain aligned to left until text not reach right side).

I found that, when  i generate html using ckeditor but it applies to html in general

 

List of hex value of color in HTML

AliceBlue has hex value -- "#F0F8FF".
AntiqueWhite has hex value -- "#FAEBD7".
Aqua has hex value -- "#00FFFF".
Aquamarine has hex value -- "#7FFFD4".
Azure has hex value -- "#F0FFFF".
Beige has hex value -- "#F5F5DC".
Bisque has hex value -- "#FFE4C4".
Black has hex value -- "#000000".
BlanchedAlmond has hex value -- "#FFEBCD".
Blue has hex value -- "#0000FF".
BlueViolet has hex value -- "#8A2BE2".
Brown has hex value -- "#A52A2A".
BurlyWood has hex value -- "#DEB887".
CadetBlue has hex value -- "#5F9EA0".
Chartreuse has hex value -- "#7FFF00".
Chocolate has hex value -- "#D2691E".
Coral has hex value -- "#FF7F50".
CornflowerBlue has hex value -- "#6495ED".
Cornsilk has hex value -- "#FFF8DC".
Crimson has hex value -- "#DC143C".
Cyan has hex value -- "#00FFFF".
DarkBlue has hex value -- "#00008B".
DarkCyan has hex value -- "#008B8B".
DarkGoldenRod has hex value -- "#B8860B".
DarkGray has hex value -- "#A9A9A9".
DarkGreen has hex value -- "#006400".
DarkKhaki has hex value -- "#BDB76B".
DarkMagenta has hex value -- "#8B008B".
DarkOliveGreen has hex value -- "#556B2F".
Darkorange has hex value -- "#FF8C00".
DarkOrchid has hex value -- "#9932CC".
DarkRed has hex value -- "#8B0000".
DarkSalmon has hex value -- "#E9967A".
DarkSeaGreen has hex value -- "#8FBC8F".
DarkSlateBlue has hex value -- "#483D8B".
DarkSlateGray has hex value -- "#2F4F4F".
DarkSlateGrey has hex value -- "#2F4F4F".
DarkTurquoise has hex value -- "#00CED1".
DarkViolet has hex value -- "#9400D3".
DeepPink has hex value -- "#FF1493".
DeepSkyBlue has hex value -- "#00BFFF".
DimGray has hex value -- "#696969".
DimGrey has hex value -- "#696969".
DodgerBlue has hex value -- "#1E90FF".
FireBrick has hex value -- "#B22222".
FloralWhite has hex value -- "#FFFAF0".
ForestGreen has hex value -- "#228B22".
Fuchsia has hex value -- "#FF00FF".
Gainsboro has hex value -- "#DCDCDC".
GhostWhite has hex value -- "#F8F8FF".
Gold has hex value -- "#FFD700".
GoldenRod has hex value -- "#DAA520".
Gray has hex value -- "#808080".
Grey has hex value -- "#808080".
Green has hex value -- "#008000".
GreenYellow has hex value -- "#ADFF2F".
HoneyDew has hex value -- "#F0FFF0".
HotPink has hex value -- "#FF69B4".
IndianRed has hex value -- "#CD5C5C".
Indigo has hex value -- "#4B0082".
Ivory has hex value -- "#FFFFF0".
Khaki has hex value -- "#F0E68C".
Lavender has hex value -- "#E6E6FA".
LavenderBlush has hex value -- "#FFF0F5".
LawnGreen has hex value -- "#7CFC00".
LemonChiffon has hex value -- "#FFFACD".
LightBlue has hex value -- "#ADD8E6".
LightCoral has hex value -- "#F08080".
LightCyan has hex value -- "#E0FFFF".
LightGoldenRodYellow LightGoldenRodYellow has hex value -- "#FAFAD2".
LightGray LightGray has hex value -- "#D3D3D3".
LightGrey LightGrey has hex value -- "#D3D3D3".
LightGreen LightGreen has hex value -- "#90EE90".
LightPink LightPink has hex value -- "#FFB6C1".
LightSalmon LightSalmon has hex value -- "#FFA07A".
LightSeaGreen LightSeaGreen has hex value -- "#20B2AA".
LightSkyBlue LightSkyBlue has hex value -- "#87CEFA".
LightSlateGray LightSlateGray has hex value -- "#778899".
LightSlateGrey LightSlateGrey has hex value -- "#778899".
LightSteelBlue LightSteelBlue has hex value -- "#B0C4DE".
LightYellow LightYellow has hex value -- "#FFFFE0".
Lime Lime has hex value -- "#00FF00".
LimeGreen LimeGreen has hex value -- "#32CD32".
Linen Linen has hex value -- "#FAF0E6".
Magenta Magenta has hex value -- "#FF00FF".
Maroon Maroon has hex value -- "#800000".
MediumAquaMarine has hex value -- "#66CDAA".
MediumBlue has hex value -- "#0000CD".
MediumOrchid has hex value -- "#BA55D3".
MediumPurple has hex value -- "#9370D8".
MediumSeaGreen has hex value -- "#3CB371".
MediumSlateBlue has hex value -- "#7B68EE".
MediumSpringGreen has hex value -- "#00FA9A".
MediumTurquoise has hex value -- "#48D1CC".
MediumVioletRed has hex value -- "#C71585".
MidnightBlue has hex value -- "#191970".
MintCream has hex value -- "#F5FFFA".
MistyRose has hex value -- "#FFE4E1".
Moccasin has hex value -- "#FFE4B5".
NavajoWhite has hex value -- "#FFDEAD".
Navy has hex value -- "#000080".
OldLace has hex value -- "#FDF5E6".
Olive has hex value -- "#808000".
OliveDrab has hex value -- "#6B8E23".
Orange has hex value -- "#FFA500".
OrangeRed has hex value -- "#FF4500".
Orchid has hex value -- "#DA70D6".
PaleGoldenRod has hex value -- "#EEE8AA".
PaleGreen has hex value -- "#98FB98".
PaleTurquoise has hex value -- "#AFEEEE".
PaleVioletRed has hex value -- "#D87093".
PapayaWhip has hex value -- "#FFEFD5".
PeachPuff has hex value -- "#FFDAB9".
Peru has hex value -- "#CD853F".
Pink has hex value -- "#FFC0CB".
Plum has hex value -- "#DDA0DD".
PowderBlue has hex value -- "#B0E0E6".
Purple has hex value -- "#800080".
Red has hex value -- "#FF0000".
RosyBrown has hex value -- "#BC8F8F".
RoyalBlue has hex value -- "#4169E1".
SaddleBrown has hex value -- "#8B4513".
Salmon has hex value -- "#FA8072".
SandyBrown has hex value -- "#F4A460".
SeaGreen has hex value -- "#2E8B57".
SeaShell has hex value -- "#FFF5EE".
Sienna has hex value -- "#A0522D".
Silver has hex value -- "#C0C0C0".
SkyBlue has hex value -- "#87CEEB".
SlateBlue has hex value -- "#6A5ACD".
SlateGray has hex value -- "#708090".
SlateGrey has hex value -- "#708090".
Snow has hex value -- "#FFFAFA".
SpringGreen has hex value -- "#00FF7F".
SteelBlue has hex value -- "#4682B4".
Tan has hex value -- "#D2B48C".
Teal has hex value -- "#008080".
Thistle has hex value -- "#D8BFD8".
Tomato has hex value -- "#FF6347".
Turquoise has hex value -- "#40E0D0".
Violet has hex value -- "#EE82EE".
Wheat has hex value -- "#F5DEB3".
White has hex value -- "#FFFFFF".
WhiteSmoke has hex value -- "#F5F5F5".
Yellow has hex value -- "#FFFF00".

Spiffy&Awsome tip: What type of font is good to convert from text to pdf/ html

Most suitable generic font family  is a monospace font (like   Courier, Lucida Console) , because each character has the same width, which is necessary if you want keep the original formatting of the plain text file.

Source: Bruno Lowagie -  iText in Action (2nd edtion)

How looks default css for html 4.x ?

Based on  Html 4.01 and CSS 2.x

Below you have a default css for html 4 taken from w3c organization .
(link:  http://www.w3.org/TR/CSS21/sample.html )

 html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset,
h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre {
display: block; unicode-bidi: embed
}

li {
 display: list-item
}

head {
display: none
}

table {
display: table
}

tr {
display: table-row
}

thead {
display: table-header-group
}

tbody {
display: table-row-group
}

tfoot {
display: table-footer-group
}

col {
display: table-column
}

colgroup {
display: table-column-group
}

td, th {
display: table-cell
}

caption {
display: table-caption
}

th {
font-weight: bolder;
text-align: center
}

caption {
text-align: center
}

body {
margin: 8px
}

h1 {
font-size: 2em;
margin: .67em 0
}

h2 {
font-size: 1.5em;
margin: .75em 0
}

h3 {
font-size: 1.17em;
margin: .83em 0
}

h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu {
margin: 1.12em 0
}

h5 {
font-size: .83em; margin: 1.5em 0
}

h6 {
font-size: .75em;
margin: 1.67em 0
}

h1, h2, h3, h4, h5, h6, b,strong {
font-weight: bolder
}

blockquote {
margin-left: 40px;
margin-right: 40px
}

i, cite, em,var, address {
font-style: italic
}

pre, tt, code,kbd, samp {
font-family: monospace
}

pre {
white-space: pre
}

button, textarea,input, select {
 display: inline-block
}

big {
font-size: 1.17em
}

small, sub, sup {
font-size: .83em
}

sub {
vertical-align: sub
}

sup {
vertical-align: super
}

table {
border-spacing: 2px;
}

thead, tbody,tfoot {
vertical-align: middle
}

td, th, tr {
vertical-align: inherit
}

s, strike, del {
text-decoration: line-through
}

hr {
border: 1px inset
}

ol, ul, dir,menu, dd {
margin-left: 40px
}

ol {
list-style-type: decimal
}

ol ul, ul ol,ul ul, ol ol {
margin-top: 0;
margin-bottom: 0
}

u, ins {
text-decoration: underline
}

br:before {
content: "\A";
white-space: pre-line
}

center {
text-align: center
}

:link, :visited {
text-decoration: underline
}

:focus {
outline: thin dotted invert
}

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] {
direction: ltr;
unicode-bidi: bidi-override
}

BDO[DIR="rtl"] {
direction: rtl; unicode-bidi:
bidi-override
}

*[DIR="ltr"] {
direction: ltr;
unicode-bidi: embed
}

*[DIR="rtl"] {
direction: rtl;
unicode-bidi: embed
}


@media print {
h1 {
page-break-before: always
}

h1, h2, h3, h4, h5, h6 {
page-break-after: avoid
}

ul, ol, dl {
page-break-before: avoid
}

}

Source: http://www.w3.org/TR/CSS21/sample.html

how to make table using div in xhtml with css without using table tag

Let's say that you have allergy on using table tag and his friends ( tr td and etc) , but you have secret mission to create a amazing table.
Question is ... what to do ?
Answer is ... use div and CSS.

Easy to say, harder to do.
Many beginners spent hours on using bad language  about "why div are so f... complicated ,even for simple table".
Don't panic.
It is quite simple
You need 2 files
one with html where you
one with css where you store

In html you need to remember that
When you create div they need to have attribute class like:
<div class="sideLeft">  ,
so then browser knows where find style which should be  applied  to your specified div

In css you need to remember that class should be written in this way:
div.sideLeft
so browser can find specific div and apply defined style

How to translate my table from  table world to div world ?

In CSS you need remember to put 3 things

in div which will behave as  table tag <table> in css  should contain:
display: table;

in div which will behave as tr tag <tr> in css should contain:
display: table-row;

in div which will behave as tr tag <td> in css should contain:
display: table-cell;

 How it looks in practice ?
Here is example of table 3 x 2
(style are include in html file, however is a bad practice!)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div.page {
display: table;
width: 100%;
background-color: #004400;
}

div.leftSide {
display: table-cell;
}

div.middleSide {
display: table-cell;
background-color: #008800;
}

div.rightSide{
display: table-cell;
padding: 15px;
cellspacing: 5px;
text-align: right;
}
div.cell{
display: table-row;
font-family:"Verdana",Sans-serif;
font-size: 0.7em;
}
</style>
</head>
<body>
<div id="page">
<div align="left" id="leftSide" class="leftSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>

<div align="middle" id="middleSide" class="middleSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>

<div align="right" id="rightSide" class="rightSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>



</div>
</body>
</html>

How to use tab character in HTML

What is code for tab character ?
It is no HTML tab tag.

but... don't give up!

So what can you do ?
It is few ways to go around with these issue.
I will describe 2 most common ways and in the end i give 2 links to website where you have more crazy possibilities.

If you need tab once (up to few times on website) then use
&nbsp;&nbsp;&nbsp;&nbsp; (standard tab has usually 4 space equivalent )

If you planning using tab quite often ,then is better to  create css property as <p> or <span>
for
p.withTab {
 margin-left: 4em;
}

span.withTab {
 margin-left: 4em;
}

below you have 2 websites where you have more ways to implement tab in html
http://htmltab.kb-creative.net/
http://webdesign.about.com/od/intermediatetutorials/qt/tiphtmltab.htm

How to change modify update css in Ext dynamically

In some rare case we need override some css rules for Ext in specific situation where css cannot be change,then ... what?
 Then you use one line of code.
Ext.util.CSS.updateRule(".x-grid3-row-alt","background-color","#00FF00");

and that's it.
However, remember that in general is bad practice to update css on the fly because all css rules should be stored css file.

Below you can find extract from extjs api (3.3.1 at time of writing this crap note) about update

updateRule( String/Array selector, String property, String value ) : Boolean
Updates a rule property

Parameters:
selector : String/Array
If it's an array it tries each selector until it finds one. Stops immediately once one is found.
property : String
The css property
value : String
The new value for the property

Returns:
Boolean
true If a rule was found and updated

www
sencha forum "regarding-Ext.util.CSS.updateRule"
extjs api (found in Class Ext.util.CSS)