Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to display a header and paragraph separated by only one line break 1

Status
Not open for further replies.
gnubie

gnubie

Programmer
Apr 16, 2002
103
US
I am trying to find out the PREFERRED method to display a header <h1> followed by a paragraph <p> where the paragraph starts on the next line. As shown.


HEADER TEXT
Paragraph text


Not:

HEADER TEXT

Paragraph text


This is the code that I think should work, but the <p> causes a line break before the paragraph. I don't want to have to have omit the <p> of 1st paragraph after a header.

[tt][blue]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Inline Test</title>
<style type="text/css">
h1 {display: inline;}
</style>
</head>
<body>
<h1>Header</h1>
<p>Line 1</p>
</body>
</html>
[/blue]
[/tt]

Is there any way to use the HTML as is, but change the CSS to accomplish my goal?

BTW, I know I can futz around by doing an h1 display: inline, followed by a <br>, followed by plain text (no <p>) but that seems like such a hack.

I also tried display: compact and run-in, but it didn't help.
 
Sort by date Sort by votes
After more experimentation, I came up with this solution which achieves the goal. Let me know if you come up with anything better.

[tt][blue]
p {
margin-top:0;
margin-bottom: 1em;
}
h1,h2,h3 {
margin-top:0;
margin-bottom:0;
}
[/blue]
[/tt]
 
Upvote 0 Downvote
Your second solution is perfect, there is no better way of dealing with it. There are default margins on elements, which define the spacing between elements and you removed them. You could be more specific and try with the adjacent selectors (applying the rules only when the elements appear next to each other) to make sure that the gaps are nullified only when the specific paragraph following h element occurs. However this method would then not work in IE6.
Code: 
h1 + p {
  margin-top: 0;
  /* this will only affect a paragraph that immediately follows h1 */
}
Also, before using made up values such as compact and run-in for display, I suggest you look up an online reference on CSS (from W3 for instance) to learn what the possible values are for specific properties.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thanks for the explanation and tip.

I did checkout the references regarding compact and run-in and found it to be too brief. Including my favorite, W3C. It pretty much says "... depending on the context, blah blah. I wanted to know what context caused what behavior. Sigh. I'll keep looking.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
640
PeDa
PeDa
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
689
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
621
bdwilcox
bdwilcox
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
624
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
170
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top