•
•
•
•
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
![]() |
•
•
Join Date: Feb 2008
Posts: 19
Reputation:
Rep Power: 1
Solved Threads: 0
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:
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
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:
Is there any way around this? Whoever devised this original premise of a blank line between paragraphs should be shot.
Q: Question
A: Answer
Q: Question
A: Answer
For each question and answer, I want a hanging indent:
html Syntax (Toggle Plain Text)
p.hang { margin-left: 1in; text-indent: -0.25in }
To keep the Q & A as one block, I'm using <br /> instead of </p> so there's no gap. I've tried defining
html Syntax (Toggle Plain Text)
ans { position: relative; margin-left: X } X has been some negative number using px, pt or inches
Here's the full code of a typical block right now:
html Syntax (Toggle Plain Text)
<p class="hang"> Q: Should I have a baby after 35?<br /> <span class="ans">A: No, 35 children is enough.</span> </p>
Is there any way around this? Whoever devised this original premise of a blank line between paragraphs should be shot.
•
•
Join Date: Jan 2008
Location: Bangalore, India
Posts: 331
Reputation:
Rep Power: 0
Solved Threads: 31
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 943
Reputation:
Rep Power: 5
Solved Threads: 47
This seems to work fine for me (Opera):
HTML Syntax (Toggle Plain Text)
<html> <head> <title>Hanging indents..</title> <style type="text/css"> p.question, p.answer { margin-left:1.2em; text-indent:-1.2em; padding-bottom:0; padding-top:0; margin-top:0; } p.question { margin-bottom:0; } p.answer { margin-bottom:1em; } </style> </head> <body> <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> <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> <p class="question">Q: etc...</p> <p class="answer">A: etc....</p> <p class="question">Q: etc...</p> <p class="answer">A: etc....</p> </body> </html>
If it only works in Internet Explorer; it doesn't work.
![]() |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Similar Threads
- IE quirk-no images showing on my index page (HTML and CSS)
- Struggling with Captcha (PHP)
- Confused & frustrated (Web Developers' Lounge)
- What is DIV & SPAN (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: CSS alignment
- Next Thread: HTML in Email


Linear Mode