H1 tag causing havoc! CSS help?

  • I am trying to create a custom h1 tag for my blog. If you go to https://www.jonathancrowe.com – you can see my blog posts are H1 tags. I want it to be exactly like that, but I don’t want that line to go all the way to the end. Only as far as the text is for the particular blog post.

    Now when I add the float: left; to the CSS for my H1 tag, it does what I want, but then my blog post content gets all shifted around. Here is a screen shot of the H1 tag I want, but then the BLOG’s CONTENT gets shifted up. https://www.jonathancrowe.com/screenshot.jpg

    here is the CSS I am using for LIVE CURRENT example.

    h1.storytitle {
	margin: 0 0 5px 0;
	font-size:30px;
	text-transform: lowercase;
	font-weight:normal;
	font-style:italic;
	display:block;
	background:url(/headerline.png) repeat-x bottom;
	max-width:500px;
	}

Viewing 5 replies - 1 through 5 (of 5 total)

  • I’d position the titles some other way than float. If you must use a float, try clearing it. Also, you don’t need display:block; for an h1. I’d also get rid of max-width:500px; since width is already controlled by the containing divs like narrowcolumn.

    Thread Starter mrjoncrowe

    (@mrjoncrowe)

    @ iridiax It still didn’t work. Tried clearing, taking away display:block; and nothing. I think I need the block there because it will enable the effect I want. Which is having the Line go only as far as the Text goes.

    Thread Starter mrjoncrowe

    (@mrjoncrowe)

    I haven’t found a solution yet… if anybody wouldn’t mind helping or suggesting something, it would be appreciated.

    An h1 is already a block level element, thus it does not need display:block;

    If you are having float issues, another possible solution is to put this after your floating element:

    <br style="clear: both" />

    Thread Starter mrjoncrowe

    (@mrjoncrowe)

    @iridiax — works! thank you sir! life saver, you are

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘H1 tag causing havoc! CSS help?’ is closed to new replies.