WordPress.org

1. mrjoncrowe
   Member
   Posted 3 years ago #

   I am trying to create a custom h1 tag for my blog. If you go to http://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. http://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;
   	}

2. iridiax
   Member
   Posted 3 years ago #

   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.

3. mrjoncrowe
   Member
   Posted 3 years ago #

   @ 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.

4. mrjoncrowe
   Member
   Posted 3 years ago #

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

5. iridiax
   Member
   Posted 3 years ago #

   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" />

6. mrjoncrowe
   Member
   Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.