HTML and CSS - AuthorCode

HTML document DOM tree

DOM is the sort form of the Dynamic object Model. The HTML DOM defines a standard way for accessing and manipulating HTML documents. It is the object presentation of the HTML document. Continue reading “HTML document DOM tree”

How to bind HTML table with an XML document

In the following example i will show you how you can display data in a HTML table from an XML document. Continue reading “How to bind HTML table with an XML document”

Using the ALT attribute in HTML

The alt is the html attribute that specify the alternative text for the element that cannot be rendered. It was introduced in the HTML 2. Continue reading “Using the ALT attribute in HTML”

XML is not replacement of HTML

HTML is an excellent tool for displaying hypermedia documents across a network and XML is designed for electronic information provides who want to do things that HTML is not designed for.
Both are the markup languages, Continue reading “XML is not replacement of HTML”

How to show youtube video in ASP.Net web page?

You can configure these properties when you show a youtube video in your asp.net webpage:
Continue reading “How to show youtube video in ASP.Net web page?”

Arrow slide show – JavaScript and CSS

You can download complete code for slide show that is very simple to use in your website or webpage. It is easy to use.
Its totally customize arrow slide show. we can change number of image display at a time time interval between two images.
Continue reading “Arrow slide show – JavaScript and CSS”

Show hide DIV with anchor tag change text

This is very helpful for developer who want to change the text of anchor tag and show and hide the content of according to anchor tag text.
You can use the following java script in header(tbl is id of table that we want to show hide the content of table).
Continue reading “Show hide DIV with anchor tag change text”

slide show in JavaScript

You can download complete code for slide show that is very simple to use in your website or webpage. It is easy to use.
Continue reading “slide show in JavaScript”

Dropdown menu in html

Drop down menus are the very important things when we design a website. On here we create a very user friendly and light weight drop down menu using html and CSS. You can download the source code that contains html and CSS code.

Download
[wpfilebase tag=file id=5]

You can change the style and appearance of this menu according to you. You can change the height, background color or others appearance. See this Html and CSS code:

HTML Code :

<html>
<head>
    <title>DropDown menu in HTML</title>
    <link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menus">
<ul>
     <li> 
     <a href=''>ABOUT</a>
        <ul>
	<li><a href=''>About Us</a></li> 
	<li><a href=''>Contact Us</a></li> 
	<li><a href=''>Authors</a></li> 
	<li><a href=''>EmailUs</a></li>
        </ul>
     </li>
 
     <li> 
     <a href=''>DEVELOPMENTt</a>  
        <ul>
	<li><a href=''>CSharp language</a></li>
 	<li> <a href=''>Visual Basic .Net </a> </li> 
	<li><a href=''>Visual Basic 6.0</a></li> 
	<li><a href=''>Visual C++</a></li>
	</ul>
     </li>
 
     <li> 
     <a href=''>WEB DEVEL</a> 
        <ul>
	<li><a href=''>ASP.Net</a></li>
 	<li><a href=''>JavaScrip</a></li>
        </ul>
     </li>
 
     </ul>
</div>
</body>
</html>

CSS :

#menus
{
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
}
#menus ul
{
	 margin:0px;
	 padding:0px;
 
 
}
#menus ul li
{
	list-style:none;
	display:inline-block;
	float:left;
	position:relative;
	line-height:30px;
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
	width:150px;
	text-align:center;
	behavior: url("csshover3.htc");
}
#menus ul li ul
{
	display:none;
}
#menus ul li a
{
	color:#fff;
	 padding:0px 15px;
	 line-height:30px;
	 text-decoration:none;
	 font-size:12px;
}
#menus a:hover
{
	text-decoration:underline;
}
#menus ul li:hover ul
{
	position:absolute;
	left:0px;
	top:30px;
	display:block;
}
#menus ul li ul li
{
	 width:160px;
	 text-align:left;
	 padding-left:10px;
	 height:30px;
	 overflow:hidden;
	 background:url(images/navbg7.gif) repeat-x left top;
}