2013-06-17 19:25, Tom Livingston wrote:
Given this structure:
<div class="sidebar">
<a href="" class="grey-button icon-info">Infographics</a>
<a href="" class="grey-button icon-calc">Tax Credit Calculator</a>
<a href="" class="grey-button icon-faq">Frequently Asked Questions</a>
</div>
It's not really much of a structure: a <div> element (which is
semantically empty by definition) containing three <a> elements
separated only by whitespace (violating accessibility guidelines).
I have the hrefs set to display:table-cell; so as to use
vertical-align:middle; but they are appearing next to each other in
the browser.
That's what display: table-cell means.
I understand why and expect this, but what would be the
proper way to get them each on their own line?
Well, display: table-cell. Or, more robustly, display: block. But this
depends on what other properties you wish to set. Should the links be of
equal width?
But it is best to consider the markup first. The markup you choose
should primarily create acceptable default (non-CSS) rendering.
Secondarily, it should make it easy to achieve your desired rendering;
but then the choice depends on the intended styling.
Wrap them each in a P
for example, or is there a way to do it within the CSS?
Are the links paragraphs? Do you want empty lines between them when CSS
is off? If you use wrappers for the links, use <div> elements, or <li>
elements inside a <ul> element.
Yucca
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
