[css-d] display:table-cell;
Given this structure: div class=sidebar a href= class=grey-button icon-infoInfographics/a a href= class=grey-button icon-calcTax Credit Calculator/a a href= class=grey-button icon-faqFrequently Asked Questions/a /div 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. I understand why and expect this, but what would be the proper way to get them each on their own line? Wrap them each in a P for example, or is there a way to do it within the CSS? Thanks -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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/
Re: [css-d] display:table-cell;
Yes, I would wrap in a p or in a li (replace the div with a ul in this case). Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jun 17, 2013, at 11:25 AM, Tom Livingston wrote: Given this structure: div class=sidebar a href= class=grey-button icon-infoInfographics/a a href= class=grey-button icon-calcTax Credit Calculator/a a href= class=grey-button icon-faqFrequently Asked Questions/a /div 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. I understand why and expect this, but what would be the proper way to get them each on their own line? Wrap them each in a P for example, or is there a way to do it within the CSS? Thanks -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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/ __ 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/
Re: [css-d] display:table-cell;
2013-06-17 19:25, Tom Livingston wrote: Given this structure: div class=sidebar a href= class=grey-button icon-infoInfographics/a a href= class=grey-button icon-calcTax Credit Calculator/a a href= class=grey-button icon-faqFrequently 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/
Re: [css-d] display:table-cell;
On 6/17/13 9:25 AM, Tom Livingston wrote:
Given this structure:
div class=sidebar
a href= class=grey-button icon-infoInfographics/a
a href= class=grey-button icon-calcTax Credit Calculator/a
a href= class=grey-button icon-faqFrequently Asked Questions/a
/div
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. I understand why and expect this, but what would be the
proper way to get them each on their own line? Wrap them each in a P
for example, or is there a way to do it within the CSS?
Working in the dark here, as I'm not entirely sure what you are trying to do.
An alternative way of vertically aligning a single line of text is to
increase the line height. Here's some code that I use, albeit in a set of list
items, as has been suggested. It should work for your situation, too, I hope.
Just change the line height to your liking:
.sidebar a {
display: block;
border: solid transparent;
border-width: thin 0;
padding: 0 20px;
padding: 0 1.25rem;
font-size: inherit;
font-weight: inherit;
line-height: 2;
text-decoration: none;
color: inherit;
white-space: nowrap;
}
--
Cordially,
David
__
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/
Re: [css-d] display:table-cell;
On Mon, Jun 17, 2013 at 1:36 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2013-06-17 19:25, Tom Livingston wrote: Given this structure: div class=sidebar a href= class=grey-button icon-infoInfographics/a a href= class=grey-button icon-calcTax Credit Calculator/a a href= class=grey-button icon-faqFrequently 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). Thanks Yucca. I have since changed the structure and address the accessibility issue you mentioned. Thanks to others as well. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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/
