====== HTML ====== ===== Layout with

tag ===== refer:\\ [[webdesign:howbrowserwork#the_render_tree_relation_to_the_dom_tree|The render tree relation to the DOM tree]]\\ [[webdesign:howbrowserwork#positioning_scheme|positioning scheme]] ==== display blocks using

tag with none property float ==== HTML code:




Example





  header
  
    body_left
    body_main
  
  footer

=== display in ie === {{:webdesign:ie-normal.png|}} === display in chrome === {{:webdesign:chrome-normal.png|}} ==== display blocks using

tag with property float and none tag

==== footer display correctly in ie but wrong in chrome

=== display in ie === {{:webdesign:ie-float.png|}} === display in chrome === {{:webdesign:chrome-float.png|}} ==== display blocks using

tag with property float and tag

====




Example


  header
  
    body_left
    body_main
  
  
  footer

Display correctly in both ie and chrome\\ {{:webdesign:ie-float.png|}} ===== Menu ===== ==== A Simple Menu Using HTML Lists And CSS ==== === vertical menu ===




    
        Who
        What
        Where

=== Horizontal menu with property float in tag

===





    
        Who
        What
        Where

=== Horizontal menu with property display:inline in tag

===





    
        Who
        What
        Where

==== HTML blocks and inline element ==== HTML elements can be grouped together with

and . === HTML Block Elements === Most HTML elements **are defined as block level elements or as inline elements**. Block level elements **normally start (and end) with a new line when displayed in a browser**. Examples: **

,
,
, === HTML Inline Elements === Inline elements are normally displayed without starting a new line. Examples: ,
, , ** === The HTML
Element === The HTML
element is a block level element that can be used as a container for grouping other HTML elements. The
element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. When used together with CSS, the
element can be used to set style attributes to large blocks of content. Another common use of the
element, is for document layout. It replaces the "old way" of defining layout using tables. Using elements for layout is not the correct use of
. The purpose of the
element is to display tabular data. === The HTML Element === The HTML element is an inline element that can be used as a container for text. The element has no special meaning. When used together with CSS, the element can be used to set style attributes to parts of the text. === HTML Grouping Tags === ^Tag ^Description^ |
|Defines a section in a document (block-level)| ||Defines a section in a document (inline)| ===== CSS ===== ==== CSS Selectors ==== refer: http://www.w3schools.com/cssref/css_selectors.asp ^Selector^Example^Example description^CSS^ |.class|.intro|Selects all elements with class="intro"|1| |#id|#firstname|Selects the element with id="firstname"|1| |||Selects all elements|2| |element|p|Selects all
elements|1| |element,element|div, p|Selects all
elements and all
elements|1| |element element|div p|Selects all
elements inside
elements|1| |element>element|div > p|Selects all
elements where the parent is a
element|2| |element+element|div + p|Selects all
elements that are placed immediately after
elements|2| |element1~element2|p ~ ul|Selects every
element that are preceded by a
element|3| |[attribute]|[target]|Selects all elements with a target attribute|2| |[attribute=value]|[target=_blank]|Selects all elements with target="_blank"|2| |[attribute~=value]|[title~=flower]|Selects all elements with a title attribute containing the word "flower"|2| |:active|a:active|Selects the active link|1| |::after|p::after|Insert content after every
element|2| |::before|p::before|Insert content before the content of every
element|2| |:checked|input:checked|Selects every checked element|3| |:disabled|input:disabled|Selects every disabled element|3| |:empty|p:empty|Selects every
element that has no children (including text nodes)|3| |:enabled|input:enabled|Selects every enabled element|3| |:first-child|p:first-child|Selects every
element that is the first child of its parent|2| |::first-letter|p::first-letter|Selects the first letter of every
element|1| |::first-line|p::first-line|Selects the first line of every
element|1| |:first-of-type|p:first-of-type|Selects every
element that is the first
element of its parent|3| |:focus|input:focus|Selects the input element which has focus|2| |:hover|a:hover|Selects links on mouse over|1| |:in-range|input:in-range|Selects input elements with a value within a specified range|3| |:invalid|input:invalid|Selects all input elemets with an invalid value|3| |:lang(language)|p:lang(it)|Selects every
element with a lang attribute equal to "it" (Italian)|2| |:last-child|p:last-child|Selects every
element that is the last child of its parent|3| |:last-of-type|p:last-of-type|Selects every
element that is the last
element of its parent|3| |:link|a:link|Selects all unvisited links|1| |:not(selector)|:not(p)|Selects every element that is not a
element|3| |:nth-child(n)|p:nth-child(2)|Selects every
element that is the second child of its parent|3| |:nth-last-child(n)|p:nth-last-child(2)|Selects every
element that is the second child of its parent, counting from the last child|3| |:nth-last-of-type(n)|p:nth-last-of-type(2)|Selects every
element that is the second
element of its parent, counting from the last child|3| |:nth-of-type(n)|p:nth-of-type(2)|Selects every
element that is the second
element of its parent|3| |:only-of-type|p:only-of-type|Selects every
element that is the only
element of its parent|3| |:only-child|p:only-child|Selects every
element that is the only child of its parent|3| |:optional|input:optional|Selects input elements with no "required" attribute|3| |:out-of-range|input:out-of-range|Selects input elements with a value outside a specified range|3| |:read-only|input:read-only|Selects input elements with the "readonly" attribute specified|3| |:read-write|input:read-write|Selects input elements with the "readonly" attribute NOT specified|3| |:required|input:required|Selects input elements with the "required" attribute specified|3| |:root|:root|Selects the document's root element|3| |::selection|::selection|Selects the portion of an element that is selected by a user| | |:target|#news:target|Selects the current active #news element (clicked on a URL containing that anchor name)|3| |:valid|input:valid|Selects all input elements with a valid value|3| |:visited|a:visited|Selects all visited links|1| ==== Some Examples with CSS ====