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.
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.
I'm in the process of correcting my misuse of the H tags. I still think the problem is that I don't have the text separated enough with p tags. It's true that if I change one word in the paragraph to H1, then the entire paragraph changes to H1, and I think that is what you are telling me. So I think I need to put p tags around the text that I will change to H1, and have the other text enclosed with p tags. That's what is working on my page.
A bit more messing with my page makes me realize that I should put very little styling on the p and h tags, and use CSS to change the look and position of selected text.
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>
I think I understand. Here's what I've done. I applied simple styles to my <p> and <h1> tags:
p {
margin: 0px 16px 0px 16px;
padding: 0px;
font-size: 16px;
text-align: justify;
font-weight: normal;
}
h1 {
margin: 0px 16px 0px 16px;
padding: 0px;
font-size: 16px;
text-align: justify;
font-weight: normal;
}
Then I used H1 and p like this on my page. I overrode the h1 format with my center_text_red ID:
<h1 id="center_text_red">Lash-It Frequently Asked Questions</h1>
<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><br>
<strong>DO THEY STICK? TEST YOUR SURFACE.</strong><br>
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.<p><br>
<strong class="redtext">A WORD OF CAUTION:</strong><br>
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.</p>
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).
You say: "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)."
Can I override the inherent styling of the definition list? And please tell me which/where you see improperly closed <p> tags? I don't doubt you, I just don't know what I'm looking for.
DL means Definition List. Is DT Definition Text, and DD Definition Detail?
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.
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
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>
North America
Europe, Middle East and Africa
Asia Pacific