HTML help

Cool Buddy · 01-12-2011, 01:00 PM

In my website, I want to create a download button. The download button will point to either a word, excel or powerpoint file. This button will be used repeatedly. So I wrote the following code:

Code:

<style>
.downbut{
	width: 240px;
	height: 60px;
	border-left: 10px solid #79ba33;
	background-repeat: no-repeat;
}
#excel{
	background: url('excel.png');
}
#word{
	background: url('word.png');
}
</style>

and placed a link like this:

Code:

<a href="http://google.com"><div class="downbut" id="excel"></div></a>

This means I only need to change the ID to word or excel and the image will change.
This code worked perfectly on my PC when run locally. But when I put the same code on the server, it stops working. Also, it seems putting a div tag inside a link does not validate.

Any alternative idea how I could do this.

MarveL · 01-12-2011, 03:42 PM

Change the class instead of the id.
----------------------------------------------------

<html>
<head>
<title>CSS demo</title>
<style type="text/css">

div
{
width:200px;
height:30px;
}

div.divExcel
{
background:green;
}

div.divPPT
{
background:Orange;
}
</style>

</head>

<body>

<div class="divExcel">This is a DIV</div> <br/><br/>
<div class = "divPPT">This is a DIV</div>

</body>
</html>

nims11 · 01-12-2011, 04:37 PM

try this:

let the link be like

Code:

<a href="http://google.com" id="button0"><div class="downbut" id="excel"></div></a>

use this javascript:

Code:

<script type="text/javascript">
var button=document.getElementById("button0");
var str0=new String(button.firstChild.id);
if(str0=="excel")
button.firstChild.style.background="url('./excel.png')";
else if(str0=="word")
button.firstChild.style.background="url('./word.png')";
</script>

the javascript code should be inside the body and should come after the link.

abhidev · 01-12-2011, 07:54 PM

use classes instead of id's as id's should be unique inside a page and you might have multiple docs of same format(word,excel..etc
)
Code:
<style>
.downbut{
width: 240px;
height: 60px;
border-left: 10px solid #79ba33;
background-repeat: no-repeat;
}
.excel{
background: url('excel.png');
}
.word{
background: url('word.png');
}
</style>
and placed a link like this:

div inside an anchor tag is not valid....so either use a <span> tag instead or simply give the class to the anchor tag itself.
Code:
<a href="http://google.com" class="downbut excel"></a>

Popular Categories

Popular Articles

Content Categories

Sister Sites

Follow Us

Facebook Channels

Digit Magazine