Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
DIVs and CSS rollover help?
Hi there,
I'm trying to learn CSS and DIVs etc and am wondering if it's possible to turn a whole element into a clickable link?
i.e. If, for example, you've got the following:
div.button
{
width: 300 px;
height: 50 px;
border: solid 2px #330066;
background-color: #000000;
}
and also:
<div class="home">
BUTTON TXT
</div>
Is there any way to make the whole 300x50 button link to another page AND also, change colour when you roll over it with the mouse??
I realise that [<div class="home">] should read [<div class="button">] in this example... sorry... wasn't looking what I was cutting and pasting! :o)
2 Answers
- 1 decade agoFavorite Answer
here is a better suggestion
html code
<div class="links"><br>
<ul><br>
<li><br>
<h3>Category</h3><br>
</li><br>
<li><a href="#">Link 1</a></li><br>
<li><a href="#">Link 2</a></li><br>
<li><a href="#">Link 3</a></li><br>
</ul><br>
</div>
css code
<style type="text/css">
<!--
.links {
color: #000000;
background-color: #999999;
width: 200px;
float: left;
}
.links a {
background-color: #FF33FF;
padding: 3px;
text-decoration: none;
display: block;
border-bottom: 1px solid #fff;
color: #FFFFFF;
font-weight: bold;
}
.links li {
background-color: #FFCCFF;
list-style: none;
margin: 0px;
padding: 0px;
}
.links ul {
background-color: #FFCCFF;
margin: 0px;
padding: 0px;
}
.links a:hover {
background-color: #FFCC00;
text-decoration: none;
}
.links h3 {
background-color: #CCCCCC;
border-bottom: 1px solid #fff;
margin: 0px;
width: 200px;
padding: 3px 0px 3px 0px;
}
-->
</style>
Source(s): http://www.mynetcrew.com/info/design.php - 1 decade ago
Well, it looks like you just have some text in the div and you don't really have a button element. If you want to make some text link to another page you would typically use something like this.
<a href="otherpage.html">This is the link text</a>
If you actually want a button instead of text you need to use an input element. Depending on what you want it to do it will look like one of these two.
<input type="button" value="Click me" />
<input type="submit" />
The type="button" is used to activate a javascript function on the page, and the type="submit" is used to submit the <form> it is in.
Check out this link for more information.