Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to make text not visible in a <h1> tag

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23502
    bancom
    Participant

    Hi does anyone know how to hide text that is within a tag such as a h1 tag? It also would be great if there was away of making that text visible if the tags background does not load.

    Cheers

    Simon ;)

    #50818
    mikes
    Member

    This is what I use for image replacement

    Code:
    H1.logo { text-align: center; width: 775px; height: 74px; background: url(‘images/logo.gif’) no-repeat; text-indent: -9999px; }

    Search engines and text-only browsers see the text but everyone else sees the image. I’m pretty sure Chris did an article on image replacement that showed various other techniques and rated them for accessibility.

    #50848
    bancom
    Participant

    Hi thanks for the tip i’ll give it a go and also I will hunt down Chris’s different techniques on image replacement blog / podcast. I am very wary of keeping my sites accessible, SEO and using web standards. Due to this I dont want to use too many hacks any thoughts??? :?:

    Simon

    #50846
    Argeaux
    Participant

    Its not a hack its just regular css.

    Anyway you only should replace words by images with the word in it (company name etc). If you use it on to many elements on your site it gets suspicious for google.

    #50860
    dat_paulchen
    Member

    https://css-tricks.com/header-text-image-replacement/

    My method: See https://css-tricks.com/header-text-image … ment-14822

    But the question of whether any of the mentioned methods are good for SEO remains to be answered – technically, you are hiding stuff from Joe Public, but you are showing it to Mr. Google. In a sense, this is the no-no. It’s like making text the same color as its background (remember those days?). So you would have to decide what Google might interpret as "hiding text" the least. And if I was Google, negative positioning would look darn suspicious to me in any case.

    #50859
    mikes
    Member

    I read an article somewhere, I’m not sure if it was Chris’ or another, that looked in depth into google’s reaction to the negative indent technique. Currently, although it could change at any time, google does not penalize it’s use and this technique has been popular for a very long time.

    However, I do have one problem with it. I cannot center any element, in FireFox, that I use the negative indent on. There’s no problem in IE but FF slams it to the left no matter what I’ve tried. Obviously, I can center a container and put it in that but it annoys me whenever I have to add a container as a workaround. Other than that, I love it. I still get the pretty graphic logo but also have the seo benefit of using semantic header tags.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.