WordPress.org

Ready to get started?Download WordPress

Forums

H1 tag causing havoc! CSS help? (6 posts)

  1. mrjoncrowe
    Member
    Posted 5 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 5 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 5 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 5 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 5 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 5 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic