SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The best way to place your logo

    Hi,

    What would be the best way to position your logo?

    What I usually do is create a div and put it inside like this…
    Code:
    <div id="logo">
    <a href="/"><img src="http://yourDomain.com/somefolder/images/logo.jpg"alt="Some Text"></a>
    </div>
    But lately surfing and looking at other sites I noticed that some of them use an H1 tag and add the logo as the background something like this…
    Code:
    <h1>
    <a href="http://www.yourDomain.com/index.html">Some Text Here</a>
    </h1>
    then indent the text and add the logo as background using CSS, something like this.
    Code:
    h1 a {background: url(“/images/logo.png”); text-indent: -9999px;}
    and I was wondering what would be the best way to do this as far as SEO or semantically correct.

    I'm just trying to figure the best way.

    Thanks a lot.
    Thank you very much!!!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    There are different argument for all sorts of methods. The logo is usually not the main heading on the page, so I think there's an argument for wrapping it in a <p>, with normal text (e.g. <p>My Company</p>) and then absolutely place the logo image over the top of that text. That way, if images are off, the text still appears.

    Here's a example of that:
    Header replacement

  3. #3
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help!

    Ok it looks like between the two sample I posted the second is the best way but instead it needs to be wrapped in a p tag then absolutely place the logo image over the top of that text.

    Is my first option a NO, NO option?

    Thanks for your help
    Thank you very much!!!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by fs_tigre View Post
    Ok it looks like between the two sample I posted the second is the best way but instead it needs to be wrapped in a p tag then absolutely place the logo image over the top of that text.
    Others may disagree about the <p>, but it's my current preferred option.

    Is my first option a NO, NO option?
    It's quite ok, really, and probably the better of your two suggestions. With images off, most browsers will show the alt text instead, which is quite good. (It annoys me that Safari doesn't show the alt text, TBH, but there you go.

    In a way, it could be argues that the logo is pretty much just decoration, so that option is quite feasible, really.

  5. #5
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help!
    Thank you very much!!!

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    IMHO. If you lean toward using a P use DIV instead. the BRAND IDENTITY is NOT a paragraph, and shouldn't be semantically marked as such. ( BTW,its ok to use a DIV A ( without a P, as long as you dont have other block elements inside that DIV...) in other words, direct children of a DIV are all blocks or all inline...)

  7. #7
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your comments!
    Thank you very much!!!

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There are different argument for all sorts of methods. The logo is usually not the main heading on the page, so I think there's an argument for wrapping it in a <p>, with normal text (e.g. <p>My Company</p>) and then absolutely place the logo image over the top of that text. That way, if images are off, the text still appears.

    Here's a example of that:
    Header replacement
    Why not leaving the text out and just put the logo on the page and declaring width and height in the HTML , without wrapping it in a container? The alt-text will take care of people with images off.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Hueij View Post
    The alt-text will take care of people with images off.
    It's not a bad solution, but alt text doesn't display in all browsers, such as Safari.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That's all I did on my bread and butter site. Just wrapped the img in an anchor. Then use the page heading as the h1.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's not a bad solution, but alt text doesn't display in all browsers, such as Safari.
    Ah, thanks. Being a Windows user I didn't know that.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Hueij View Post
    Ah, thanks. Being a Windows user I didn't know that.
    Yeah, it's an annoying feature (or lack of it) in Safari. (BTW, you can get Safari for Windows. )

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Only safari not chrome too?

  14. #14
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    I have recently started adopted this technique posted by deathshadow, I think it provides the best of all worlds. Besides that I generally place the site brand in a p element. Its not the main heading, so it shouldn't be treated as such.
    The only code I hate more than my own is everyone else's.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Only safari not chrome too?

    Yikes, yeah, Chrome too. Never thought to test that.

    Quote Originally Posted by oddz View Post
    I have recently started adopted this technique posted by deathshadow
    Yep, that's the same as what I posted above. Does seem to be the best method, though its one drawback is that the image can't be transparent.

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That's pretty retarded. What does webkit think alt is only for google?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •