Re: [css-d] rem units and %
2014-09-18 1:44, Felix Miata wrote: One of the rem unit's important features, if not its most important, is that size cascade is ignored. Indeed the very point of the rem unit is to set the size of something using Cascading Style Sheets so that the cascade is avoided. Opinions disagree on whether this is a good idea. When you set a width in rem, the ratio between base font size and the container's design width remains constant no matter how many layers deep that container lives, and no matter what the base font size is. Normally what should matter is the ratio between the element's own font size and the element's width. 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] More ems fun!
The span is display none. Not the whole h1.
On Thu, Sep 18, 2014 at 1:01 AM, Crest Christopher
crestchristop...@gmail.com wrote:
The image is suppose to be seen, but it's not seen because the display is
set to none, but it's in a H1 so it works for SEO, but the image doesn't
display, hrm ?
Karl DeSaulniers wrote:
On Sep 17, 2014, at 4:28 PM, Tim Climistim.cli...@gmail.com wrote:
h1 span{
display:none;
}
prevents that from being seen (because the logo presumably says Bob's
hot
dog palace) but since it's in an h1, you get thebenefits of better
SEO
results..that is my understanding of why to use this technique.
Why not just h1 {display:none} ?
---Tim
Probably so your actual text headers don't disappear while wrapping
everything else with them.
Karl
Sent from losPhone
__
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/
--
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] rem units and %
On Wed, Sep 17, 2014 at 3:49 PM, John j...@coffeeonmars.com wrote: On Sep 16, 2014, at 7:35 PM, Eric e...@minerbits.com wrote: Did you read on this list that the REM unit is only for type? - It's a relative unit like any other relative unit. I use it for everything except element widths (they get %s) and line-height that should be unitless. No, I mean that in my gathering information about proper use of rems, I’m looking far and wide (online, people I know) and there is a disagreement as to how rem units should be used. As I take this site responsive, I’m going with % also. Thank you, John __ I haven't heard any arguments about not using rem for anything but font-size until this thread. I've only heard that it's no different than using em, except for the lack of the compounding issue associated with em. And that's a really good thing. -- 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] after pseudo-class and link
On Wed, Sep 17, 2014 at 11:32 PM, Dave Solko d...@pixelalchemy.com wrote: Is it possible to add a link to the :after? I'm adding an image via :after, and I want to make it clickable. Is this possible? Using WP, and it's not possible to add the image without hacking the template. However, it's easy to add it to the css, that's why the convoluted solution. Dave Solko Pixel Alchemy d...@pixelalchemy.com 513.300.2165 Without seeing code... You're adding the image after an element, so can you wrap that element in an a href? You would be adding the image after the element, but it would be inside the a. A quick test with adding some text after an element worked for me in latest Mac FF/Chrome. HTH -- 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] after pseudo-class and link
I assume you're adding this as a background-image, is that correct?
Something like:
div:after {
content: ;
background-image: url('');
}
You can't add tags to an :after. If this is something you *need* to link
to, I would suggest adding it to the markup proper (wp template) as that is
where it belongs.
Chris Rockwell
On Wed, Sep 17, 2014 at 11:32 PM, Dave Solko d...@pixelalchemy.com wrote:
Is it possible to add a link to the :after?
I'm adding an image via :after, and I want to make it clickable. Is this
possible?
Using WP, and it's not possible to add the image without hacking the
template. However, it's easy to add it to the css, that's why the
convoluted solution.
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
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] after pseudo-class and link
On Thu, Sep 18, 2014 at 9:17 AM, Chris Rockwell ch...@chrisrockwell.com wrote:
I assume you're adding this as a background-image, is that correct?
Something like:
div:after {
content: ;
background-image: url('');
}
You can't add tags to an :after. If this is something you *need* to link
to, I would suggest adding it to the markup proper (wp template) as that is
where it belongs.
Chris Rockwell
On Wed, Sep 17, 2014 at 11:32 PM, Dave Solko d...@pixelalchemy.com wrote:
Is it possible to add a link to the :after?
I'm adding an image via :after, and I want to make it clickable. Is this
possible?
Using WP, and it's not possible to add the image without hacking the
template. However, it's easy to add it to the css, that's why the
convoluted solution.
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
Can you add the image as base64 in the content: : rule?
--
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] after pseudo-class and link
On Thu, Sep 18, 2014 at 9:28 AM, Tom Livingston tom...@gmail.com wrote:
On Thu, Sep 18, 2014 at 9:17 AM, Chris Rockwell ch...@chrisrockwell.com
wrote:
I assume you're adding this as a background-image, is that correct?
Something like:
div:after {
content: ;
background-image: url('');
}
You can't add tags to an :after. If this is something you *need* to link
to, I would suggest adding it to the markup proper (wp template) as that is
where it belongs.
Chris Rockwell
On Wed, Sep 17, 2014 at 11:32 PM, Dave Solko d...@pixelalchemy.com wrote:
Is it possible to add a link to the :after?
I'm adding an image via :after, and I want to make it clickable. Is this
possible?
Using WP, and it's not possible to add the image without hacking the
template. However, it's easy to add it to the css, that's why the
convoluted solution.
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
Can you add the image as base64 in the content: : rule?
--
Not rule but declaration...
--
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] after pseudo-class and link
Le 18 sept. 2014 à 22:28, Tom Livingston tom...@gmail.com a écrit : Can you add the image as base64 in the content: : rule? How would that help in making the image a link? As far as I understand, the OP has this markup: divfoo bar baz and more text/div And want to add an image which is at the same time a link (link wraps around image, link does NOT exist in the markup). You can't do that with CSS. You can add a URL as text node in the ::after, but it won't be clickable. You can add the image. But nothing will be an HTML link, as long as the link does not exist in the markup. You can do it with javascript, though: prepend() or append(). But that is OT for this list. 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] after pseudo-class and link
On Thu, Sep 18, 2014 at 9:49 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 18 sept. 2014 à 22:28, Tom Livingston tom...@gmail.com a écrit : Can you add the image as base64 in the content: : rule? How would that help in making the image a link? I guess I was adding this to my comment of adding an a around the element that the :after was applied to. With that and if the base64 was possible, then the scenario the OP was describing *may* work. Ultimately, I agree that the img should just be added to the markup. -- 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] rem units and %
On Sep 18, 2014, at 5:47 AM, Tom Livingston tom...@gmail.com wrote: I haven't heard any arguments about not using rem for anything but font-size until this thread. I've only heard that it's no different than using em, except for the lack of the compounding issue associated with em. And that's a really good thing. Such as that problem I had yesterday, where em values seemed to double in the spot where I had an h2 enclosed by my h1? John __ 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] rem units and %
On Thu, Sep 18, 2014 at 10:53 AM, John j...@coffeeonmars.com wrote: On Sep 18, 2014, at 5:47 AM, Tom Livingston tom...@gmail.com wrote: I haven't heard any arguments about not using rem for anything but font-size until this thread. I've only heard that it's no different than using em, except for the lack of the compounding issue associated with em. And that's a really good thing. Such as that problem I had yesterday, where em values seemed to double in the spot where I had an h2 enclosed by my h1? John That's what it looked like to me, yes. -- 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-d] why % not working for this?
http://www.coffeeonmars.com/170_su/client/portfolio/
At this link, I have 3 thumbnails which display horizontally and are evenly
distributed, and respect the 1.25em right and left padding of their parent.
Using good ol’ pen and paper, I calced the total width of the elements, the
padding of the parent, got my leftover space, and calculated that as a
percentage of the parent, so my margin-right would be that % value.
It didn’t work! I fiddled with fewer digits after the decimal, then began
incrementing down, and it never did act right. But when I put in the “hard”
value in ems, it worked!
Why so? Why would % not work?
the selector for the first two thumbnails is below…commented out the initial
percent value. Thank you!
.thumb-one-two{
float:left;
width:270px;
/* margin-right:47.87234%; */
margin-right:2.8125em;
}
thumb-three just has to have the correct width and float left:
#thumb-three{
float:left;
width:270px;
}
__
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] rem units and %
Jukka K. Korpela wrote on 2014-09-18 09:06 (GMT+0300): Felix Miata wrote: When you set a width in rem, the ratio between base font size and the container's design width remains constant no matter how many layers deep that container lives, and no matter what the base font size is. Normally what should matter is the ratio between the element's own font size and the element's width. Ideally from a user perspective, for the majority of content, the two ratios should in practical effect be identical. The reality of course is that on most of the web, the simplification that cascading originally offered in divorcing content from presentation has been mostly lost by CSS's misuse as a pseudo page layout language treating the web as if it was print. Site after site repeats ad infinitum equivalent declarations on a hopelessly complex overabundance of classes, many of which, because of cascade, conflict, and ultimately, get fixed by adding more declarations instead of culling down to the minimum necessary to get the job done. Too often the CSS outweighs the (X)HTML. The natural talent of every modern web browser to adapt content to the user's environment is usurped by CSS attempting to make every page look like Photoshopped image, and at an arbitrary size bearing no predictable relationship to the physical characteristics of the environment opened within. The latter day addition of the rem unit to a rather evolved CSS specification does offer the practitioner a practical opportunity to work around some of the complexity that cascade induces. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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] why % not working for this?
Check out the Computed tab in Chrome Dev tools - it shows that 47.87234%
is equal to 430.844 pixels which, without actually doing the math, makes
sense because your container is 900px wide. I'm pretty sure you're going
to run into pixel rounding issues with percentages like that though (
http://ejohn.org/blog/sub-pixel-problems-in-css/).
Chris
Chris Rockwell
On Thu, Sep 18, 2014 at 4:38 PM, John j...@coffeeonmars.com wrote:
http://www.coffeeonmars.com/170_su/client/portfolio/
At this link, I have 3 thumbnails which display horizontally and are
evenly distributed, and respect the 1.25em right and left padding of their
parent.
Using good ol’ pen and paper, I calced the total width of the elements,
the padding of the parent, got my leftover space, and calculated that as a
percentage of the parent, so my margin-right would be that % value.
It didn’t work! I fiddled with fewer digits after the decimal, then began
incrementing down, and it never did act right. But when I put in the “hard”
value in ems, it worked!
Why so? Why would % not work?
the selector for the first two thumbnails is below…commented out the
initial percent value. Thank you!
.thumb-one-two{
float:left;
width:270px;
/* margin-right:47.87234%; */
margin-right:2.8125em;
}
thumb-three just has to have the correct width and float left:
#thumb-three{
float:left;
width:270px;
}
__
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] why % not working for this?
On Sep 18, 2014, at 1:49 PM, Chris Rockwell ch...@chrisrockwell.com wrote: Check out the Computed tab in Chrome Dev tools - it shows that 47.87234% is equal to 430.844 pixels which, without actually doing the math, makes sense because your container is 900px wide. I'm pretty sure you're going to run into pixel rounding issues with percentages like that though ( http://ejohn.org/blog/sub-pixel-problems-in-css/). OK..a bit red-faced here..if I’d thought about it for a sec, that would mean basically half the parent width, but in pixels it’s only 45px…which would be… jeepers….4.7% not 47% I am going to try that value... thank you, Chris! J __ 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] why % not working for this?
Glad to help! Chris Rockwell On Thu, Sep 18, 2014 at 5:00 PM, John j...@coffeeonmars.com wrote: On Sep 18, 2014, at 1:49 PM, Chris Rockwell ch...@chrisrockwell.com wrote: Check out the Computed tab in Chrome Dev tools - it shows that 47.87234% is equal to 430.844 pixels which, without actually doing the math, makes sense because your container is 900px wide. I'm pretty sure you're going to run into pixel rounding issues with percentages like that though ( http://ejohn.org/blog/sub-pixel-problems-in-css/). OK..a bit red-faced here..if I’d thought about it for a sec, that would mean basically half the parent width, but in pixels it’s only 45px…which would be… jeepers….4.7% not 47% I am going to try that value... thank you, Chris! J __ 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/
