Sunday, April 3, 2011

CSS Div, style and Div layout

If you learning HTML and building table is very easy but tables are not as good for search engines as Div Tags are.

Div - is a block of HTML and data to be displayed.
Table is created to display mainly TEXT and in fewer cases images also.

DIV is floating type, however Table is Fixed type.

I am really recommending to use Div Tag only!

Below is a little example on creating Main Header div and 3 divs inside:



HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Questions And Answers</title>
<link href="css/aANDq.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="TopDiv" id="TopDiv">
  <div class="leftDiv" id="leftDiv">Content for  class "leftDiv" id "leftDiv" Goes Here</div>
  <div class="centerDiv" id="centerDiv">Content for  class "centerDiv" id "centerDiv" Goes Here</div>
  <div class="rightDiv" id="rightDiv">Content for  class "rightDiv" id "rightDiv" Goes Here</div>
</div>
</body>
</html>


And style.aANDq.css - style sheets file


@charset "utf-8";
#TopDiv {
    position:relative;
    border: 1px solid red;
    width:100%;
    height:150px;
    margin:0px auto;
    max-width:1024;
}
#leftDiv, #rightDiv, #centerDiv {
    position: absolute;
    border: 1px solid red;
}
#leftDiv {
    top:10px;
    left: 10px;
    bottom: 10px;
    width:200px;
}
#centerDiv {
    text-align:center;
    left:220px;
    right:220px;
    top:10px;
    bottom: 10px;
}
#rightDiv {
    top:10px;
    right: 10px;
    bottom: 10px;
    width:200px;
}

1 comment: