CSS z-index – Overlap html element with different depth

CSS z-index – Overlap html element with different depth. z-index is one of the important css element, which concerns with the layers layout of a web page. Here Layer can be defined as a single thickness of some element covering a surface. If you put one layer above another, then the below layer would be hidden by the above layer. Z-index is also based on this concept. Or you can also compare x,y and z coordinates, where x and y represent plane and z indicates the depth. In other words it determines the stack level of HTML element. But remember, z-index works only when you define the position of that element i.e position as relative, absolute or fixed.

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

z-index is supported by all major browsers. z-index take positive value. The more the positive value is, means, that element will hide or overlap with the other elements of html. Here is the syntax of declaring z-index in css sytle sheet.

#zvalue{
	z-index : 1;
	position : absolute;
}

where zvalue is an id of one of the html element.
Let us have an example of putting a static html label text over an image. Here is the html code for the same:

CSS z-index – Overlap html element with different depth

<html>
<head>
<title>
css z index
</title>
</head>
<body>

<div id="image" style=" z-index: 1; position: relative;">
	<img src="css z-index.png" alt="z-index" >
</div>

<div id="label" style="margin: -133px 0px 0px 50px; z-index: 1; font-size: 40px; position: fixed;">
	z - index
</div>

</body>
</html>

Output of CSS z-index – Overlap html element with different depth

case 1 : For the above written code –

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

case 2 : If we will change the style value of id=”label” with z-index:2

CSS z-index - Overlap html element with different depth
CSS z-index – Overlap html element with different depth

Hope this helps to uplift one element over other in CSS with z-index. If you find any problem, then do comment below.

Open multiple page or tab with single link in html

Open multiple page or tab with single link in html. Many times you may require to open multiple pages if you want to give related and dependent information. Even now a days many website are opening multiple pages with single link to display advertisement too. You can directly use hyper link text with some tag to implement this.

We can provide a link in our web page to move directly to another page by <a href> tag. 

<a href=”http://www.javascripthtml.com”>your text to appear as link</a>

Which will appear as : your text to appear as link

But here you require to open up a multiple pages or tab with single link,  for giving additional information, and making your clients to come across the content that you want to make them read once. Here is the way:

Open multiple page or tab with single link in html
Open multiple page or tab with single link in html

Open multiple page or tab with single link in html

To Open multiple tabs or window with a single link, write the below written code in your html body.

Let us have an example to Open multiple page with single link in html, we would open following three pages:

  1.  Javascript i.e : http://www.javascripthtml.com/category/javascript/
  2. Angularjs : http://www.javascripthtml.com/category/javascript/angularjs/
  3. Html : http://www.javascripthtml.com/category/html/

By adding onclick event and window.open property in <a href> tag, you can open multiple page. Here is the example to do this:

<a onclick="window.open('http://www.javascripthtml.com/category/javascript/'); window.open('http://www.javascripthtml.com/category/javascript/angularjs/')" href="http://www.javascripthtml.com/category/html/" target="_blank">JavaScript HTML related links </a>

Output of Open multiple page or tab with single link in html:

JavaScript HTML related links

For Internet explorer this code will open multiple new windows, while for Google chrome and Mozilla Firefox it will open new tabs. You must allow browser to open popup for this website, while testing.

I hope that the above post will make your work easy to open multiple pages with click on single link. Do comment for your feedback, problems and valuable suggestion

How to add scroll bar in HTML CSS

How to add scroll bar in HTML CSS. While writing a post sometimes we require a line to appear without any break, more than the provided width of the post and sometimes we do not want to exceed the height of the post with all the content appear in the blog. Here we require scroll bar box. You can add horizontal scroll bar in a box or vertical or both horizontal or vertical scroll bar to function in a box with help of overflow element.

How to add scroll bar in html
How to add scroll bar in html

How to add scroll bar in HTML CSS

Adding a  vertical scroll in a box :

Here is the html code :

<div style=”height:100px; width:550px; overflow-y: scroll; padding-bottom:10px; border:3px solid black; “>
<pre>

your text

</pre>
</div>

which will look as :

html code to put scroll box appear in the post :

vertical scroll box

horizontal scroll box

both vertical and horizontal scroll box

 

Adding a horizontal scroll in a box :

Here is the html code :
<div style=”height:200px; width:550px; overflow-x: scroll; padding-bottom:10px; border:3px solid black; “>
<pre>

put your text here

</pre>
</div>

Which will look as :

html code to put scroll box appear in the post :vertical scroll box

horizontal scroll box

both vertical and horizontal scroll box

Adding both horizontal and vertical scroll box :

html code is  :

<div style=”height:200px; width:550px; overflow-x: scroll; overflow-y: scroll padding-bottom:10px; border:3px solid black; “>
<pre>

put your text here

</pre>
</div>

Which will look as :

html code to put scroll box appear in the post :

   vertical scroll box

     horizontal scroll box

       both vertical and horizontal scroll box

You can configure your box with the attributes like, set the font style, font size, color of fonts, background color of the box, border style etc.

For example :

html code to put scroll box appear in the post :

   vertical scroll box

     horizontal scroll box

       both vertical and horizontal scroll box

For the box above html code is :

<div style=”width: 550px; height: 200px; color: 000000; background-color: #DC143C; font-family: arial; font-size: 12px; text-align: left; border: 2px dashed 000000; overflow:scroll; padding: 4px;”>
<pre>

put your text here

</pre>
</div>

If you have any problem related to code of How to add scroll bar in HTML CSS, ask by writing comment on the below space provided. We will work on that. Your valuable suggestion and feedback are always welcomed.

Simple Html Calculator – code program

