Skip navigation
Currently Being Moderated

Applying <h1> format

Jun 7, 2012 5:49 PM

Tags: #help #mac #dreamweaver #code #html5 #dw

When I try to apply <h1> format text by selecting it in the design window, and then clicking Heading 1 in the properties window drop down, The <h1> encloses all of my body elements. How do I get around this? My page has almost no <p></p> tags. I'm thinking that may be the problem. Maybe I need to think of the page more like a text document and break "thoughts" with paragraphs.

 
Replies
  • Currently Being Moderated
    Jun 7, 2012 6:56 PM   in reply to kcfi

    That's not the reason.  If you use H1 tags, you can't just apply it in the middle of a sentence.  So DW is applying it to the entire block.  If you tried highlighting text within p tags then all the text within those p tags would be changed to H1 tags.  H tags are header tags and serve a different purpose than using CSS to style a "span" with a font-weight of bold and font-size of whatever.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 5:21 AM   in reply to kcfi

    Both <h#> and <p> tags are block tags.  Being block tags, they want to sit on their own in a 'block' as opposed to inline tags which can successfully coexist on the same horizontal line.  In other words any block tag will force an apparent line break before and after.  This being the case, you cannot place one block tag inside another block tag, e.g.,

     

    <p>This is <h1>INVALID</h1> code</p>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 5:58 AM   in reply to kcfi

    I try to never restate a default value in my styles.  When you say this -

     

    p {

              margin: 0px 16px 0px 16px;

              padding: 0px;

              font-size: 16px;

              text-align: justify;

              font-weight: normal;

    }

     

    all you really need to say is this -

     

    p {

              margin: 0px 16px 0px 16px;

              font-size: 16px;

              text-align: justify;

    }

     

    (unless you have previously specified a rule that would add padding or weight to a <p> tag by the cascade)

     

    Now - for something like your FAQ, I tend to always use a definition list instead of the generic tags you have used, since it's the perfect sematic container for this particular information.  Thus, I would have -

     

    <dl>

      <h1>Lash-It Frequently Asked Questions</h1>

      <dt>HOW ARE THE CLEATS ATTACHED?</dt>

      <dd>They're self-adhesive. You peel away their backer sheet and press them in place. The tape is 3M Brand VHB (Very High Bond). It's similar to the tapes used to attach body side moldings to cars. It's super tough and sticky.</dd>

      <dt>DO THEY STICK? TEST YOUR SURFACE.</dt>

      <dd>I guarantee they will stick and stay stuck. Follow the installation instructions, and you should have no problems. Make sure that the surfaces you stick the cleats to are clean, dry, and free of any type of surface protectant. Testing with duct tape is an easy way to determine if your surface is ready for Lash-It™ cleats. If duct tapes sticks good, then the cleats will too. If the duck tape doesn't stick, then you need to clean the surface better. See instructions below for what to do to remove surface protectants like 303 Brand UV Protectant.</dd>

      <dt>A WORD OF CAUTION:</dt>

      <dd>On painted surfaces the quality of the adhesion is only as good as the quality of the paint bond. Lash-It™ cleats will stick to paint, but the tension applied to the cleats may eventually pull the paint off of the hull. Recoated polyurethane surfaces are notorious for bonding poorly. In my own experience, I recoated the inside of my wooden canoe with polyurethane, applied new Lash-Its™, and a few of the cleats pulled off. Upon inspection, I found that the cleats stuck impeccably to the poly, it was the new coat poly that failed to adhere to the old coat of poly. I would suggest you sand away any multiple layers of paint or varnish before you apply Lash-It™ cleats.</dd>

    </dl>

     

    Then you could style this FAQ by specifically targeting the component tags.  In other words, you could target the <h1> tag with this selector -

     

    dl h1 { ... }

     

    which would ONLY apply to that FAQ <h1> (assuming you don't have another <h1> tag in another definition list on the page).

     

    And, you can target the FAQ Questions with this selector -

     

    dt { ... }

     

    thereby adding clarity to your CSS and avoiding the need to create additional classes.

     

    Finally you get the benefit of the inherent styling of the definition list (the indentation), and you overcome the invalid/awkward usages you have in your current markup (multiple <br> tags, and improperly closed <p> tags).

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 9:04 AM   in reply to kcfi

    You have this -

     

    <p><strong>HOW ARE THE CLEATS ATTACHED?</strong><br>

       They're self-adhesive. You peel away their backer sheet and press them in place. The tape is 3M Brand VHB (Very High Bond). It's similar to the tapes used to attach body side moldings to cars. It's super tough and sticky.<p>

     

    Note that there is no </p>.  Now - this will work because when the browser sees the second <p> tag, it infers that there must be a </p> preceding it, but it will not validate like that (at least I don't think it will).  So, all open tags must be closed (although some tags are self closing like <img> or <br>).

     

    Can I override the inherent styling of the definition list?

    Yes, sure.  CSS gives you this ability.  And your interpretation of the tags is mostly correct - I believe DT is Definition Title.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 12:14 PM   in reply to kcfi

    DL= Definition List

    DT= Definition Term

    DD= Definition Description

     

    Styling Definition Lists

    http://www.maxdesign.com.au/articles/definition/

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/


     
    |
    Mark as:
  • Currently Being Moderated
    Jun 9, 2012 12:11 AM   in reply to kcfi

    Add manually

     

     

     

    body {

        margin: 0px;

        padding: 0px;

        background-color: #69C;

    }

     

    #content{

    width:35em;

    background-color: #fafafa;

    border: 2px solid #000;

    margin-top: 50px;

    margin-right: auto;

    margin-bottom: 0px;

    margin-left: auto;

    vertical-align: top;

    padding: 12px;

    }

     

    h1,h2,h3,h4,h5,h6 {

        font-family: "Times New Roman", Times, serif;

        color: #C10000;

        display: inline;

        margin: 0px;

        padding: 0px;

        vertical-align: top;

    }

     

    p {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 1.2em;

    color: #333333;

    margin: 0px;

    line-height: 1.1em;

    display: inline;

    padding: 0px;

    }

    </style>

    </head>

    <body>

     

    <div id="content">

      <p><strong>Headings 1 thru 6</strong><br />

      vertical-align: top; was added to each heading to show the space.</p>

      <h1>H1</h1>

      <h2>H2</h2>

      <h3>H3</h3>

      <h4>H4</h4>

      <h5>H5</h5>

      <h6>H6</h6>

      <p> display: inline; was added which removes the line break  so all the headings can appear on the same line.</p>

    </div>

     

    </body>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points