I am close to pulling my hair out! I cannot seem to fix it. I am trying to make a HTML dropdown menu, this is what it looks like at the minute.
Non-clicked:
Clicked:
The problem I am having at the minute is the title "Question One goes here?", I cannot seem to position it right on the grey bar. I have tried padding but it doesn't work -.-
Here is my code:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> </title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="collapsible-panels">
<h2><a href="#">Question One goes here?</a></h2>
<div>Answer to Question One goes here.</div>
</div>
<script src="js/lib/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.index.js" type="text/javascript"></script>
</body>
</html>
CSS:
body {
font: 80% Arial, Helvetica, sans-serif;
}
#collapsible-panels h2 {
width: 1134.614173228px;
height: 60.094488189px;
margin: 0;
padding: 0px 0;
background: url(../images/bar1.png) no-repeat left center;
border-top: 10px solid #FFFFFF;
}
#collapsible-panels h2.active {
background: url(../images/bar2.png) no-repeat left center;
}
#collapsible-panels h2 a {
padding: 35px;
text-decoration:none;
color: #1869AE;
}
#collapsible-panels div {
width: 851px;
height: 45px;
background-image: url("../images/bardrop.png")
}
You should be able to match which css # matches the HTML code, I can that's why I don't put comments in -.-
Please help me !