Hi,
I am new to this form and new to web development. I have written the following code for including social buttons in footer in my web page:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Footer</title>
<link rel="stylesheet" type="text/css" media="all" href="css/socialfooter.css" />
</head>
<body>
<div id="divblock_2" style="float: right;">
<h3>Connect and Share</h3>
<div id="divsocial_box">
<div id="divfacebook"><a href="#"title="Facebook"></a></div>
<div id="divtwitter"><a href="#" title="Twitter"></a></div>
<div id="divlinkedin"><a href="#" title="Linkedin"></a></div>
<div id="divyoutube"><a href="#" title="Youtube"></a></div>
</div>
</body>
</html>
Following is the CSS for the above:
@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, p, div, ul, li {
margin:0;
padding:0;
}
body {
font-family: Verdana, Geneva, sans-serif;
background-color: white;
height: 600px;
}
#divblock_2 {
float: left;
padding: 0 0 0 0px;
width: 227px;
}
#divsocial_box {
float:left;
width:100%;
padding-bottom:20px;
background:blue;
}
#divfacebook, #divtwitter, #divlinkedin, #divyoutube {
float:left;
margin-right:7px;
}
#divfacebook a {
background:url("images/facebook.png") no-repeat 0 0px;
width:43px;
height:44px;
display:block;
-moz-transition:all 0s ease 0s;
-webkit-transition:all 0s ease 0s;
transition: all 0s ease 0s;
-ms-transition:all 0s ease 0s;
}
#divfacebook a:hover {
-moz-transform: rotate(-360deg);
-moz-transition: all 0.8s ease-in-out 0s;
-webkit-transform: rotate(-360deg); -webkit-transition: all 0.8s ease-in-out 0s;
-ms-transform: rotate(-360deg); -ms-transition:all 0.8s ease-in-out 0s;
transform: rotate(-360deg); transition: all 0.8s ease-in-out 0s;
}
#divyoutube a {
background:url("images/youtube.png") no-repeat 0 0px;
width:43px;
height:44px;
display:block;
-moz-transition:all 0s ease 0s;
-webkit-transition:all 0s ease 0s;
}
#divyoutube a:hover {
-moz-transform: rotate(-360deg);
-moz-transition: all 0.8s ease-in-out 0s;
-webkit-transform: rotate(-360deg);
-webkit-transition: all 0.8s ease-in-out 0s;
}
#divtwitter a {
background:url("images/twitter.png") no-repeat 0 0px;
width:43px;
height:44px;
display:block;
-moz-transition:all 0s ease 0s;
-webkit-transition:all 0s ease 0s;
}
#divtwitter a:hover {
-moz-transform: rotate(-360deg);
-moz-transition: all 0.8s ease-in-out 0s;
-webkit-transform: rotate(-360deg);
-webkit-transition: all 0.8s ease-in-out 0s;
}
#divlinkedin a {
background:url(images/linkedin.png) no-repeat 0 0px;
width:43px;
height:44px;
display:block;
-moz-transition:all 0s ease 0s;
-webkit-transition:all 0s ease 0s;
}
#divlinkedin a:hover {
-moz-transform: rotate(-360deg);
-moz-transition: all 0.8s ease-in-out 0s;
-webkit-transform: rotate(-360deg);
-webkit-transition: all 0.8s ease-in-out 0s;
}
-------------------------------------------------
I have placed the images in images folder, but still can't get it work. I can see the "Connect and Share" line.
Please help me improve this code.
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
