Tag Archive: structure


Seperation of structure, content and behaviour

Filed under: Standard CSS & XHTML — Leave a comment
January 21, 2009

Website can be divided in three layer.

Structure Layer:

Structure Layer consists with css code. CSS stands for making structure and decoration of web site .

Content Layer

Content Layer consist with content matter only. It should not make structure and decoration any more.

Behaviour

Behaviour is the action through event handler . For example : onclick, double click, etc. Behavious should not act as structure layer and content layer. It should be use only for interactive. For example : Javascript should not display/hide content matter and should not specify decoration for html element.
View full article »

Tags: , ,
Read More & Comment

Vertically Middle and Horizontally Centering WebSite in through div structure

Filed under: Tips & Tricks — Leave a comment
January 9, 2009

HTML Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns='"http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>
    Vertically Middle and Horizontally Centering
    WebSite in through div structure
</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<body>

<div id="shim"></div>

<div id="wrapper">

My Content goes here

</div>

</body>

</html>

CSS Code :


html, body {
   height: 100%;
   margin: 0;
   padding: 0;
   overflow:hidden;
   background:#0000ff
}

* {
   margin:0px auto;
   padding:0;
}

div#shim {
   visibility: hidden;
   width: 100%;
   height: 50%;
   margin-top: -317px;
   _margin-top:-318px;
   float: left;
}

div#wrapper {
   width: 1000px;
   height: 635px;
   clear: both;
   background:red;
   position: relative;
   top: -317px;

/* IE4ever Hack: Hide from IE4 **/
   position: static;
/** end hack */

}

/* Hide from IE5mac \*//*/

div#shim {
  display: none;
}

html, body {
  height: auto;
}

/* end hack */

/* ]]> */
Tags: , , , , , , , ,
Comment
Follow

Get every new post delivered to your Inbox.