SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing my h1 to a background image logo

    Hi

    I am in the early stages of designing my site using only XHTML and CSS. Up til now my <h1> has been the branding of my site i.e. the website name using the fonts, colours, padding etc. that are appropriate.

    However, it does still look amateurish, and I now want to create a company logo in photoshop. Doing that doesn't cause me difficulty, but it's the sizing of it so that it 'fits' the rest of the site that I'm unsure about.

    I currently have both float: left and float: right for vertical navigation (spaced in em's) and body content with left and right margins to fit inside the left and right navigation.

    I'll get to the point. How do I size the logo? Is it by using set pixel width and height values? If so, how would I know that this would be able to be viewed by all potential users of the website (different screen sizes etc.)? Also, if I do use set pixel values, would I then have to set the pixel width values of the <body> element so that everything lines up?

    I'm confused! Any help is much appreciated.

    Goofy

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    You can use ems too. I works wonderfully except in IE where if you don't specify height: auto (or width:auto, if you have specified the height) it may look a bit weird and streched

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgive me if this a stupid response, but this is new to me.

    As far as I'm aware, I can only set my image size in Photoshop by pixels, inches, cms, mms, points, picas or columns (I have only ever used pixels). I don't understand how to size it.

    Are you saying that sizing in Photoshop doesn't matter and that I should use CSS to set the <h1> i.e. h1 { width: 100em;} or whatever?

    Thanks

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    I am not talking about photoshop, but about CSS. You simply need to do the image big enough to look good in the biggest size possible.

    Yes, you can use relative measures to keep it proportional to the rest of the design. Give it a try!

    PS: 100em would be waaaaay too much... a normal screen size is about 60-65em wide

    And the question is not stupid at all. It was two years ago, some other mentor or advisor, I am not sure who, that told me to try this and he provided some examples. I did my tests and it works great.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you're creating a logo, use the IMG element, and save your H1 heading for the top-level heading of each individual page.

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dont forget that search engines look hard at your H1 tags for SEO. H1 tags should always include keywords most revelant to the individual page. Only use one H1 per page
    Download Software - Your place to Download Software
    PPC Management - Premium SEM, PPC Management Service
    Web Design - Award Winning Website Design

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Since you're creating a logo, use the IMG element, and save your H1 heading for the top-level heading of each individual page.
    Off Topic:

    Wasn't you that posted something about using ems? I don't remember where I got the idea... but I think that it was a "Dan"... and I don't think it was Dan Grossman...

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for general layouts, yes - but not logos

    Unless it was a few years ago when I didn't know any better.

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Then I must be mistaken. I use it with images and it works very well, except in the case of IE that tends to change the proportions if you don't use both height and width.

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Since you're creating a logo, use the IMG element, and save your H1 heading for the top-level heading of each individual page.
    This makes sense to me Dan, however all the tutorials I have been using so far have the h1 as what effectively becomes the company logo / branding. This includes Ian Lloyds book.

    If I was to do as you suggest, would I simply have something along the lines of <div id="logo"><p></p></div> and style that div with a background image etc. as the first div inside the body element?

    Then I'd just be using the h1 as the first heading on each page, as its name would suggest.

    As an aside, a couple of my pages use the caption element above a table (containing tabular data), rather than an h1 (or an h2 in my case because of my previous mistake). Is this a bad idea from a SEO perspective.

    Thanks all for the advice.

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I'd do:

    HTML Code:
    <div id="header">
         <img src="/themes/themename/images/logo.png" width="200" height="80" alt="Web Site Name">
    </div>
    Of course the attribute values are placeholders. You'll have to replace them with your own actual content.

    And to answer your aside, no, it's not bad. It still provides a benefit to users that need it, so as long as you put your users' needs first, you'll be fine.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all. I'm getting there...but it's slow progress!

  13. #13
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I'm using this technique from Paul. After some tweaking (and querying in the forums), it works beautifully on my site. Don't know if this is what you're looking for, but it's a neato keeno technique.


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
  •