Saturday, 18 October 2014

Difference Between layouts Fixed Vs Fuild Vs Adaptive Vs Responsive

Lot of developers are developing the different layouts based on their requirement 


Fixed Layout WebSite:

  • Fixed websites have a set width and resizing the browser or viewing it on different devices won’t affect on the way the website looks.

Fluid Layout  Website:

  • Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser allowing it to scale up and down fluidly

Adaptive Layout  Website:

  • Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

Responsive Layout  Website:

  • Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.

Wednesday, 15 October 2014

CSS "display" property clear explanation

CSS display property

Display property Values are listed below

  • block makes the element generate a block
    box.
  • inline makes the element generate one or
    more inline boxes.
  • inline-block makes the element generate a
    block box that’s laid out as if it were an inline box.
  • inline-table makes the element behave like
    a table that’s laid out as if it were an inline box.
  • list-item makes the element generate a
    principal block box and a list-item inline box for the list
    marker.
  • A value of run-in makes the element
    generate either a block box or an inline box, depending on the
    context. If the run-in box doesn’t contain a block box, and is
    followed by a sibling block box (except a table caption) in the
    normal flow that isn’t, and doesn’t contain, a run-in box, the
    run-in box becomes the first inline box of the sibling block box.
    Otherwise, the run-in box becomes a block box.
  • table makes the element behave like a
    table.
  • table-caption makes the element behave like
    a table caption.
  • table-cell makes the element behave like a
    table cell.
  • table-column makes the element behave like
    a table column.
  • table-column-group makes the element behave
    like a table column group.
  • table-footer-group makes the element behave
    like a table footer row group.
  • table-header-group makes the element behave
    like a table header row group.
  • table-row makes the element behave like a
    table row.
  • table-row-group makes the element behave
    like a table body row group.
  • A value of none makes the element generate
    no box at all. Descendant boxes cannot generate boxes either, even
    if their display property is set to something
    other than none.

CSS Absolute position vs Fixed position

Absolute Position :

The DOM Element is removed from the normal page flow, and you can set exact vertical and horizontal position of the absolute element relative to the element it is inside.
Additionally, the absolute element's contents will scroll vertically (and/or horizontally) like normal HTML page contents do.

Fixed Position :

The DOM Element is removed from the normal page flow, and you can set exact vertical and horizontal position of the element relative to the browser window.
Additionally, the fixed element's contents will NOT scroll away like normal HTML page contents do, they will stay in their current position in the browser window.
Fixed positioning was not supported by IE until version 7.

CSS Static Position Vs Relative Position

Static Position : 
Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal html flow. Staticly positioned elements don't accept lefttoprightand bottom rules.

Relative Position :
Relative positioning allows you to specify a specific offset (lefttop etc) which is relative to the containing element. 

CSS "Position" Property Clear Explanation

Values for position: static, relative, absolute, fixed, inherit

position : static


static is the default value. An element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.



position : relative


relative behaves the same as static unless you add some extra properties.


Setting the toprightbottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.



position : absolute



absolute is the trickiest position value. absolute behaves like fixed except relative tothe nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.
This element is relatively-positioned. If this element was position: static; its absolutely-positioned child would escape and would be positioned relative to the document body.



The DOM Element is removed from the normal page flow, and you can set exact vertical and horizontal position of the absolute element relative to the element it is inside.
Additionally, the absolute element's contents will scroll vertically (and/or horizontally) like normal HTML page contents do.


position : fixed

A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the toprightbottom, and left properties are used.

The DOM Element is removed from the normal page flow, and you can set exact vertical and horizontal position of the element relative to the browser window.
Additionally, the fixed element's contents will NOT scroll away like normal HTML page contents do, they will stay in their current position in the browser window.
Fixed positioning was not supported by IE until version 7.

Monday, 8 September 2014

CSS3 font-face browser compatibility

CSS3 Give a excellent feature for including the external fonts

below is the given example for including the external fonts with browser backward compatibility  


@font-face { 
       font-family: 'WebcodehelperFont’; 
       src: url('webfont.eot'); /* IE9 Compat Modes */ 
       src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
       url('webfont.woff') format('woff'), /* Modern Browsers */ 
       url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
}

font-family : "We can add any custom name in the font-family"

Monday, 11 August 2014

CSS Inline elements List

 Inline elements can appear within block-level or other inline elements. They take up the width of their contents.

Inline elements have no line breaks associated with the element.

HTML5 Inline Elements

Here is a complete list of inline-tag selectors that can by used to style the HTML document by using the power of CSS / CSS3
* will represent Inline Elements new in HTML5
SelectorHTML UseSelectorHTML Use
aAnchored LinklabelLabel for Form Element
abbrAbbreviationlegendTitle in Fieldset
addressA Physical AddresslinkResource Reference
areaArea in Image Mapmark*Marked Rext
audio*Sound Contentmeter*Measurement Range
bmBold textnav*Navigation Links
citeShort CitationoptgroupGroup of Form Options
codeCode TextoptionAn Option in a Drop-down List
delDeleted TextqShort Quote
details*Details of an ElementsmallSmall Print
dfnDefined TermselectSelectable List
command*Command Buttonsource*Media resource
datalist*Drop-down ListspanLocalized Style Formatting
emEmphasisstrongStrong Emphasis
fontFont AppearancesubSubscript
iItalicsummary*Details Header
iframeInline sub-windowsupSuperscript
imgImage EmbeddingtbodyTable Body
inputInput FieldtdTable Data
insInserted Texttime*Date/Time
kbdKeyboard TextvarVariable



Next Interview Question