Re: [css-d] centering issue
Perfectly. Thanks. Makes sense. And I'll take "close" as a personal
accomplishment no matter how far it really was. :-).
On Saturday, August 8, 2015, Philippe Wittenbergh wrote:
>
> > On Aug 8, 2015, at 22:36, Tom Livingston > wrote:
> >
> > Because 100% couldn't be calculated because the parent was a percentage?
> > '100% of what' kind of thing?
>
> Close… :-)
>
> The physical parent's width is known and can be computed, no problem
> (parent in the source; in this case the ``); in “normal” circumstances,
> the percentage width on the child can be computed. However, in your case,
> there are some more (virtual) elements between the `a` and the `li`.
>
> from your original message
> > a{
> > display: table-cell; this
>
> Per css 2.1:17.2.1, browsers will generate the missing elements as
> anonymous table objects (,); that element has a
> width of `auto` - for tables that means the width depends on the width of
> the cell(s). Then the percentage width on the `a` cannot be resolved
> (computed); it is undefined - see CSS2.1:10.2.
>
> But if you set the width of the `a` to `inherit`, then yes everything
> falls in place, as the width of the `li` is already computed, and that is
> the value that cascades through.
>
> (hope this is readable English)
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
>
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
__
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] centering issue
> On Aug 8, 2015, at 22:36, Tom Livingston wrote:
>
> Because 100% couldn't be calculated because the parent was a percentage?
> '100% of what' kind of thing?
Close… :-)
The physical parent's width is known and can be computed, no problem (parent in
the source; in this case the ``); in “normal” circumstances, the percentage
width on the child can be computed. However, in your case, there are some more
(virtual) elements between the `a` and the `li`.
from your original message
> a{
> display: table-cell; this
Per css 2.1:17.2.1, browsers will generate the missing elements as anonymous
table objects (,); that element has a width of `auto`
- for tables that means the width depends on the width of the cell(s). Then the
percentage width on the `a` cannot be resolved (computed); it is undefined -
see CSS2.1:10.2.
But if you set the width of the `a` to `inherit`, then yes everything falls in
place, as the width of the `li` is already computed, and that is the value that
cascades through.
(hope this is readable English)
Philippe
--
Philippe Wittenbergh
http://l-c-n.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] centering issue
Because 100% couldn't be calculated because the parent was a percentage? '100% of what' kind of thing? On Saturday, August 8, 2015, Philippe Wittenbergh wrote: > > > On Aug 8, 2015, at 01:13, Tom Livingston > wrote: > > > > OK, well after some more poking around, width: inherit; on the 'a' > > fixed my issue. Thanks if you looked… > > But do you know / understand why ? > – it is a good thinking exercise in the summer heat :-) > > Correct answer wins a cookie and a glass of cold water with one ice cube. > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com/ > > > > > > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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] centering issue
> On Aug 8, 2015, at 01:13, Tom Livingston wrote: > > OK, well after some more poking around, width: inherit; on the 'a' > fixed my issue. Thanks if you looked… But do you know / understand why ? – it is a good thinking exercise in the summer heat :-) Correct answer wins a cookie and a glass of cold water with one ice cube. Philippe -- Philippe Wittenbergh http://l-c-n.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] Centered image
> On Aug 8, 2015, at 15:10, Martin Skjöldebrand wrote:
>
> As can be seen here: www.tyresoschack.se there is an overlay image that seeks
> to explain how to get the menu on the site. It's only displayed on the first
> visit.
>
> ….
>
> However as you can see the image is centered on the page rather than left
> aligned as it is here: https://demo.gavick.com/joomla25/writer/
>
> I've been fiddling with the code, but only managed to make the situation
> worse
> ... Does anyone have an idea what can make the image left-aligned? I shold
> also mention that the image itself is the same width on the two sites.
Take a good look at the whole background rule:
yours:
background: rgba(0,0,0,.75)
url('/joomla25/writer/templates/gk_writer/images/overlay-img.png') no-repeat
100px center;
the tyresö schackklubb site:
background: url("overlay-img.png") no-repeat scroll 87% 30px rgba(0, 0, 0,
0.75);
The background-position is different. Yours ask fo putting the image 100px from
the left, centred vertically. Theirs ask to put the image 30px from the top
and, from the left, match the 87% point of the image with the 87% point of the
container.
Philippe
--
Philippe Wittenbergh
http://l-c-n.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/
