Saturday, February 13, 2016

How to create three column web page


Posted by at No comments:

Thursday, January 28, 2016

How to create columns in footer

In Association with Amazon.in
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#footer{
width: 100%;
min-height: 200px;
border: 2px solid black;
background-color:green;
}
#column{
width: 18.5%;
min-height: 200px;
border: 2px solid blue;
background-color:greenyellow;
float: left;
margin: 5px 5px 0px 5px;
padding: 0;
}
#column ul li a {
align-content: center;
list-style-type: none;
}
#column ul li a:hover {
color: green;
}
#links {
width: 100%;
background-color: red;
height: 40px;
float: left;
margin: 0;
border: 2px solid black;
}
#links a{
color: white;
}
#links a:hover{
color: green;
}
</style>
</head>
<body>
<div id="footer">
<div id="column"><img src="images/chandanmal.jpg" width="100%" height="200px"alt=""></div>
<div id="column"><a href="chandan735@gmail.com"><center>Mail to:Chandanmal Jain</center><br>M:+91 9829930553,<br>M:+91 7220023707<br>
Mahaveer circle<br>Juna keradu marg<br>Barmer(Rajasthan)<br>India-344001</a> </div>
<div id="column"><a href="http://digg.com/chandan735"><img src="png/48x48/digg.png" width="48px" height="48px"></a>
<a href="http://facebook.com/chandan735"><img src="png/48x48/facebook.png" width="48px" height="48px"></a>
<a href="http://twitter.com/chandan735"><img src="png/48x48/twitter.png" width="48px" height="48px"></a>
<a href="http://pinterest.com/chandan735"><img src="png/48x48/pinterest.png" width="48px" height="48px"></a>
<a href="http://myspace.com/chandan735"><img src="png/48x48/myspace.png" width="48px" height="48px"></a>
</div>
<div id="column"><ul><li><a href="http://digg.com/chandan735">digg</a></li><br>
<li><a href="http://facebook.com/chandan735">facebook</a></li><br>
<li><a href="http://twitter.com/chandan735">twitter</a></li><br>
<li><a href="http://pinterest.com/chandan735">pinterest</a></li><br>
<li><a href="http://myspace.com/chandan735">myspace</a></li>
</ul>
</div>

<div id="column">column</div>
<div id="links"><a href="http://bardiaplaster.com"><center>Bardia Plaster Industries<br>Barmer</center></a></div>
</div>
</body>
</html>
Posted by at No comments:

Tuesday, January 26, 2016

How to create webpage with HTML5 and CSS3 with vertical menu

Visit Chandanmal's profile on Pinterest.



<div><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: #d8da3d;
padding-left:11em ;
color: purple;
font-family: Georgia,"Times New Roman", Times, serif;
width: 500px;
border: 5px solid green;
}
#banner{
width: 468px;
height: 60px;
background-color: red;
background-image: url("http://cmjainphotos.blogspot.in/5m.jpg");
}
a:hover{
color: red;
}

#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
border: 2px solid black;
}
#nav ul li{
border: 2px solid red;
border-radius: 5px;
background-color: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black;
}
#nav ul li a{
text-decoration: none;
color: blue;
}
#nav ul li a:hover{
color: green;
}
#nav ul li a:visited{
color: red;
}
</style>
</head>
<body>
<!-- site navigation menu-->
<div id="nav">
<ul>
<li><a href="index.html">Home page</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="customers.html">Costomers</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div>
<!-- main content-->
<div id="banner"><a href="http://bardiaplaster.com"><center><h3>Bardia Plaster Industries,
Barmer<br><dfn><b>All types of slabes</b></dfn></h3></center></a></div>
<h1>My first styled page</h1>
<p>It lacs images, but at least it has style. And it has a links,evev
if they don'tgo any where & hellips; </p>
<p>There should be more here, but i don't know what yet.</p>
<hr>
<!-- Sign and date the page, it's only polite!-->
<address>Chandanmal Jain M: +91 9829930553,+91 7220023707<br>Mahaveer circle<br>Juna keradu marg<br>Barmer(Rajastha)<br>India-344001
</address>

</body>
</html></div>
Posted by at No comments:

Friday, January 22, 2016

How to create horizontal cascade menu with HTML5 and CSS3


Visit Chandanmal's profile on Pinterest.
This is my first blog for creating web page. In Association with Amazon.in

Subscribe to SYLLABUS FOR PV SOLAR INSTALLER by Email
Enter your email address:

Delivered by FeedBurner




 <div><! DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Navigation CSS starts here*/
#nav ul li{
list-style-type: none;
margin: 0;
padding-bottom: 20px;
float: left;
position: relative;
width: 200px;
}
#nav ul a{
display: block;
padding: 10px 20px;
margin: 0;
border-left: #CCC 1px solid;
color:#e7e5e5;
background-color: red;
font-weight: bold;
text-decoration: none;
}
#nav ul ul{
display: none;
}
#nav ul li:hover>ul{
display: block;
}
#nav ul ul li{
float: none;
margin: 0;
padding: 0;
border-top: #CCC 1px solid;
}
#nav ul ul{
display: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 40px;
width: 150px;
/* Fix for IE 7*/
background-color: #FFF;
}
#nav ul ul ul{
left: 200px;
top:0px;
}
#nav ul li:hover>a{
background-color: #A38E6D;
color:#444;
}
#nav ul li:hover>a {
background-color: green;
color: #444;
}
#nav ul a:focus{  /* it can be created as above*/
background-color: #A38E6D;
color: #444;
}
#nav ul ul a {
background-color: blueviolet;
}
#nav ul ul li:hover>a{
background-color: orange;
}
#nav ul ul ul li:hover>a{
background-color: violet;
}
#nav ul li:first-child a{
border: none;
}
#nav ul ul ul li:first-child{
border: none;
}
#nav ul ul a{
border: none;
}
/* Navigation menu ends here*/
</style>
</head>
<body>
<div id="nav">
        <ul>
        <li><a href="http://barmersolor.blogspot.com">Home</a></li>
        <li><a href="#">Products</a>
        <ul>
        <li><a href="#">Product_1</a></li>
        <li><a href="#">Product_2</a>
        <ul>
        <li><a href="#">Model_1</a></li>
        <li><a href="#">Model_2</a></li>
        <li><a href="#">Model_3</a></li>
       </ul>
        <li><a href="#">Product_3</a></li>
        </ul>
        <li><a href="#">Services</a>
        <ul>
        <li><a href="#">Service_1</a></li>
        <li><a href="#">Service_2</a></li>
        <li><a href="#">Service_3</a></li>
        </ul>
         <li><a href="#">Contact</a></li>
        </ul>
        </div>
</body>
</html></div>
Posted by at No comments:
Subscribe to: Posts (Atom)