Re: [css-d] vertical centering of multi-line text
On 9/06/2009, at 8:40 AM, David Laakso wrote:
> Debbie Campbell wrote:
>> In this page:
>>
>>
>>> http://www.redkitecreative.com/projects/fink/expertise.php
>>>
>>
>> I'm using display: table-cell and vertical-align for the paragraph
>> text
>> to the right of each thumbnail image, but this isn't working in
>>
>
> Umm. Don't exactly know. Maybe???:
> .content-list-block p {border: 1px solid red;
> /*margin: 0;*/ margin: 0;padding-top: 18px;
> /*padding: 0;*/
> font-weight: bold;
> font-size: 1.1em;
> display:table; line-height: 1;
> /*height: 54px;*/
> /*line-height: 1.3em;*/
> /*display: table-cell;vertical-align: middle;*/
> }
> Please see:
Another option is inline-block...
.content-list-block img {
display: -moz-inline-box; /* only for FF2 backwards
compatibility */
display: inline-block; /* change display */
float: none; /* remove float as is forces display:
block. Not
required if it's inline-block. */
margin-right: 10px; /* Might as well be pixels if the
container is */
vertical-align: middle; /* set vertical align */
}
.content-list-block p {
display: -moz-inline-box; /* only for FF2 backwards
compatibility */
display: inline-block; /* change display */
padding-top: 0; /* reset padding */
padding-bottom: 0;
vertical-align:middle; /* set vertical align */
width: 210px; /* Set a width to your inline-block. */
}
You can make inline-block work in < IE8 by setting display to inline
and forcing hasLayout (in IE only stylesheet. e.g.
.content-list-block p, .content-list-block img { display: inline;
zoom: 1; }
See: http://snadden.com/sandbox/expertise.html
Cheers, Tim
__
css-discuss [cs...@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] vertical centering of multi-line text
That works - thank you very much!
--
Debbie Campbell
Web Developer
Red Kite Creative LLC
d...@redkitecreative.com
www.redkitecreative.com
(970) 372-2125
David Laakso wrote:
> Debbie Campbell wrote:
>> In this page:
>>
>>
>>> http://www.redkitecreative.com/projects/fink/expertise.php
>>>
>>
>> I'm using display: table-cell and vertical-align for the paragraph
>> text to the right of each thumbnail image, but this isn't working in
>> Safari/Win; the is floated all the way left and the thumbnail
>> is displayed below the div.
>>
>> I can't use line-height as a way to center because one of the
>> paragraph elements has two lines. Can someone help?
>>
>>
>
> Umm. Don't exactly know. Maybe???:
> .content-list-block p {border: 1px solid red;
> /*margin: 0;*/ margin: 0;padding-top: 18px;
> /*padding: 0;*/
> font-weight: bold;
> font-size: 1.1em;
> display:table; line-height: 1;
> /*height: 54px;*/
> /*line-height: 1.3em;*/
> /*display: table-cell;vertical-align: middle;*/
> }
> Please see:
>
>
>
>
__
css-discuss [cs...@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] vertical centering of multi-line text
Debbie Campbell wrote:
> In this page:
>
>
>> http://www.redkitecreative.com/projects/fink/expertise.php
>>
>
> I'm using display: table-cell and vertical-align for the paragraph text
> to the right of each thumbnail image, but this isn't working in
> Safari/Win; the is floated all the way left and the thumbnail is
> displayed below the div.
>
> I can't use line-height as a way to center because one of the paragraph
> elements has two lines. Can someone help?
>
>
Umm. Don't exactly know. Maybe???:
.content-list-block p {border: 1px solid red;
/*margin: 0;*/ margin: 0;padding-top: 18px;
/*padding: 0;*/
font-weight: bold;
font-size: 1.1em;
display:table; line-height: 1;
/*height: 54px;*/
/*line-height: 1.3em;*/
/*display: table-cell;vertical-align: middle;*/
}
Please see:
__
css-discuss [cs...@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] vertical centering of multi-line text
2009/6/8 Debbie Campbell > > http://www.redkitecreative.com/projects/fink/expertise.php > > I'm using display: table-cell and vertical-align for the paragraph text > to the right of each thumbnail image, but this isn't working in > Safari/Win; the is floated all the way left and the thumbnail is > displayed below the div. Debbie, I don't have Safari Win, but what if the p gets a width? Ingo __ css-discuss [cs...@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-d] vertical centering of multi-line text
In this page: > http://www.redkitecreative.com/projects/fink/expertise.php I'm using display: table-cell and vertical-align for the paragraph text to the right of each thumbnail image, but this isn't working in Safari/Win; the is floated all the way left and the thumbnail is displayed below the div. I can't use line-height as a way to center because one of the paragraph elements has two lines. Can someone help? -- Debbie Campbell __ css-discuss [cs...@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] What's your preference -- fluid, elastic, or fixed?
Glow wrote: > So, just out of curiosity -- what's your particular preference and > why? Screens and UA windows come in all shapes and sizes and on ever more devices. The web is flexible, and so am I - with mediaqueries to catch edge cases for even more flexibility in the most capable User agents. That doesn't mean everything has to be flexible, as it's usually not much of a problem to mix flexible with fixed and 'em'-sized. It all depends on the job at hand and what/who it's targeted at. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@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] What's your preference -- fluid, elastic, or fixed?
I normally work with fixed layouts because I find that I have more control over the ultimate appearance of the design. But lately I'm becoming more interested in fluid or elastic layouts because of their greater accessibility. So, just out of curiosity -- what's your particular preference and why? Peg ambientglow Hi Peg, I have wrestled with this same issue since I started doing web work 2 years ago. Like you, I used to always use fixed layouts because I liked the control. But I felt like I was missing something. So after playing with both fluid and elastic on my last project, I have finally settled on elastic. I feel that elastic tends to hold together better when you run into different screen sizes and screen resolutions. With fluid, the design just seems to stretch out of control and didn't hold together. I guess that's why they call it fluid. It tends to spill out and cover what ever container size you give it. Tommy __ css-discuss [cs...@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/
