3 Replies Latest reply on Jul 6, 2006 10:40 AM by Newsgroup_User

    CSS Query

    Level 7
      Hi,

      I have a list of H2 elements on a page inside a div tag. I want the first
      one of these to have a 20px top margin applied to it but not to any of the
      others. Can anyone tell me the pseudo code to get this working?

      I've tried :

      .product h2.1{
      margin: 20px 0px -5px 0px;
      }

      but that doesn't work.


        • 1. Re: CSS Query
          Level 7
          h2.special { margin-top:20px; }
          ...

          <h2 class="special">

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "Mintyman" <mintyman@ntlworld.com> wrote in message
          news:e8jdg6$p34$1@forums.macromedia.com...
          > Hi,
          >
          > I have a list of H2 elements on a page inside a div tag. I want the first
          > one of these to have a 20px top margin applied to it but not to any of the
          > others. Can anyone tell me the pseudo code to get this working?
          >
          > I've tried :
          >
          > .product h2.1{
          > margin: 20px 0px -5px 0px;
          > }
          >
          > but that doesn't work.
          >


          • 2. Re: CSS Query
            Level 7
            Mintyman wrote:
            > Hi,
            >
            > I have a list of H2 elements on a page inside a div tag. I want the
            > first one of these to have a 20px top margin applied to it but not to
            > any of the others. Can anyone tell me the pseudo code to get this
            > working?
            >
            > I've tried :
            >
            > .product h2.1{
            > margin: 20px 0px -5px 0px;
            > }

            Is the first h2 the first element in that DIV?
            Because if it is the case, why not using "padding-top" on the DIV instead?
            That way there is no need to use a class or ID on the heading.
            The :first-child pseudo-class would work too in this case but support for
            this is not that great ;)

            --
            Thierry
            Articles and Tutorials: http://www.TJKDesign.com/go/?0
            The perfect FAQ page: http://www.TJKDesign.com/go/?9
            CSS-P Templates: http://www.TJKDesign.com/go/?1
            CSS Tab Menu: http://www.TJKDesign.com/go/?3


            • 3. Re: CSS Query
              Level 7
              On Thu, 6 Jul 2006 17:26:33 +0100, "Mintyman" <mintyman@ntlworld.com>
              wrote:

              >I have a list of H2 elements on a page inside a div tag. I want the first
              >one of these to have a 20px top margin applied to it but not to any of the
              >others. Can anyone tell me the pseudo code to get this working?

              >.product h2.1{
              > margin: 20px 0px -5px 0px;
              > }


              Seems like it would be easier and cleaner to give the <div> 20px of top
              padding, but given your example, you cannot start a class or id name
              with a digit. Try it this way:


              .product h2.first{
              margin: 20px 0px -5px 0px;
              }

              Then, for the first heading:

              <h2 class="first">

              Gary