Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    50
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Styling a Q&A Page

    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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Just for a rough start, have a look at this -
    Code:
    <!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 can be seen here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Still pretty rough but has some functionality...
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Inersha (11-10-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •