Category Archives: HTML

Web page layout using DIV element with HTML and CSS

Web page layout using DIV element with HTML and CSS

 

<!DOCTYPE html>
<html style=”width:100%; height:100%”>
<head>
<title>HTML Layouts using DIV, SPAN</title>

<style type=”text/css”>

/*

* { margin: 0; padding: 0; border: 0; }

*/

.headerbutton {
color: #000;
background-color: #003300;
border-width: 1px;
border-style: solid;
border-color: #C0FFFF #00F #00F #C0FFFF;
padding: 0px;
margin: 0px;
width: 95%;
height:5%;
font-weight: bold;
color: white;
}

a.headermenubutton:visited {
text-decoration: none;
color: #000;
background-color: #b5dcb3;
display: block;
padding: 3px;

}

.button {

border-width: 1px;
border-style: solid;
border-color: #C0FFFF #00F #00F #C0FFFF;
padding: 0px;
margin: 0px;
width: 95%;
}

a.menubutton:link, a.menubutton:visited {
text-decoration: none;
color: #000;
background-color: #668566;
display: block;
padding: 3px;

}

.mainheader {

background: url(‘headerbgd.PNG’) repeat top left scroll;
height: 100%;
width: 100%;

}

</style>

</head>
<body style=”width:100%; height:100%; font-family: Georgia, Times New Roman, Serif;”>
<div style=”width:100%; height:100%”>
<div style=”background-color:#b5dcb3; height:10%”>

<!– put this in Header.jsp, if you use Tiles in MVC framework–>
<div class=”mainheader”>
<div> </div>
<h1 style=”color:#b5dcb3;”>Saravanan Sivaji Web Portal</h1>
</div>

</div>
<div style=”background-color:white; height:0.5%”></div>
<div style=”background-color:white; height:84%”>
<div style=”background-color:#b5dcb3; height:100%; width:14%;float:left;”>
<!– put this in Menu.jsp, if you use Tiles in MVC framework –>
<div style=”margin: 1%; border: 1px solid red; height:50%; width:95%; float:left; overflow: scroll”>
<div> </div>
<center><div class=”headerbutton”><span class=”headermenubutton”>Main Menu</span></div></center>
<center><div class=”button”><a href=”” class=”menubutton” title=””>CreditCard</a></div></center>
<center><div class=”button”><a href=”” class=”menubutton” title=””>Payments</a></div></center>
<center><div class=”button”><a href=”” class=”menubutton” title=””>Deposits</a></div></center>
</div>
</div>
<div style=”background-color:white; height:100%; width:0.5%;float:left;”></div>
<div style=”background-color:#b5dcb3; height:100%; width:75%;float:left;”>
<!–put this in Content JSP, if you use Tiles in MVC framework –>
<div style=”margin: 1%; border: 1px solid red; height:95%; width:98%; overflow:scroll”>
<p>Technical Recycle Bin</p><br>
<p>Just for demo purposes I have placed border in red line for inner div</p><br>
<p>This layout has been tested in IE, FireFox and Chrome browsers</p><br>
<p>Version of the browsers I used are IE 7.0.5730.13, Chrome Version 38.0.2125.104 m, FireFox 32.0.3</p>
</div>
</div>
<div style=”background-color:white; height:100%; width:0.5%; float:left;”></div>
<div style=”background-color:#b5dcb3; height:100%; width:10%; float:left;”>
<!–put this in Right Menu JSP, if you use Tiles in MVC framework –>
<div style=”margin: 1%; border: 1px solid red; height:50%; width:95%; float:left;”>
<div> </div>
<div><b>Right Menu</b></div>
</div>
</div>
</div>
<div style=”background-color:white;clear:both;height:0.5%”></div>
<div style=”background-color:#b5dcb3;height:5%;border: 2px solid black”>
<!–put this in Footer JSP, if you use Tiles in MVC framework –>
<div style=”margin:0.2%; background-color:#003300; height:60%;border: 2px solid black; color:white”>
<center>
Saravanan Sivaji Technology Solutions
</center>
</div>
</div>
</div>
</body>
</html>

Advertisements

HTML 4.01 Quick List