Databases
StackOverflow2013
Postsdbo
POElaborate custom headings, best practices?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POElaborate custom headings, best practices?
    text
    copied!<p>I'm getting back into CSS after some time away, and I'm wondering how best to tackle this issue:</p> <p><a href="http://i39.tinypic.com/hvwetl.jpg" rel="nofollow">http://i39.tinypic.com/hvwetl.jpg</a></p> <p>I just jumped on board a project that has elaborate custom headings, and I don't know the best practices for these situations. Pictured are two examples of all the information that is being visually included in the <code>h2</code> class. </p> <p>The top heading has an <code>active</code>/<code>inactive</code> image, but when it's put in the actual header text the vertical alignment sinks to the padding of the <code>h2</code> text. But when it's position outside of the <code>h2</code>, it won't dynamically change given then length of heading text.</p> <p>What would I do to improve the structure of this markup?</p> <p>/edit/ So here is the html for the top pictured example:</p> <pre><code> &lt;h2&gt;&lt;strong&gt;Campaign:&lt;/strong&gt; Widgets 2.0 &lt;a class="campaign_status active"&gt;Active&lt;/a&gt;&lt;/h2&gt; &lt;span class="group_link_control"&gt; &lt;a href="edit_campaign.html"&gt;Manage Campaign&lt;/a&gt; &lt;/span&gt; </code></pre> <p>and here is the css for this h2 and the other classes:</p> <pre><code> .admin_content h2 { background: #E7E7E7; width: 817px; height: 16px; padding: 8px; font-weight: normal; float: left; display: inline; } a.campaign_status { margin: -4px 0 0 4px; padding: 2px 6px 3px 6px; color: #f9f9f9; text-decoration: none; line-height: 17px; font-weight: bold; text-shadow: 0px 0px 2px #888; -webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android &lt;1.6 */ -moz-border-radius: 5px; /* FF1-3.6 */ border-radius: 5px; display: inline; } a.campaign_status.active { background: #88C900; } a.campaign_status.inactive { background: #bbb; } span.group_link_control { margin: -24px 18px 0 0; float: right; display: inline; } span.group_link_control a { margin-right: 10px; text-decoration: underline; } </code></pre> <p>mark up for the second header example:</p> <pre><code> &lt;h2 class="admin_content_h2"&gt;Edit actions&lt;/h2&gt; &lt;span class="group_left_control"&gt;&lt;a class="add_action"&gt;Add Action&lt;/a&gt;&lt;/span&gt; &lt;span class="group_link_control group_button"&gt; &lt;label&gt;Duplicate actions from Campaign:&lt;/label&gt; &lt;select class="" name="duplicate actions"&gt; &lt;option&gt;&lt;/option&gt; &lt;option&gt;Widgets 2.0&lt;/option&gt; &lt;option&gt;Widgets 2.1&lt;/option&gt; &lt;option&gt;Widgets 3.0&lt;/option&gt; &lt;/select&gt; &lt;input type="submit" value="Go" /&gt;&lt;/span&gt; </code></pre> <p>css for this example:</p> <pre><code>h2.admin_content_h2 { background: #E7E7E7; width: 817px; height: 16px; padding: 8px; font-weight: normal; float: left; display: inline; } span.group_button { margin-top: -26px; } </code></pre> <ul> <li>shares some classes from first example.</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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