Tue, 2010-08-24 19:35
I am curious as to why the first in a series will be booted down to the next line when set to inline. And the rest will flow normally?
I am assuming because headings are not supposed to be done this way. But if I want to emphasize importance of specific ingredients in a product with outbound links and such . . . is there a way to make this work?
Thanks for your time.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>What is Wrong with This?</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type = "text/css"> #master_container { width:800px; margin:0px auto; } body { font-family:arial; } h2.tag { display:inline; font-size:1em; margin: 0 0 0 0; padding: 0 0 0 0; } </style> </head> <body> <div id = "master_container"> <h1>How to do XYZ</h1> <p class = "text"> Why is the first heading in a series of headings kicking down to the next line? But the rest remain inline with all the margins and padding set to 0? <h2 class = "tag">consectetur</h2> adipiscing elit. Praesent tincidunt sagittis dui quis faucibus. Aenean vitae arcu vel nibh scelerisque varius. Vivamus nunc eros, mollis ut viverra eget, volutpat eu sem. Integer interdum metus in dui porta malesuada. Suspendisse et rhoncus ante. Nulla ut egestas elit. Donec at ligula massa. Praesent id consequat erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vitae leo lorem, luctus pretium quam. <h2 class = "tag">Duis vestibulum</h2>, neque non tempus euismod, nunc nisl ultricies <h2 class = "tag">justo</h2>, vitae dignissim nunc ipsum eu justo. Nulla sed mi diam, sit amet gravida turpis. Etiam tempor nisi tincidunt erat commodo porttitor. Donec vulputate, ipsum et egestas placerat, dui purus imperdiet erat, id placerat erat ante sed mi. Mauris blandit mauris eu felis tristique pharetra. Vestibulum pretium posuere orci, et fermentum metus posuere sit amet. Praesent congue fermentum auctor. </p> </div> </body> </html>
Tue, 2010-08-24 20:08
#1
A P element shouldn't
A P element shouldn't contain a heading element. STRONG & EM should be used to add emphasis. SPAN can also be used to change the appearance without saying anything about the content (unlike the 'phrase' elements, e.g. ABBR).
If you want headings and associated text to run together you can do
.wrapper { margin: 1em 0; } h2, p { display: inline; } <div class="wrapper"> <h2>Most awesome widget:</h2><p>The most awesomest widget available today, available in red, blue <em>AND</em> green. <strong>Price: $1,000,000ea.</strong></p> <p>10% off if you order 10 today.</p> </div>
Tue, 2010-08-24 20:12
#2
I appreciate the Help
I appreciate the advice.
The words listed are areas I want to emphasize. Thus the <h2>
I supposed I am going about this in a hair brained way.
Tue, 2010-08-24 21:52
#3
Optional tags and the DOM
Since the end tag for the p element is optional, the browser supplies it. Thus when you have <p>before heading <h1>heading</h1> after heading</p> The browser closes the p when building the DOM
<p>before heading</p> <h1>heading</h1> after heading</p> <!-- this is now anonymous inline text the </p> may be ignored or treated as character data, since there is no opening tag, depending on the browser -->
cheers,
gary
Wed, 2010-08-25 08:20
#4
Crushingly Hugo stated: "One
Crushingly Hugo stated: "One should be aware of basic well formed markup structure by now" 