Forum Moderators: not2easy
Result Wanted: A F.A.Q. page with a list of the questions at the top of the page. The answers are within a scrolling div under the questions. I need to be able to link to each answer by clicking on the question. The div must scroll down to the answer when the question is clicked
Current Result: I have successfully linked the questions to the answers. However, not all of the anchors are working. Questions 3 and 5 are functional, but the others do not link to their answers when clicked. The code seems perfect to me, but perhaps someone here will see an error that I've missed.
Source Code:
<head>
<style>
#questionList {
width: 580px;
font-size: 1em;
}
#questionList li {
margin-left: -25px;
}#answerList {
font-size: 1em;
scrollbar-face-color: #d4d0c8;
height: 180px;
width: 630px;
overflow-y: scroll;
padding-bottom: 10px;
padding-left: 10px;
}
#answerList ul {
width: 570px;
}
</style>
</head>
<body>
<div id="content">
<div id="questionList">
<h4>frequently asked questions</h4>
<ul>
<li><a href="#one">1. Question 1</a></li>
<li><a href="#two">2. Question 2</a></li>
<li><a href="#three">3. Question 3</a></li>
<li><a href="#four">4. Question 4</a></li>
<li><a href="#five">5. Question 5</a></li>
</ul>
<div id="answerList">
<h4 id"one">1. Answer 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet. Aliquam facilisis. Nunc nunc est, euismod vel, commodo a, vulputate accumsan,
nunc. Aliquam convallis egestas enim. Vestibulum urna urna, aliquam id, fermentum nec, venenatis vel, neque. Suspendisse potenti. Curabitur a dui et neque lacinia
fermentum. Nunc pulvinar risus a tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam laoreet dui.</p>
<h4 id"two">2. Answer 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet. Aliquam facilisis. Nunc nunc est, euismod vel, commodo a, vulputate accumsan,
nunc. Aliquam convallis egestas enim. Vestibulum urna urna, aliquam id, fermentum nec, venenatis vel, neque. Suspendisse potenti. Curabitur a dui et neque lacinia
fermentum. Nunc pulvinar risus a tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam laoreet dui.</p>
<h4 id="three">3. Answer 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet. Aliquam facilisis. Nunc nunc est, euismod vel, commodo a, vulputate accumsan,
nunc. Aliquam convallis egestas enim. Vestibulum urna urna, aliquam id, fermentum nec, venenatis vel, neque. Suspendisse potenti. Curabitur a dui et neque lacinia
fermentum. Nunc pulvinar risus a tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam laoreet dui.</p>
<h4 id"four">4. Answer four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet. Aliquam facilisis. Nunc nunc est, euismod vel, commodo a, vulputate accumsan,
nunc. Aliquam convallis egestas enim. Vestibulum urna urna, aliquam id, fermentum nec, venenatis vel, neque. Suspendisse potenti. Curabitur a dui et neque lacinia
fermentum. Nunc pulvinar risus a tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam laoreet dui.</p>
<h4 id="five">5. Answer five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet. Aliquam facilisis. Nunc nunc est, euismod vel, commodo a, vulputate accumsan,
nunc. Aliquam convallis egestas enim. Vestibulum urna urna, aliquam id, fermentum nec, venenatis vel, neque. Suspendisse potenti. Curabitur a dui et neque lacinia
fermentum. Nunc pulvinar risus a tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam laoreet dui.</p>
</div>
</body>
I can't wait for the day when all browsers see code the same way. There's plenty of other features they can mess around with to be 'better' than their competitors other than the way code is seen. UGH.
I figured it out.
I failed to enter the '=' character after div ids 1, 2 and 4. Thanks to anyone who took the time to actualy try and figure out my problem and not laugh. lol
[edited by: swa66 at 8:25 pm (utc) on April 8, 2009]
[edit reason] language [/edit]
