HRWebGuru

Monday 2 December 2013

Alternate table row color using CSS

There are two syntax of change Alternate table row color using CSS...

I am using a table with alternate row color with this.

CSS:

tr.d0 td {
    background-color: #CC9999; color: black;
}
tr.d1 td {
    background-color: #9999CC; color: black;
}

HTML:

<table>
<tr class="d0"><td>One</td><td>one</td></tr>
<tr class="d1"><td>Two</td><td>two</td></tr>
</table>

Syntax 2




<!-- source: http://www.apphp.com/index.php?snippet=css-alternating-table-color-rows -->

02.<style type="text/css">

03./* technique 1 */

04.tbody tr:nth-child(odd){ background-color:#ccc; }

05./* technique 2 */

06.TBODY TR.odd { background-color:#78a5d1; }

07.</style>

08. 

09.<table>

10.<tbody>

11.<tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

12.<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

13.<tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

14.<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

15.<tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

16.</tbody>

17.</table>

18. 

19.<table>

20.<tbody>

21.<tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

22.<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

23.<tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

24.<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

25.<tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

26.</tbody>

27.</table>





Created By: Hidayt Rahman

Tuesday 26 November 2013

How can I use Skype URIs in my webpages for Call and Chat ?

Mention it on your webpage.where you want to use call/chat service.

<a href="skype:hidayt.rahman?call">Call to the Webmaster</a>

<a href="skype:hidayt.rahman?chat">Chat to the Webmaster</a>

Sunday 24 November 2013

Responsive CSS web design examples with code

Responsive style template is today is very popular. Responsive means when you open website in your any of device like ipad, mobile, PC, etc. it will set it’s design as per your device’s screen size. Responsive style also called liquid design. Many popular site are responsive today. Here I have written three line code for setting up different CSS for all different devices. You just require to make three CSS files and set this code in your HEAD of site code.

Links of CSS

Create files and use this code in your HEAD of html code. There is media screen width given and you can change its max and min width as per required.

<link rel='stylesheet' href="style.css/" /> 

<link rel='stylesheet' media='screen and (max-width: 480px)' href="style_mobile.css" /> 

<link rel='stylesheet' media='screen and (min-width: 481px) and (max-width: 768px)' href="style_ipad.css" />  <!--ipad css*-->

Download Demo

Thursday 21 November 2013

What is the difference between HTML tags DIV and SPAN?

div is a block element, span is inline.

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block level element within an inline element, so:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...is illegal.

You asked for some concrete examples, so is one taken from my bowling website

<div id="header">
    <div id="userbar">
        Hi there, <span class="username">Hidayt Rahman</span> |
        <a href="/edit-profile.html">Profile</a> |
        <a href="http://hrwebguru.blogspot/_ah/logout?...">Sign out</a>
    </div>
    <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Sunday 17 November 2013

z-index example

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	img
	{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
	}
	</style>
	</head>

	<body>
	<h1>This is a heading</h1>
	<img src="Images/k.jpg" width="100" height="140" />
	<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
	</body>
	</html>