...

View Full Version : Styling a Q&A Page



Inersha
11-10-2011, 12:46 AM
How would you go about styling a page in the question and answer format?

For example, let's say you have 20 questions and 20 answers to be displayed within the usual template. What would be the best way in terms of style and usability to display them on the page?

Would you keep it simple and put in the question in a bold paragraph with the normal weight answer below it, or are there sleeker solutions? Would <dl> lists be more semantic than just <p> paragraphs?

I realise this is more of a stylistic question rather than a tech one, but any ideas or links to examples would be awesome. I think there must be some classy solutions out there.

Excavator
11-10-2011, 12:57 AM
Hello Inersha,
What a fun question! I've never made one before but I think a ul containing all the questions linked via page anchors to a dl with the question as a dt, and answers -dd would be pretty slick.

Excavator
11-10-2011, 01:03 AM
Just for a rough start, have a look at this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>question1</li>
<li>question2</li>
<li>question3</li>
</ul>
<dl>
<dt>question1</dt>
<dd>
<p>answer</p>
<p>answer</p>
<p>answer</p>
</dd>
<dt>question2</dt>
<dd>
<p>answer</p>
<p>answer</p>
<p>answer</p>
</dd>
<dt>question3</dt>
<dd>
<p>answer</p>
<p>answer</p>
<p>answer</p>
</dd>
</dl>
<!--end container--></div>
</body>
</html>

Page anchors made easy (http://nopeople.com/CSS%20tips/page%20anchors/index.html) can be seen here.

Excavator
11-10-2011, 01:17 AM
Still pretty rough but has some functionality...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
ol {
list-style: decimal;
margin: 0 0 2000px;
}
</style>
</head>
<body>
<div id="container">
<ol id="top">
<li><a href="#one">question1</a></li>
<li><a href="#two">question2</a></li>
<li><a href="#three">question3</a></li>
</ol>
<dl>
<dt id="one">question1</dt>
<dd>
<p>answer</p>
<p>answer</p>
<p>answer</p>
</dd>
<dd><a href="#top">back to top</a></dd>
<dt id="two">question2</dt>
<dd>
<p>answer</p>
<p>answer</p>
<p>answer</p>
</dd>
<dd><a href="#top">back to top</a></dd>
<dt id="three">question3</dt>
<dd>
<p>answer</p>
<p>answer</p>
<p>answer</p>
</dd>
<dd><a href="#top">back to top</a></dd>
</dl>
<!--end container--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum