SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Heading tags

  1. #1
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Heading tags

    How can I use <H> tags without a a line break being added after it. Does anyone know a way to get around that blank line that is added under the words that are contained in the heading tags?

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 321web
    How can I use <H> tags without a a line break being added after it. Does anyone know a way to get around that blank line that is added under the words that are contained in the heading tags?
    Hi,

    Heading tags are block level elements by default and puts a space before and after, much like the p tag, another block level element. You can change the display property with css to inline and this will get rid of the space around it.
    Code:
    <h1 style="display: inline;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg
    -xDev

  3. #3
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you can use css, perhaps an alternative would be defining a line height. You could also make your margins and padding 0, but there are times when you might not want that.
    Code:
    hX {line-height: 1; }
    I had a similar problem with the way IE rendered my < h1 > tags.
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.

  4. #4
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by firegryphon3207
    I think you can use css, perhaps an alternative would be defining a line height. You could also make your margins and padding 0, but there are times when you might not want that.
    Code:
    hX {line-height: 1; }
    I had a similar problem with the way IE rendered my < h1 > tags.
    Margins and padding set at 0 won't work and neither will line-height: 0. Reason? Heading tags are block level elements. By default, they are set as if you had this style - display: block;

    Code:
    <h1 style="display: inline;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg
    <h1 style="margin: 0px; padding: 0px;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg
    <h1 style="line-height: 0px;">Hello World</h1> <br />dfgdfsgdfg dsfgsdfg
    The 3 tests above is an example of what I'm talking about. There is hack that you can use though. That's to set the top and bottom margins to minus something.

    Link:
    http://www.w3.org/TR/REC-html40/stru...l.html#h-7.5.3

    -xDev

  5. #5
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't set the line height to "0" I set it to 1.
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.

  6. #6
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by firegryphon3207
    I didn't set the line height to "0" I set it to 1.
    No offence but setting it to 1 won't work just as surely as setting it to 0 won't work. What he was looking for was a way to get rid of the whitespace or newline that divides an H tag from it's parent or child elements. As long as the display property remains block, you have no way around this behaviour without resorting to a -1,2,3,4 margin hack. Set it to display as inline and voila, you have no more line-break.

    -xDev

  7. #7
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xDev
    No offence but setting it to 1 won't work just as surely as setting it to 0 won't work. What he was looking for was a way to get rid of the whitespace or newline that divides a H tag from it's parent or child elements. As long as the display property remains block, you have no way around this behaviour without resorting to a -1,2,3,4 margin hack. Set it to display as inline and voila, you have no more line-break.

    -xDev
    you are missing my point.
    Quote Originally Posted by w3c
    If the property is set on a block-level element, it specifies the minimal line height for all lines of text generated by the element.
    I pointed out an alternative because it's not always appropriate to change block level elements into inline elements. You may still want to retain certain other characteristics of the block level element.
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.

  8. #8
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by firegryphon3207
    you are missing my point.
    I pointed out an alternative because it's not always appropriate to change block level elements into inline elements. You may still want to retain certain other characteristics of the block level element.

    firegryphon3207,

    Point well taken. It is desirable in most situations to keep the ability to apply padding and width on a block element. I played around with line-height and margin-bottom to get this result:

    Code:
    <h1 style="line-height:0.4em; 
      margin-bottom: -0.4em;">Hello World</h1> 
    <br />dfgdfsgdfg dsfgsdfg
    -xDev

  9. #9
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xDev
    firegryphon3207,

    Point well taken. It is desirable in most situations to keep the ability to apply padding and width on a block element. I played around with line-height and margin-bottom to get this result:

    -xDev
    The good thing is now he knows how to do the same to whatever element is underneath it to keep it close to the <h> element. Assuming they aren't nested or something.
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.

  10. #10
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. Now how much will H tags really help my search engine rankings?

  11. #11
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With google? Probably not a major effect.
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •