Hey guys,
Basically I'm trying to get the background to change on these <h2> question headings. My code so far is:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>asdasd</title>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {background-color: #dcdcdc;}-->
</style></head>
<body>
<h1 id="top">Widets and What's-its</h1>
<h5><span class="black">home</span> <span class="black">contact us</span> <span class="black">products</span> <span class="black">services</span> <span class="black">faq</span></h5>
<h3>faq.</h3>
<span class="questions">
<ul class="disc">
<li><h2><a href="#answer1">Q. What are widgets?</a></h2></li>
<li><h2><a href="#answer2">Q. Why should I buy a widget?</a></h2></li>
<li><h2><a href="#answer3">Q. Where do widgets come from?</a></h2></li>
<li><h2><a href="#answer4">Q. What are widgets made of?</a></h2></li>
<li><h2><a href="#answer5">Q. How do I use my widget?</a></h2></li>
<li><h2><a href="#answer6">Q. Who uses widgets?</a></h2></li>
</ul></span>
<h4 id="answer1">Q. What are widgets? <a href="#top" class="a">
top</a></h4>
<p>A. Widgets are a smaller, more compact version of what's its.</p>
<h4 id="answer2">Q. Why should I buy a widget?<p1><a href="#top" class="a">top</a></p1>
</h4>
<p>A. Because widgets will solve all of your problems.</p>
<h4 id="answer3">Q. Where do widgets come from?<a href="#top" class="a">top</a></p1>
</h4>
<p>A. Widgets are harvested from the Amazon rain forest by little green gnomes.</p>
<h4 id="answer4">Q. What are widgets made of?<a href="#top" class="a">top</a></p1>
</h4>
<p>A. Widgets are made of primordial, esoteric matter, and as such could cause your head to explde into one of seven fun-filled colours.</p>
<h4 id="answer5">Q. How do I use my widget?<p1><a href="#top" class="a">top</a></p1>
</h4>
<p>A. You must summon a troll using your propeitary magic wand and book of spells who will teach you everything you need to know about your widget.</p>
<h4 id="answer6">Q. Who uses widgets?<a href="#top" class="a">top</a></p1>
</h4>
<p>A. Everybody!</p>
</body>
</html>
and for the CSS:
css
/* CSS Document */
<style type="text/css">
body {
background color: #dcdcdc;
}
ul.circle {
list-style-type: circle
}
span.black {
background-color:black;
padding: 7px;
}
h1 {
margin: 0;
padding: 20px;
background-color: #939393;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -3px;
color: #FFFFFF;
margin: 0;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
line-height: 40%;
font-size: 14px;
color: #000000;
}
h3 {
margin: 0px;
padding: 0px;
background-color: #939393;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -3px;
color: #FFFFFF;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
h5 {
padding: 10px;
text-decoration: underline;
border-top: 7px solid #000000;
background-color: white;
color: white;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-family: Arial, Helvetica, sans-serif;
padding: 12px;
margin: auto;
border: 2px solid #000000;
}
p1 {
color: white;
text-decoration: underline;
}
.heading a:active {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
line-height: 40%;
font-size: 30px;
color: #000000;
}
.questions a:link {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
line-height: 40%;
font-size: 14px;
color: #000000;
}
.questions.a:visited {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
line-height: 40%;
font-size: 14px;
color: #000000;
}
a.a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: white;
}
a.a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: white;
}
</style>
I just want the background of those headings to change to orange when the links up the top are clicked. Could someone tell me how to do this, please?
This post has been edited by mogstronaut_: 4 May, 2008 - 05:50 AM
4 May, 2008 - 05:49 AM
| 