SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning headers

    Hello everybody!

    Can anybody help me out with this one:

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    So far so good Now i would like the position the Heading 2 a few px higher then the default position.

    Anybody??

  2. #2
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean you want to change the default margin of the H1's?

    HTML Code:
    h1 {
      margin: 0px;
    }
    Adjust to taste

  3. #3
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by platinum
    Do you mean you want to change the default margin of the H1's? [img]images/smilies/smile.gif[/img]
    HTML Code:
    h1 {
    margin: 0px;
    }
    Adjust to taste [img]images/smilies/biggrin.gif[/img]
    Allmost :-) I want to decrease the space between the two headers.

    h1 {
    margin: -10px;
    }

    Doesn't work

  4. #4
    SitePoint Enthusiast siusai's Avatar
    Join Date
    Jan 2002
    Location
    Richmond, Canada
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how about this:
    Code:
    h1, h2 {
       margin: 0px;
       padding: 0px
    }

  5. #5
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siusai
    how about this:
    Code:
    h1, h2 {
    margin: 0px;
    padding: 0px
    }
    Much better! Thanks a lot

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,300
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What you really need to do is reduce the bottom margin if the h1 and then reduce the top margin of the h2.

    Remember that the vertical margins are set by the element with the biggest margin. So setting one element to margin:0 will still leave the other element's margin, which will then be enforced.

    So you could just the top and bottom margins (if you wanted) instead of all the margins.

    Code:
    <style type="text/css">
    <!--
    h1 {
     background-color: #FF0000;
     margin-bottom:0px;
    }
    h2 {
     margin-top:0px;
     background-color: #99CCFF;
    }
    -->
    </style>
    As long as h2 follows h1 then there will be no gap.

    Paul


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
  •