Java Technology Hub

Thursday, 22 November 2012

Create Table Using HTML with CSS styles

Create Table Using HTML with CSS styles

This table created by using HTML with CSS styles. This table contains students records and background color with blue. If we put the cursor on table row, that row color automatically changes to “yellow “. Here we have 7 rows in this table. I kept the cursor on 4 row, that 4^th row changed to “yellow” color. This table is easy to understand and with simple code.

code :

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            /*this is for when you click on that row that will be changes*/
           tbody tr:hover{
                color: dodgerblue;
                background-color: yellow;
            }
            h2{
                color: fuchsia;
                font-family:fantasy;
            }
            thead{
                color:white;
                background-color: orchid;
            }

            tbody{
                background-color: lightblue;
            }


        </style>
    </head>
    <body>
    <center>
        <h2>Students Record</h2>
        <table border="1">
            <thead>

                <tr>
                    <th>S.No</th>
                    <th>Student Name</th>
                    <th>Roll Number</th>
                    <th>Branch</th>
                    <th>Gender</th>
                    <th>Phone Number</th>
                    <th>Tuition Fee</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Narendar</td>
                    <td>08UR1A1214</td>
                    <td>IT</td>
                    <td>Male</td>
                    <td>8008569767</td>
                    <td>30,000</td>

                </tr>
                <tr>
                    <td>2</td>
                    <td>Pradeep</td>
                    <td>08UR1A1242</td>
                    <td>IT</td>
                    <td>Male</td>
                    <td>8008569767</td>
                    <td>30,000</td>
                 </tr>
                 <tr>
                    <td>3</td>
                    <td>Harideep</td>
                    <td>08UR1A1235</td>
                    <td>CSE</td>
                    <td>Male</td>
                    <td>8008569767</td>
                    <td>35,000</td>
                 </tr>
                 <tr>
                    <td>4</td>
                    <td>Archana</td>
                    <td>08UR1A1235</td>
                    <td>IT</td>
                    <td>Female</td>
                    <td>8008569767</td>
                    <td>30,000</td>
                 </tr>
                 <tr>
                    <td>5</td>
                    <td>Rachana</td>
                    <td>08UR1A1235</td>
                    <td>CSE</td>
                    <td>Female</td>
                    <td>8008569767</td>
                    <td>35,000</td>
                 </tr>
                  <tr>
                    <td>6</td>
                    <td>Upendar</td>
                    <td>08UR1A1201</td>
                    <td>EEE</td>
                    <td>Male</td>
                    <td>8008569767</td>
                    <td>40,000</td>
                 </tr>
                  <tr>
                    <td>7</td>
                    <td>Joythi</td>
                    <td>08UR1A1235</td>
                    <td>ECE</td>
                    <td>Female</td>
                    <td>8008569767</td>
                    <td>35,000</td>
                 </tr>

            </tbody>
        </table>

        <h2>Thank you For Visit </h2>
    </center>
    </body>
</html>

output :

Login form using html and css styles

Login form using html and css styles

This login form created by using HTML with CSS styles. This login form contains two text fields (for enter mail id and password) and button. That text fields initially having light blue color while click on that text fields that color will be changes to blue color and button initially having blue color with white text, while click on that button that will be changes to white color and button text changes to blue color. This login form easy to understand and with simple code.

code :

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            /*initially button color*/
            #nav{
                width: 65px;
                height: 25px;
                background-color:blue;
                color:white;
                border: solid #616161 2px;
                text-decoration: none;
                text-align: center;
                font: 7px;
                font-weight: bold;

                cursor: pointer;
                     -moz-border-radius: 5px ;
            }
            /*this is for when you click on that submit button that will be changes*/
            #nav:hover{
                background-color: white;
                color: blue;
                border: solid blue 2px;
            }
             /*initially text field color*/
            #textfield
            {
                width: 130px;
                height: 20px;

                padding: 2px;
                border: solid cornflowerblue 1px;
                font: 4px;
                -moz-border-radius:5px;

            }
            /*this is for when you click on that text field that will be changes*/
            #textfield:hover{
                border: solid blue 1px;
            }
            label{
                color: blue;
            }
            h1{
               color: darkcyan;
               font-family: cursive;
            }
        </style>

    </head>
    <body>
    <center><h1>User Sign In </h1>
        <form action="" method="">
            <table>
                <tr><td><label>Email id </label></td>
                    <td> <input type="text" name="mailid" value="" id="textfield"/></td></tr>
                <tr><td><label>Password</label> </td>
                    <td><input type="password" name="mailid" value="" id="textfield"/></td></tr>
                <tr><td></td>
                    <td><input type="submit" value="Sign In" id="nav"/></td></tr>
            </table>
        </form>
    </center>
    </body>
</html>

output :

Tuesday, 20 November 2012

Drop down Menu With CSS style

DROP DOWN MENU WITH CSS STYLES :

Here login box also include. this drop down menu is very good look and easy to understand. It is created with simple code and easy way. Here we have two file one is css file name is dd.css and other one is html file name is dropdown.html

code for html file :

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="dd.css">

    </head>
    <body>
        <div id="style">
        <ul id="navigation">
            <li><a href="" class="first">HOME</a></li>
            <li><a href="">TECHNOLOGIES >></a>

                <ul>
                    <li><a href="">Java</a></li>
                    <li><a href="">HTML</a></li>
                    <li><a href="">PHP</a></li>
                    <li><a href="">C</a></li>
                    <li><a href="">Android</a></li>
                </ul></li>

                <li>
                    <a href="">LOGIN</a>
                    <ul>
                        <li><a><table>
                                    <tr><td>Email id :</td></tr>
                                    <tr><td><input type="text" name="" value="" /></td></tr>
                                    <tr><td>Password :</td></tr>
                                    <tr><td> <input type="password" name="" value="" /></td></tr>
                                    <tr><td><input type="submit" value="LOGIN" /></td></tr>
                                </table></a></li>
                    </ul>

                </li>
                <li><a href="" class="last">CONTACT</a></li>
        </ul>
        </div>
    </body>
</html>

code for css file name dd.css :

/*this below styles for main menu buttons*/
#style {
    position: relative;
    margin-top: 50px;
    margin: 0px auto;
    width: 680px;
    padding: 10px;
    }
ul#navigation{
    margin: 0px auto;
    position: relative;
    float: left;
}
ul#navigation li{
    position: relative;
    float: left;
    border-bottom: 2px solid cadetblue;
    border-top: 1px solid #c4dbe7;
    display: inline;
    font: 12px;
    margin: 0;
    padding: 0px;


}
ul#navigation li a{
    padding: 10px 25px;
    position: relative;
   text-decoration: none;
   color: turquoise;
   background-color:   steelblue;
    display: inline-block;
    border-top: 1px solid #c9c9c9;
    border-left: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;

}

/*
ul#navigation li a:hover{
    background-color: red;
    color: blue;
}*/
ul#navigation li a.first{
    border-left: 0 none;
}
ul#navigation li a.last{
    border-right: 0 none;
}
/*this is for when we put the cursor on button that color will be change*/
ul#navigation li:hover > a{
    background-color: turquoise;
    color: steelblue;
}

/* drop down box : this is for display the sub content when we put the cursor on main button*/
ul#navigation li:hover > ul{
    visibility: visible;
     opacity:1;
}

/* this below styles for sub buttons(sub menus)*/

ul#navigation ul, ul#navigation li ul {
    list-style: none;
    margin: 0;
    padding: 0;

    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
    width:180px;
}

ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
    background:steelblue;
    padding:7px 15px;
    color:turquoise;

    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
}

output :