Java Technology Hub

Saturday, 21 June 2014

Simple css menu navigation with example

Simple CSS menu navigation with example

This tutorial is useful to beginners

We saw menu navigation in many websites, in many cases, as well as menu navigation is very important for develop the website.

So we can learn clearly about menu navigation below and I explained each and every line clearly with an example

HTML Code:

<li><a href=”#”>Services</a></li>

<li><a href=”#”>Clients</a></li>

<li><a href=”#”>About Us</a></li>

<li><a href=”#”>Contact Us</a></li>

</ul>

In above HTML example we used <ul>,<li>,<a> tags

<ul> “ unorder list “ : it is display the list in unorder.

<li> “ list “ :it is display the text in list.

<a> “ anchor ”, href is attribute. Here it is used as link.

CSS Styles:

ul.menu_nav

{

width: 660px; /*menu navigation width*/

background: #bbb; /*background color for menu navigation */

border: 2px solid #999; /*menu navigation border line size and color*/

border-radius:5px; /*menu navigation 4 border turning point radius, it is display like curve type*/

}

In above css styles “ menu_nav “ is a class

ul.menu_nav li

{

display: inline;

}

inline :

This value causes an element to generate one or more inline boxes.

ul.menu_nav li a

{

text-decoration: none;

color: #FFF;

font-family: 'Segoe UI',Arial,sans-serif;

font-size: 16px;

font-weight: bold;

padding: 10px 15px; /*it is shows the width and height */

display: inline-block;

}

inline-block

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

ul.menu_nav a:hover

{

background: #999;

color: #8fde62;

}

When mouse is moved over an element, that will change the background color and text color.

Tuesday, 10 June 2014

HTML5 Registration Form

Here i explained simple HTML5 registration form and it is easy to understand for fresher’s. This HTML5 form is provide validation, here I added some CSS Properties also.

it is work in new version web browsers

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <style type="text/css">

            #textfield{

                width: 250px;

                height: 22px;

                border: 2px solid  #EEE;

                border-radius:5px;

            #add{

               width: 250px;

                height: 40px;

                border: 2px solid  #EEE;

                border-radius:5px;

        </style>

    </head>

    <body bgcolor=" #aae162 ">

        <form action="index.jsp"/>

            <table>

                <tr>

                    <td>First Name* </td>

                    <td><input type="text" name="fname"  id="textfield" tabindex="1"required /></td>

                </tr>

                <tr>

                    <td>Last Name </td>

                    <td><input type="text" name="lname" id="textfield" tabindex="2"/></td>

                </tr>

                <tr>

                    <td>Email Id* </td>

                    <td><input type="email" id="textfield"name="emailid"placeholder="e.g: narendar@gmail.com" pattern="*@*.+" tabindex="3"required/></td>

                </tr>

                <tr>

                    <td>Password* </td>

                    <td> <input type="password" id="textfield"name="psw"  pattern="\d{8,30}"  tabindex="4"required/></td>

                </tr>

                <tr>

                    <td>Website* </td>

                    <td><input type="url" id="textfield"name="url" pattern="https?://.+"  tabindex="5" required/></td>

                </tr>

                <tr>

                    <td>Mobile Number* </td>

                    <td><input type="tel" id="textfield"name="mbno" pattern="[0-9]{10}"  tabindex="6"required/></td>

                </tr>

                <tr>

                    <td>Gender* </td>

                    <td>Male <input type="radio" name="gender" value="male"  tabindex="7"required/>

                        Female <input type="radio" name="gender" value="female"  tabindex="8"required/></td>

                </tr>

                <tr>

                    <td>Age* </td>

                    <td><input type="number"id="textfield"name="age"value="18" min="18" max="75"  tabindex="9"required/></td>

                </tr>

                <tr>

                    <td>Address* </td>

                    <td><textarea type="text" id="add" name="add"  tabindex="10"required></textarea></td>

                </tr>

                <tr>

                    <td>Country</td>

                    <td>  <select name="state" id="textfield"  tabindex="11">

          <option>America</option>

          <option>Australia</option>

          <option>China</option>

          <option>Japan</option>

          <option selected>India</option>

          <option>Indonesia</option>

         </select></td>

                </tr>

                 <tr>

                    <td>Postal Code* </td>

                    <td><input type="number" id="textfield"name="pc" maxlength="6"  title="post code must be 6 digits" tabindex="12"required/></td>

                </tr>

                <tr><td>Join Date :</td> <td><input type="date" id="textfield"name="joindate" tabindex="13"/></td></tr>

                 <tr>

                    <td></td><td> <input type="checkbox"name="cb" tabindex="14" required/> Agree Terms and Conditions*</td>

                </tr>

                 <tr>

                    <td></td>

                    <td>

                        <input type="image" src="submit.png" value="SUBMIT"alt="Submit" width="200" height="40" tabindex="15"/>

                    </td>

                </tr>

            </table>

        </form>

    </body>

</html>

JSP Page

First Name*
Last Name
Email Id*
Password*
Website*
Mobile Number*
Gender*	Male Female
Age*
Address*
Country
Postal Code*
Join Date :
	Agree Terms and Conditions*