Jump to content

Inline Headers?


Cipater2
 Share

Recommended Posts

So I'm trying to get my headers to display inline on my page, and I cant find a solution that doesn't use either float properties (which wouldn't be flexible in other screen resolutions/zooms) or <br> tags in the HTML? The <br> fix is kind of ugly, and requires doubled <br> tags to create paragraph spaces... which makes me feel a little dirty, kind of like using <b> tags instead of CSS. :)Here's some sample code illustrating what I've tried in my actual page html:With the following code:

<html><head><style type="text/css">div.border {	width: 366px;	padding: 4px;	margin-bottom: 8px;	border: 2px solid gray;}div.example {	width: 350;	margin: 8px auto;	padding: 4px;	border: 1px solid gray;	background: whitesmoke;}h1 {	font-size: 14px;	color: navy;	font-weight: bold}h2 {	font-size: 11px;	margin: 4px 5px 0px 4px;	font-weight: bold;	text-transform: uppercase;	display: inline;	clear: left}p.inline {	margin: 4px;	font-size: 11px;	display: inline;	clear: right}p.normal {	margin: 4px;	font-size: 11px}</style></head><body><div class="border"><h1><P> TAGS w/ display:inline</h1><div class="example"><h2>test header</h2><p class="inline">A bunch of paragraph text goes here, ideally starting directly to the right of the header, and continuing as a normal paragraph would from there.  The actual use of this is shown in the example below.  The sample is enclosed in another box with an H4 of "Shipping," with a header and paragraph for each of the shipping "subheaders".</p><h2>Amount:</h2><p class="inline">Buyer agrees to pay the shipping amount specified by the USPS Shipping Calculator. We do not add extra "handling" fees to our shipping costs, and use the USPS Shipping Calculator to charge as close to actual shipping costs as possible.</p><h2>problem</h2><p class="inline">The problem is that the clear:right property of the paragraphs isn't working.</p></div><p class="normal">As you can see, the above example is close, but the clear:right property doesn't seem to work on the paragraphs; it should be forcing the following header and paragraph pair to start on the next line.</p></div></htm>

I get this as a result:tempss1.jpgBut if I use:

<html><head><style type="text/css">div.border {	width: 366px;	padding: 4px;	margin-bottom: 8px;	border: 2px solid gray;}div.example {	width: 350;	margin: 8px auto;	padding: 4px;	border: 1px solid gray;	background: whitesmoke;}h1 {	font-size: 14px;	color: navy;	font-weight: bold}h2 {	font-size: 11px;	margin: 4px 5px 0px 4px;	font-weight: bold;	text-transform: uppercase;	display: inline;	clear: left}p.inline {	margin: 4px;	font-size: 11px;	display: inline;	clear: right}p.normal {	margin: 4px;	font-size: 11px}</style></head><body><div class="border"><h1><P> TAGS w/ display:inline & <br> tags</h1><div class="example"><h2>test header</h2><p class="inline">A bunch of paragraph text goes here, ideally starting directly to the right of the header, and continuing as a normal paragraph would from there.  The actual use of this is shown in the example below.  The sample is enclosed in another box with an H4 of "Shipping," with a header and paragraph for each of the shipping "subheaders".</p><br><h2>Amount:</h2><p class="inline">Buyer agrees to pay the shipping amount specified by the USPS Shipping Calculator. We do not add extra "handling" fees to our shipping costs, and use the USPS Shipping Calculator to charge as close to actual shipping costs as possible.</p><br><h2>FIX</h2><p class="inline">The only fix I can figure is manually break the line with <br> tags, but I'm loathe to do that as it feels too much like injecting style elements in the HTML, rather than keeping them in my stylesheet...</p><br><p class="inline">Is there any other solution besides using a float property on the headers (which will look horrible in other resolutions and font displays)?</p><br></div><p class="normal">This fix works, but requires using <br> tags.  =_=</p></div></html>

I get this as a result:tempss2.jpgSo... is there a way to make inline <h1-6> tags without resorting to float properties or <br> tags? :)

Link to comment
Share on other sites

clear: right is only used to clear elements that are floated to the right.I don't see why the float property is a problem. It's perfectly flexible.Here's an example:HTML

<div class="example"><h2>Title</h2><p>Paragraph with some text in it.</p><h2>More</h2><p>Another paragraph.</p></div>

CSS

.example { overflow: auto; }.example h2 {  float: left;  clear: left;  padding: 0 1.5em;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...