Re: [css-d] Left-aligned navigation buttons with gradient fade on right
Mark,
Sorry, misunderstood the problem part. Essentially, your problem is
not with creating the gradient effect per se, but with layout —
specifically, getting .dummy to occupy the full remaining width (in
which case the gradient goes from top left to top right of that
element without any need for complicating that in itself).
If this is the case, painstakingly describing the constraints of your
layout arrangement verbally might be a problem. Can you put the
relevant code in jsfiddle.net or some similar service so we can have a
look?
If all those assumptions are correct, I would recommend using Nicole
Sullivan's grids system without specifying unit width classes, and
rely on the behaviour of .lastUnit to allow what you currently have as
.dummy to occupy the full remaining width on that line.
Example here:
http://jsfiddle.net/FExyD/1/
…having said that my gradient seems to be breaking on IE7. Can't figure out why!
Regards,
Barney Carroll
barney.carr...@gmail.com
07594 506 381
On 1 September 2011 16:27, Mark Richards wrote:
> Hi,
> I guess I wasn't clear in my original email. I plan to use CSS3 for the
> gradient, and possibly IE filters to make this work in older IE. My problem
> is with the layout. I want the gradient to start at the right edge of the
> menu items and go until the right edge of the parent.
>
>
>
>
> Menu item 1
> Menu item 2
> Menu item 3
>
>
>
>
> If I knew that the width of the menu items was, say, 37% of the .nav parent,
> I could do
>
> .nav {
> background-image: -moz-linear-gradient(left, #FF 37%, @c2 100%);
> }
>
> But I don't know the width of the parent of the table.
>
> If I had a dummy table cell
>
>
>
> Menu item 1
> Menu item 2
> Menu item 3
>
>
>
>
>
> I could do
>
> .dummy {
> background-image: -moz-linear-gradient(left, #FF 0%, @c2 100%);
> }
>
> But I want the text in the main table cells to be on a single line if
> possible, and the cells to shrink-wrap to that text as much as possible. I
> don't know how to size the dummy cell properly, because the number and size
> of menu items is variable.
>
> I am opposed to using any kind of image file at all, both and normal
> background-image.
>
> Mark
>
> On Thu, Sep 1, 2011 at 10:23, Barney Carroll
> wrote:
>>
>> Mark,
>>
>> You can use Microsoft's proprietary filters property to achieve
>> gradients using a similar syntax. As ever, CSS3please.com is the best
>> resource:
>>
>> http://css3please.com#box_gradient
>>
>> Regards,
>> Barney Carroll
>>
>
__
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] Left-aligned navigation buttons with gradient fade on right
Hi,
I guess I wasn't clear in my original email. I plan to use CSS3 for the
gradient, and possibly IE filters to make this work in older IE. My problem
is with the layout. I want the gradient to start at the right edge of the
menu items and go until the right edge of the parent.
Menu item 1
Menu item 2
Menu item 3
If I knew that the width of the menu items was, say, 37% of the .nav parent,
I could do
.nav {
background-image: -moz-linear-gradient(left, #FF 37%, @c2 100%);
}
But I don't know the width of the parent of the table.
If I had a dummy table cell
Menu item 1
Menu item 2
Menu item 3
I could do
.dummy {
background-image: -moz-linear-gradient(left, #FF 0%, @c2 100%);
}
But I want the text in the main table cells to be on a single line if
possible, and the cells to shrink-wrap to that text as much as possible. I
don't know how to size the dummy cell properly, because the number and size
of menu items is variable.
I am opposed to using any kind of image file at all, both and normal
background-image.
Mark
On Thu, Sep 1, 2011 at 10:23, Barney Carroll wrote:
> Mark,
>
> You can use Microsoft's proprietary filters property to achieve
> gradients using a similar syntax. As ever, CSS3please.com is the best
> resource:
>
> http://css3please.com#box_gradient
>
> Regards,
> Barney Carroll
>
>
__
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] Left-aligned navigation buttons with gradient fade on right
Mark, You can use Microsoft's proprietary filters property to achieve gradients using a similar syntax. As ever, CSS3please.com is the best resource: http://css3please.com#box_gradient Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 On 1 September 2011 14:42, Tim Climis wrote: >> I'd like to avoid putting an image in (actually if that's the only > way then >> it's not going to happen). > > There is no way to get a gradient in IE7 without using an image. Or > are you just opposed to using and a background image is okay? > > ---Tim > > __ > 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] Left-aligned navigation buttons with gradient fade on right
> I'd like to avoid putting an image in (actually if that's the only way then > it's not going to happen). There is no way to get a gradient in IE7 without using an image. Or are you just opposed to using and a background image is okay? ---Tim __ 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-d] Left-aligned navigation buttons with gradient fade on right
Hello folks, The site I maintain currently has its navigation in a table (don't ask): Menu item 1 Menu item 2 Menu item 3 The styles currently put .nav at 100% width with a background-color, and apply some borders, etc, on the TDs. The currently selected item has a bg set as well. This results in a display that looks like this |[Menu item 1][Menu item 2][Menu item 2]-| where - represents the solid be for the .nav. We use a table because we need IE7 support and we want the table to take up one line, with evenly-distributed items (the text for each item, and the number of items, is variable for each page). What I'd like is to make it so that to the right of the table, the -- space is filled with a gradient. So if the table was wide enough to fill the parent, there'd be no gradient showing, but if it's not wide enough to fill the parent then from the edge of the table there is a gradient from the .nav bacground-colour to white (or transparent). I tried putting an empty table cell and forcing it to have a large width, but that causes the menu item text to wrap. But I can't just force it to no-wrap because if the table is wide enough then I need it to wrap. I'd like to avoid putting an image in (actually if that's the only way then it's not going to happen). Any suggestions? Mark __ 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/
