JavaScript

Simple JavaScript code for Image Gallery
JavaScript Code....


HTML Code....



Simple JavaScript code for Tabing
function showDIV(num){
var cont = document.getElementById('test');
for(i=0;i<=cont.getElementsByTagName('div').length;i++){
if(i==num){
cont.getElementsByTagName('div'[i]).style.display = "";
cont.getElementsByTagName('a')[i].style.textDecoration = "underline";
cont.getElementsByTagName('a')[i].style.backgroundColor = "#EEEEEE";
cont.getElementsByTagName('a')[i].style.border = "1px #AAAAAA solid";
}
else{
cont.getElementsByTagName('div')[i].style.display = "none";
cont.getElementsByTagName('a')[i].style.testDecaration = "none";
cont.getElementsByTagName('a')[i].style.backgroundColor = "#FF0000";
cont.getElementsByTagName('a')[i].style.border = "none";
cont.getElementsByTagName('a')[i].style.fontWeight = "normal";
}
}
}

Simple JavaScript code for Random Image

HTML Code....


JavaScript Code....
function golak(){
var arr = new Array("slide1.jpg", "slide2.jpg","slide3.jpg", "slide4.jpg", "slide5.jpg");
var a = arr.length;
var rnd = Math.floor(a*Math.random());
document.r_img.src = arr[rnd];
}

CSS-Hacks

CSS-Hacks for Opacity:----

#DIV_alpha{
width:200px;
height:200px;
background-color:#FF0000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

CSS-Hacks for MIN-Height:----

#DIV_minHeight{
width:200px;
min-height:200px;
height:auto !important;
height:200px;
float:left;
}

CSS-Beginner

Hi everybody,
I am Golak Prasad Jena.I am a Web Designer. If you are a CSS beginner then you can find lot of tips here.It is very easy to learn and understand.Every steps are clearly defined which will help you to complete the CSS.
Below are some video tutorial of CSS and HTML

You can find this link in the left side also
You can find me on http://www.designdunia.com




This is my personal web site.You will find different design here.

Thank You.

My Image

CSS Tutorial // Div Layers, Classes

Basic HTML and CSS Tutorial. Howto make website from scratch

HTML

The structure of the HTML is -----------

CSS

In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.


There are three types of CSS....

These are....

1.Embedded Style

Example-

2.Inline Style

Example-

3.External Style sheet

Example-

CSS has mainly two parts, these are....
1.Selector
2.Declaration
The selectors are of two types.These are,
* ID selector (Defined by symbol "#" )
* CLASS selector (Defined by symbol ".")
The Declaration has two parts.These are,
* Properties
Like-
    font-family:
    color:
* Values
Like-
    arial
    red

CSS Menu:---
Below is a simple CSS dropdown menu example-
Just type the code below in the body section.



























Just copy and paste in the head section within the embedded style sheet.

body{
margin:0px;
padding:0px;
}
#left{
width:200px;
height:auto;
float:left;
}
#left ul{
width:150px;
height:auto;
margin:0px;
margin-left:24px;
border:1px #CCCCCC solid;
padding:0px;
position:relative;
padding:5px 0px 5px 0px;
background-color:#EEEEEE;
list-style-type:none;
float:left;
}
#left li{
width:150px;
height:20px;
float:left;
}
#left li a:link,#left li a:visited{
width:140px;
height:20px;
display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
padding-left:10px;
line-height:20px;
border-bottom:1px #CCCCCC solid;
color:#333333;
text-decoration:none;
outline:none;
float:left;
}
#left li a:hover{
background-color:#FFFFCC;
}
#left li:hover ul{
display:block;
}
#left li li:hover ul{
display:block;
visibility:visible;
}
#left li ul{
width:150px;
height:auto;
margin:0px;
padding:0px;
position:absolute;
left:150px;
display:none;
list-style-type:none;
float:left;
}
#left li li ul{
width:150px;
height:auto;
margin:0px;
padding:0px;
display:none;
visibility:hidden;
left:150px;
list-style-type:none;
float:left;
}
Seting Page:-----
body{
margin:0px;
padding:0px;
}
Margin Properties:-----
#DIV{
width:500px;
height:auto;
margin:10px 0px 0px 10px; (Top Right Bottom Left)
float:left;
}
Padding Properties:-----
#DIV{
width:500px;
height:auto;
padding:10px 0px 0px 10px; (Top Right Bottom Left)
float:left;
}
Background Properties:-----
#test{
background:#FF0000;
background-attachment:scroll; /*(Default value scroll) Other values are-fixed,inherit */
background-image:url(images/poster_1.jpg); /*(Must be your Image)*/
background-repeat:repeat; /*(Default value repeat) Other values are-inherit,no-repeat,repeat-X,repeat-Y */
background-position:left; /*(Default value left) Other values are-bottom,center,inherit,right,top */
}