HTML Help

Tuesday, 21 May 2013

z-index
It is an attribute,usually of the div element by using which we can set the priority of the same..

If two elements are overlapping then the element.will be shown whose z-index is set to higher value..
.
.
.
An important thing is the positions should be absolute.

Monday, 6 May 2013

Using text shadows....

Decorate your texts using Text Shadow ...

Just make a file named index.html

<html>
<head>
<title>
Vivek
</title>
</head>
<style>
body
{
font-size: 100px;
font-family:Gabriola;
color: white;
background-color: black;
text-align: center;
margin-top: 200px;
text-shadow:3px -2px 3px gray,-3px 2px 3px gray;
}
</style>
<body>
Eccentric's
</body>
</html>

Friday, 26 April 2013

Make an attractive drop down list

Create an attractive drop down menu using html and css

make an html file named index.html

<div id="nav">
<div id="home" class="onnav"><a href="#">Home</a>
<div id="list1" class="list">
<ul>
<li><a href="#">Home1</a></li><br>
<li>Home2</li><br>
<li>Home3</li><br>
<li>Home4</li>
</ul>
</div>
</div>
<div id="product" class="onnav"><a href="#">Product</a>
<div id="list2" class="list">
<ul>
<li>Product1</li><br>
<li>Product2</li><br>
<li>Product3</li><br>
<li>Product4</li>
</ul>
</div>
</div>
<div id="gallery" class="onnav"><a href="#">Gallery</a>
<div id="list3" class="list">
<ul>
<li>Gallery1</li><br>
<li>Gallery2</li><br>
<li>Gallery3</li><br>
<li>Gallery4</li>
</ul>
</div>
</div>
<div id="sitemap" class="onnav"><a href="#">Site Map</a>
<div id="list4" class="list">
<ul>
<li>Sitemap1</li><br>
<li>Sitemap1</li><br>
<li>Sitemap1</li><br>
<li>Sitemap1</li>
</ul>
</div>
</div>
<div id="aboutus" class="onnav"><a href="#">About Us</a>
<div id="list5" class="list">
<ul>
<li>About us</li><br>
<li>About us</li><br>
<li>About us</li><br>
<li>About us</li>
</ul>
</div>
</div>
<div id="contactus" class="onnav"><a href="#">Contact Us</a>
<div id="list6" class="list">
<address>Vill. Mahilo,Post-jawa,<br>Dist rewa Mp</address>
</div>
</div>
<div id="joinus" class="onnav"><a href="#">Join/Login</a>
<div id="list7" class="list">
<ul>
<li>Login</li><br>
<li>Join Us</li><br>

</ul>
</div>
</div>
</div>

and the css file would be

body
{
background-color:gray;
color:white;
}
#nav
{
background-color:#333;
width:1216px;

height:auto;
margin:auto;
-webkit-border-radius:5px;
padding-left:10px;
text-align:center;
}
a
{
text-decoration:none;
color:white;
}
#home
{
margin-left:50px;}
#product
{
margin-left:190px;
margin-top:-35px;

}
#gallery
{
margin-left:330px;
margin-top:-35px;

}
#sitemap
{
margin-left:470px;
margin-top:-35px;

}
#aboutus
{
margin-left:610px;
margin-top:-35px;

}
#contactus
{
margin-left:750px;
margin-top:-35px;

}
#joinus
{
margin-left:890px;
margin-top:-35px;
}

.onnav
{

height:25px;
width:140px;
padding:5px;

}
.onnav:hover
{
background-color:#000;
font-size:17px;
box-shadow:0px -6px 12px #CCCCCC;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.list
{
background:rgba(0,0,0,0.86);
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
width:300px;
padding:10px;
margin-top:10px;
margin-left:-4px;
display:none;
position:absolute;
z-index:100;
}

ul li
{
list-style:none;
}
#home:hover #list1
{
display:block;
}
#product:hover #list2
{
display:block;
}
#gallery:hover #list3
{
display:block;
}
#sitemap:hover #list4
{
display:block;
}
#aboutus:hover #list5
{
display:block;
}
#contactus:hover #list6
{
display:block;
}
#joinus:hover #list7
{
display:block;
}

Monday, 18 February 2013

Support

It will be my pleasure if u people will be sending feedback and suggestions ..
You can post your spcifiic problems also..

Change Color Of the div on Mouse over

Here is the html page say index.html

<html>
<head><title>Change Color</title>
</head>
<body>
<div id="header"></div>
</body>
</html>

and the css is style.css

#header
{
width:100px;
height:100px;
background-color:red;
-webkit-border-radius:10px;
}
#header:hover
{
background-color:purple;
}

hope it will be helping you...

Rounded corners Using Html and CSS

Friends today I am going to tell u, how to create rounded corners on any div..

here is the html file index.html
<html>
<head>
<title>Rounded Corner</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div>
</body>
</html>

and here is the css style.css

#header
{
width:100px;
height:100px;
background-color:purple;
-webkit-border-radius:10px;
}

Friday, 8 February 2013

Image Slider Using HTML and CSS only

Friends today Iwill tell you how to make a slide show on your web page using only html and CSS......
Here is the code..
This is the page index.html

<html>
      <head>
             <title>Slide Show</title>
             <link rel="stylesheet" type="text/css" href="index.css">
      </hrad>
<body>
              <div id="slide">
                    <marquee behavior="alternate" scrollamount="8">
   <img src="image pathand name">
                                   <img src="image pathand name">
<img src="image pathand name">
                     </marquee>
              </div>
</body>
</html>

and here is the css for above web page index.css

#slide
{
height:300px;
width:300px;
    margin:auto;
}

/*make sure that the sizeof images should be 300*300in this case*/