User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 397,580 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,300 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 419 | Replies: 3 | Solved
Reply
Join Date: Feb 2008
Posts: 19
Reputation: dwlamb_001 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
dwlamb_001 dwlamb_001 is offline Offline
Newbie Poster

Help Formatting Q & A as a block

  #1  
Feb 26th, 2008
I'm having a challenge with hanging indents and linebreaks. the essential effect I want is:

Q: Question
A: Answer

Q: Question
A: Answer

For each question and answer, I want a hanging indent:
  1. p.hang { margin-left: 1in; text-indent: -0.25in }
That way if a question or answer wraps to the next line, it will not go to the left margin but line up under Question or Answer. It's working ok for the Q: part but not A.

To keep the Q & A as one block, I'm using <br /> instead of </p> so there's no gap. I've tried defining
  1. ans { position: relative; margin-left: X }
  2. X has been some negative number using px, pt or inches
and using it as a span on the answer portion but to no avail.

Here's the full code of a typical block right now:
  1. <p class="hang">
  2. Q: Should I have a baby after 35?<br />
  3. <span class="ans">A: No, 35 children is enough.</span>
  4. </p>

Is there any way around this? Whoever devised this original premise of a blank line between paragraphs should be shot.
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Jan 2008
Location: Bangalore, India
Posts: 331
Reputation: DangerDev is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 31
DangerDev's Avatar
DangerDev DangerDev is offline Offline
Posting Whiz

Re: Formatting Q & A as a block

  #2  
Feb 26th, 2008
use <br><br> between 2 QA block or another way is using one blank <div></div> with some style between two QA block.
A computer lets you make more mistakes faster than any invention in human history - with the possible exceptions of handguns and tequila.
~Mitch Ratcliffe
Reply With Quote  
Join Date: Jul 2006
Location: Deptford, London
Posts: 943
Reputation: MattEvans has a spectacular aura about MattEvans has a spectacular aura about 
Rep Power: 5
Solved Threads: 47
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is online now Online
Posting Shark

Re: Formatting Q & A as a block

  #3  
Feb 26th, 2008
This seems to work fine for me (Opera):
  1. <html>
  2. <head>
  3. <title>Hanging indents..</title>
  4. <style type="text/css">
  5. p.question, p.answer
  6. {
  7. margin-left:1.2em;
  8. text-indent:-1.2em;
  9. padding-bottom:0;
  10. padding-top:0;
  11. margin-top:0;
  12. }
  13. p.question
  14. {
  15. margin-bottom:0;
  16. }
  17. p.answer
  18. {
  19. margin-bottom:1em;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <p class="question">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  25. <p class="answer">A: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  26. <p class="question">Q: etc...</p>
  27. <p class="answer">A: etc....</p>
  28. <p class="question">Q: etc...</p>
  29. <p class="answer">A: etc....</p>
  30. </body>
  31. </html>
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
Join Date: Feb 2008
Posts: 19
Reputation: dwlamb_001 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
dwlamb_001 dwlamb_001 is offline Offline
Newbie Poster

Re: Formatting Q & A as a block

  #4  
Feb 28th, 2008
Hi Matt,

Thanks! That does the job nicely!

Dan
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb HTML and CSS Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the HTML and CSS Forum

All times are GMT -4. The time now is 5:03 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC