Forum Moderators: not2easy
I am trying to accomplish the visual text layout feat below. Is this even theoretically possible to do using CSS alone?
Here is where the heading text goes, usually one
or two sentences in length. Sometimes the heading
text is so long that it wraps around to a second or
third line.
But here is the indented text goes. It is important
that there be no gap between the header text (above)
and this indented body text. This text needs to fit
snug against the paragraph above -- with no gaps in
between (like you would normally find between
paragraphs).
For some reason, this website will not let me manually indent the second paragraph above (I tried using several spaces per line, but this post deletes them). In the example above, try to visualize the second paragraph with 32px indented margins. You can also view a small text picture example I uploaded here [discoveryarchives.com].
Can this be done without using tables? I have not been able to fit both paragraphs snug up to one another without the attributes of the top paragraph (normal margins) filtering onto the second (indented margins).
In this instance, tables are not an option. I need to implement this effect throughout an entire website -- in some instances up to 100+ times on a single webpage.
If this can't be done, I'd like to know so I don't waste any more time trying to figure this out.
I appreciate any assistance,
Joshua Caleb
I hope that this example will solve your problem...:)
<html>
<head>
<style type="text/css">
<!--
div#one{font-family:arial; font-size:11px; color:#000000; font-weight:bold; text-align:left; margin-left:0;}div#two{font-family:arial; font-size:11px; color:#000000; font-weight:normal; text-align:left; margin-left:32px;}div#three{font-family:arial; font-size:11px; color:#263d9a; font-weight:normal; font-style: oblique;text-align:left; margin-left:38px; margin-top:30px}
//-->
</style>
</head>
<body>
<div id= "one">
Here is where the heading text goes, usually one
or two sentences in length. Sometimes the heading
text is so long that it wraps around to a second or
third line.
</div>
<div id= "two">
But here is the indented text goes. It is important
that there be no gap between the header text (above)
and this indented body text. This text needs to fit
snug against the paragraph above -- with no gaps in
between (like you would normally find between
paragraphs).
</div>
<div id="three">
Just to clarify, I don't want it to look like the example below:
</div>
</body>
</html>
birdbrain
That should solve my problem nicely. Thanks for taking the time to respond! I appreciate it!
Best regards,
Joshua Caleb
