Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Making my h1 and h2 text vertically closer to one another.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25822
    BossChase
    Member

    Right now there is a huge gap between my h1 and h2 text in the header of my page. I can’t figure how how to get them closer to one another.

    CSS
    [HTML]
    #header { background:url(/assets/images/header.png) no-repeat; height: 174px; width: 650px; margin: 0 auto; margin-top: 0px; margin-bottom: 0px;
    }

    h1 {
    font: Times New Roman, Times, serif, sans-serif, Arial;
    font-size: 40px;
    color:#CCCCCC;
    text-transform:capitalize;
    text-align:center;
    padding-top: 50px;
    }
    h2 {
    font: Times New Roman, Times, serif, sans-serif, Arial;
    font-size:10px;
    color:#CCCCCC;
    text-align: center;
    }
    [/HTML]

    HTML
    [HTML]
    <div id="header">
    <h1>TEXT</h1>
    <h2>Text Text Text Text</h2>
    </div>
    [/HTML]

    Any idea how i can fix it?

    Here is a link to my test page.
    http://www.gamerunion.com/test.html

    #62498
    BossChase
    Member

    Fixed it on my own. by adding a class for line height.

    h1.small {line-height: 20%}
    h2.small {line-height: 10%}

    <h1 class="small">Hello</h1>
    <h2 class="small">Hello</h2>

    #62520
    selain
    Member

    Why not set the padding and margin on both headings to 0px (except for your top-padding), and set your line-height for both in px values?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.