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/
[css-d] More ems fun!
I have a situation in which I modified my header logo and tag line to be wrapped in an h1 tag and now it seems that my alignment of header elements doesn’t respect the left edge they had before, and the value of em seems to be way off…I increased my tag line to enable the line not to break by making width 25ems (400 px) but that box now goes almost the width of the wrapper! I have divs with colored outlines..can anyone help me to see what is at work here? link: http://www.coffeeonmars.com/170_su/client/ Thank you. 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] More ems fun!
Seems like a compounding issue. I don't really recommend putting your h2 inside your h1. On Wed, Sep 17, 2014 at 2:19 PM, John j...@coffeeonmars.com wrote: I have a situation in which I modified my header logo and tag line to be wrapped in an h1 tag and now it seems that my alignment of header elements doesn’t respect the left edge they had before, and the value of em seems to be way off…I increased my tag line to enable the line not to break by making width 25ems (400 px) but that box now goes almost the width of the wrapper! I have divs with colored outlines..can anyone help me to see what is at work here? link: http://www.coffeeonmars.com/170_su/client/ Thank you. 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/ -- 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] More ems fun!
If not compounding then it's the relation of the width in ems and the font-sizes. EMs used for things other than font-size (like width or margin) are relative to the font-size of *the element it is applied to*. On Wed, Sep 17, 2014 at 2:19 PM, John j...@coffeeonmars.com wrote: I have a situation in which I modified my header logo and tag line to be wrapped in an h1 tag and now it seems that my alignment of header elements doesn’t respect the left edge they had before, and the value of em seems to be way off…I increased my tag line to enable the line not to break by making width 25ems (400 px) but that box now goes almost the width of the wrapper! I have divs with colored outlines..can anyone help me to see what is at work here? link: http://www.coffeeonmars.com/170_su/client/ Thank you. 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/ -- 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] More ems fun!
On Sep 17, 2014, at 12:41 PM, Crest Christopher crestchristop...@gmail.com
wrote:
The H2 in your #taglinebox couldn't that be put in a p tag, it's quite
small text ?
Absolutely, it could, and I tried that and suddenly that little tag got
huge..there’s something going on with that that I need to re-visit but I can’t
allow to hold up the rest of the site, so I am back-grading to what I had
before, but I really want to achieve this.
but below is the code that I am trying to emulate, supposed to be better for
SEO by wrapping logo and text in an h1 tag, and making a span tag to hide the
text..
Thank you!
J
Image Replacement
When we use a clickable logo image in our header, we also want to include
machine-readable headline text within our h1 tag for SEO. But we'll want the
logo, not the text, to display on the screen. Here's how to do it:
h1
a href=index.php
spanMy Headline Text/span !-- for SEO --
img src=images/logo.jpg id=logo
alt=My Headline Text !-- for screen readers --
width=XXX height=YYY /
/a
/h1
h1 span {
display:none;
}
/* h1 text inside the span tag does not visually display,
but search engines can read it in the HTML code */
Note that the a tag wraps both the text and the image, and the h1 tag wraps
everything.
__
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!
Span tags inside an H1 is suppose to help SEO, that would be news to me !
John wrote:
On Sep 17, 2014, at 12:41 PM, Crest Christophercrestchristop...@gmail.com
wrote:
The H2 in your #taglinebox couldn't that be put in ap tag, it's quite small
text ?
Absolutely, it could, and I tried that and suddenly that little tag got
huge..there’s something going on with that that I need to re-visit but I can’t
allow to hold up the rest of the site, so I am back-grading to what I had
before, but I really want to achieve this.
but below is the code that I am trying to emulate, supposed to be better for
SEO by wrapping logo and text in an h1 tag, and making a span tag to hide the
text..
Thank you!
J
Image Replacement
When we use a clickable logo image in our header, we also want to include
machine-readable headline text within our h1 tag for SEO. But we'll want the
logo, not the text, to display on the screen. Here's how to do it:
h1
a href=index.php
spanMy Headline Text/span !-- for SEO --
img src=images/logo.jpg id=logo
alt=My Headline Text!-- for screen readers --
width=XXX height=YYY /
/a
/h1
h1 span {
display:none;
}
/* h1 text inside the span tag does not visually display,
but search engines can read it in the HTML code */
Note that thea tag wraps both the text and the image, and theh1 tag wraps
everything.
__
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] More ems fun!
On Wed, Sep 17, 2014 at 4:31 PM, Crest Christopher
crestchristop...@gmail.com wrote:
Span tags inside an H1 is suppose to help SEO, that would be news to me !
John wrote:
h1
a href=index.php
spanMy Headline Text/span !-- for SEO --
img src=images/logo.jpg id=logo
alt=My Headline Text!-- for screen readers --
width=XXX height=YYY /
/a
/h1
h1 span {
display:none;
}
/* h1 text inside the span tag does not visually display,
It's not the span tag that's good, it's the text it wraps. Though I'm
not sure how much better it is over the alt text of the image. Anyone
know?
--
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] More ems fun!
On Sep 17, 2014, at 1:31 PM, Crest Christopher crestchristop...@gmail.com
wrote:
Span tags inside an H1 is suppose to help SEO, that would be news to me !
Here is the reasoning, as I understand it..I am not an SEO whiz..
You have your logo - in most cases an image, but aside from alt text, nothing
tells what it is. So, you use an h1 to hold the text, like “Bob’s Hot Dog
Palace,” but the
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 the benefits of better SEO
results….that is my understanding of why to use this technique.
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] More ems fun!
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 the benefits of better SEO
results..that is my understanding of why to use this technique.
Why not just h1 {display:none} ?
---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/
Re: [css-d] More ems fun!
On Sep 17, 2014, at 4:28 PM, Tim Climis tim.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 the benefits 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/
Re: [css-d] More ems fun!
Help! I started getting these email at random - I never signed up, and I don't know what this about. How do I get off the mailing list? John E. Cavanaugh MD. There's always a wrong way to do the right thing ... Cavanaugh's Law On Sep 17, 2014, at 13:19, John j...@coffeeonmars.com wrote: I have a situation in which I modified my header logo and tag line to be wrapped in an h1 tag and now it seems that my alignment of header elements doesn’t respect the left edge they had before, and the value of em seems to be way off…I increased my tag line to enable the line not to break by making width 25ems (400 px) but that box now goes almost the width of the wrapper! I have divs with colored outlines..can anyone help me to see what is at work here? link: http://www.coffeeonmars.com/170_su/client/ Thank you. 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/ __ 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 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/