Html Calculator – code program. This post is made to make a html calculator, which works on browser. A form is made whose name is assigned as calculator. The name attribute specifies the name of a form. Input type are included in the code for a form, which makes, ‘textfield’ and ‘button’. Every input field is specified with attribute value. The value attribute specifies the value of an <input> element. Eval() function, takes the expression and evaluates accordingly. On click’ is the event. It occurs when  the user clicks on an element. This is how the following below code is write to make html calculator.

Html Calculator
Html Calculator

Html Calculator – code program

<html>
<head>
    <title>Html calculator</title>
</head>
<body>
    <form name="calculator" >
    Solution<input type="textfield" name="ans" value="">
    <br>
    <input type="button" value="1" onClick="document.calculator.ans.value+='1'">
    <input type="button" value="2" onClick="document.calculator.ans.value+='2'">
    <input type="button" value="3" onClick="document.calculator.ans.value+='3'">
    <input type="button" value="+" onClick="document.calculator.ans.value+='+'">
    <br>
    <input type="button" value="4" onClick="document.calculator.ans.value+='4'">
    <input type="button" value="5" onClick="document.calculator.ans.value+='5'">
    <input type="button" value="6" onClick="document.calculator.ans.value+='6'">
    <input type="button" value="-" onClick="document.calculator.ans.value+='-'">
    <br>
    <input type="button" value="7" onClick="document.calculator.ans.value+='7'">
    <input type="button" value="8" onClick="document.calculator.ans.value+='8'">
    <input type="button" value="9" onClick="document.calculator.ans.value+='9'">
    <input type="button" value="*" onClick="document.calculator.ans.value+='*'">
    <br>
    <input type="button" value="0" onClick="document.calculator.ans.value+='0'">
    <input type="reset" value="Reset">
    <input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
    </form>
    </body>
</html>

Output of Html Calculator – code program

Solution








Html Table – code program example

Html Table – Table is two dimension structure, with rows and columns making collection of cells, in which we can display our data.

Html Table
Html Table

To create Html Table in website or blog, “table” tag is used to display or create html table as shown below :

Html Table – code program example

<table border="1">
<tr>
<th>Name</th>
<th>Post</th>
<th>Salary</th>
</tr>
<tr>
<td>Geeta</td>
<td>Manager</td>
<td>20000</td>
</tr>

<tr>
<td>Ravi/td>
<td>clerk</td>
<td>5000</td>
</tr>
<tr>
<td>Mohan</td>
<td>clerk</td>
<td>5000</td>
</tr>
<tr>
<td>Shyam</td>
<td>Clerk</td>
<td>5000</td>
</tr>
</table>

Output of Html Table – code program example:

Name Post Salary
Geeta Manager 20000
Ravi/td> clerk 5000
Mohan clerk 5000
Shyam Clerk 5000

<table> tag

This tag is used to create table.

<border>tag :

Border is an attribute of tag table which is used to display the border lines of table and its values is defined in pixels.

<tr> tag :

“tr” tag is used to introduce or create a row. Row tag is closed after the end of row.

<th> tag :

“th” is used to write the data in heading format, i.e written in bold letters.

<td> tag :

“td” is used to insert data

Subscript and Superscript code in Html

Subscript and Superscript code in Html. How to write subscript and superscript in blog-post using html code.

Subscript and Superscript code in Html

Subscript and Superscript code in Html
Subscript and Superscript code in Html

Html Subscript

A Html subscript is a symbol which appear smaller than the normal size and is written just below the text line, as shown below:

H2O

Below is the html Subscript code to put Subscript in your website or post

Text – “sub” is the tag to make subscript

eg of Html Subscript:
H<sub>2</sub>O  will make output

as H2O

Html superscript

A Html superscript is a symbol which appear smaller than the normal size and is written slightly above the text line, as shown below:

1st

below is the html code to put superscript in your website or blog post

For superscript – : your text – “sup” is the tag to make superscript

eg:
1<sup>st</sup> will make output as 1st

How to make superscript and subscript appear simultaneously

To make both appear, i.e Subscript and Superscript code in Html:

<sup>1<sub>1</sub></sup>H which will output as 11H

Html link on image map

Html link on image map.  Html image may be link by either two ways, i.e 1st, you can link the whole image with one link, or an html image can take more take one link, with different area or regions of an image will have different link. In this post you will be explained both the techniques, but to understand the later one, do read these post : html image multiple link. Here are the techniques:

1. Single Html link on image map

Enclose the image tag by hyperlink tag i.e with ‘<a href>’ tag, similarly as you write in making a text hyperlink. With this the whole image will become clickable
Here is the example to write the syntax:
<a href = “www.example.com” ><img src=”image.png” alt=”image”/></a>

For example here is the code and example of the same :

<html>
<head>
    <title>
    Html link on image map
    </title>
<body>
    <a href="http://www.cprogramto.com">
        <img src="image2.png" alt ="Html link on image map"/>
    </a>
</body>
</html>
html link on image map
html link on image map

2. Multiple Html link on image map

You need to define ‘usemap’ attribute in <img> tag, and then define that map, with different area with different link.

Syntax:
<img src=”imageExample.png” alt=”html link on image” usemap=”#nameOfMap”>

Then define map tag, with different areas and different hyper link.

<map name=”nameOfMap”>
<area href=”” shape=”rect” coords=”0,0,160,160″ alt=”alt tag”>
<area href=”” shape=”circle” coords=”180,100,4″ alt=”alt tag”>
</map>

Here is the example with code for multiple html link on an image:

<html>
<head>
</head>
<body>
<img alt="image" usemap="#mapping" src="image.png">
<map name="mapping">
	<area shape="rect" coords="40,40,180,163" href="http://www.cprogramto.com/c-program-example/">
	<area shape="circle" coords="330,100,77" href="http://www.cprogramto.com/category/java/">
</map>
</body>
</html>