Archive for HTML Tips

Show or Hide Div content when click on Button or text

Sometime we are willing to show some content only after clicking on submit button or text and hide it back on clicking on the same button or text
it’s useful when you have bunch of Details information that needs a lot of space and you want to give users to chose if they want to see this details
to do so we should create a java script function like this

Read more

Hide and clear input value on click and return it back (show value) when blank

If you want to show some text or value in input tag explaining what people should type and clear when they are typing and also return text or value back if they left that blank we should add some java script code to our input tag like this:

<input type="text" value="Type anything you want" onfocus="if(this.value == 'Type anything you want') { this.value = ''; }" onblur="if(this.value=='') { this.value='Type anything you want'; }" style="color:#555; width:320px;border:1px solid #222;"/>

Example:

Use CSS file for all browser except Internet explorer (IE)

Sometimes it happens that we want to use the same CSS file for all Browsers except IE,because IE doesn’t support many features of CSS 3 (IE 6, IE 7 ,IE 8 )

to do that,in head tag we should change that line associated with css to this:

<!--[if IE]><![if !IE 6]><![endif]--><link rel="stylesheet" href="style.css" type="text/css"/><!--[if IE]><![endif]><![endif]-->

or:

<!--[if !IE 6]><!--><link rel="stylesheet" href="style.css" type="text/css" /><!--<![endif]-->

It’s already done! but if we want to force IE to use different CSS file we can use this code:

<!--[if IE 6]><link rel="stylesheet" href="ie6.css" type="text/css"/><![endif]-->

Centering DIV vertically and horizontally

In this tutorial we show you how to absolutely centering DIV vertically and horizontally

first of all you should put this CSS code in your page:

 

<style>
html, body {height: 100%;}
#CenteredDiv {
width:300px;
height:150px;
position:absolute;l
eft:50%;
top:50%;
margin:-75px 0 0 -150px;
border:1px solid #222222;
text-align:center;
background-color:yellow;
}
</style>

after that just call this css with defining class in your html code:

<div id="CenteredDiv"></div>

 

That’s It

click here to see example below

 

 

 

how to get empty space instead of using BR tag

If you want to get more space or less than the <BR> tag You can use this code

<div style="height:100px"></div>

Many of the beginner coders used to typing many of <BR> tags to achieve high vertical  empty space,but actually it’s not the best way to achieve this goal

By changing the value of Height tag you can change the Height of empty space that you want.

Changing HTML Table or TD Background Color on Mouseover Using CSS

In order to dynamically change the background color of a table, td, or div when the mouse is over it we can use css method.

let’s assume that we have a class in css called “tablebg”

 

.tablebg{
background-color: #e1eafe;
}

Read more

Changing HTML Table TD Div Background Color on Mouseover

if you’re looking for a great way to spice up your HTML tables, this HTML mouseover code may be just what you’re looking for.

Place your mouse pointer over each of the HTML table cells below to view this HTML mouseover effect. The HTML table cells will change to a specified color when you place your pointer over the cells.

This HTML code will enable you to give your HTML tables a more professional look and feel, as it will greatly improve the presentation of your HTML table data.

Read more