Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there a bulletproof concept to get h1 and p exact on one and the same (base)line?
    primarykey
    data
    text
    <p>See this page at > <a href="http://www.tvdiever.nl/test" rel="nofollow" >www.tvdiever.nl</a></p> <p>HTML:</p> <pre><code>&lt;div id="slogan"&gt; &lt;h1 id="site-name"&gt;&lt;span&gt;&lt;/span&gt;&lt;txp:site_name /&gt;&lt;/h1&gt; &lt;p id="site-slogan"&gt;&lt;span&gt;&lt;/span&gt;&lt;txp:site_slogan /&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>/* @fontface! */ /* all fine in all browsers mac or windows */ /* h1 and p have more or less the same baseline by giving h1 a line-height of 120% ... */ #slogan { height: 3.7em; width: 960px; background-color: #220082; float: left; padding-top: .3em; /* to get h1 and p more or less in the middle of the box! */ } h1#site-name { margin: 0 0 0 20px; padding: 0; color: #fff; font: normal normal 2.8em/120% FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; display: inline !important; vertical-align: text-bottom; float: left; } p#site-slogan { color: #fff; font: normal normal 1.5em/2.8em FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; margin: 0; padding: 0; display: inline !important; vertical-align: text-bottom; float: left; } /* end @fontface! */ </code></pre> <p>Well ... it's working, after a lot of tweaking ... by giving h1 a line-height of 120% (!?), p a line-height of 2.8em, which is the font-size of h1 (that makes sense!) ... and of course give both elements display inline ...</p> <p>The question is: is there a bulletproof method to bring h1 and p exact on the same (base)line whatever fontsize I give them?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload