SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
-
May 12, 2009, 04:40 #1
- 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
-
May 12, 2009, 06:06 #2
- 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
-
May 12, 2009, 06:29 #3
- 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
-
May 12, 2009, 08:10 #4
- 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.
-
May 12, 2009, 10:04 #5
- 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.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
May 12, 2009, 10:09 #6
- 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
-
May 12, 2009, 10:14 #7
- Join Date
- Feb 2005
- Location
- from Madrid to Heaven
- Posts
- 8,271
- Mentioned
- 252 Post(s)
- Tagged
- 1 Thread(s)
-
May 12, 2009, 10:28 #8
- 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.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
May 12, 2009, 10:34 #9
- 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.
-
May 12, 2009, 11:27 #10
- Join Date
- May 2008
- Posts
- 50
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 12, 2009, 12:34 #11
- 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>
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.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
May 13, 2009, 03:56 #12
- 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!
-
May 13, 2009, 19:22 #13
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