SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 29
-
Sep 27, 2006, 14:13 #1
- Join Date
- Sep 2006
- Posts
- 8
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wrapping logo/ image in a <h1> tag
Hi
Forgive me if this is a poor question but........
I'm just wondering whether its a good idea to wrap a logo in a <h1> tag or not and how search engines would react to it.
Thanks,
Noelt
-
Sep 27, 2006, 14:43 #2
- Join Date
- Nov 2001
- Location
- The Central Plains
- Posts
- 3,304
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i don't see it giving any benefit. what are you hoping to accomplish?
-
Sep 27, 2006, 15:32 #3
- Join Date
- Dec 2003
- Location
- Cheltenham, United Kingdom
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's no bad thing - as long as you've given the image an appropriate alt attribute.
That said, search engines would probably treat the contents of the <h1> as the most important heading on the page. For everywhere except the front page, that's possibly something you should be saving for the headline on your top bit of content.Olly Hodgson
thinkdrastic.net
-
Sep 27, 2006, 15:37 #4
- Join Date
- Sep 2006
- Posts
- 8
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Bill,
Saw it mentioned on A List Apart last year (I think). There was also an article on adding your logo as a background image via CSS with your <h1>being a link back to your homepage.
Just wondering which way is most common i.e.- Not wrapping your logo in a <h1> tag
- Wrapping it in a <h1> tag
- Placing the logo in the background via CSS with the <h1> tag being a link back to your home page
Noelt
-
Sep 27, 2006, 23:49 #5
- Join Date
- Feb 2006
- Location
- Bedford, UK
- Posts
- 1,687
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'd use one of the Image Replacement techniques on this page: http://www.ryznardesign.com/web_codi...ent/index.html
-
Sep 28, 2006, 03:13 #6
- Join Date
- Dec 2003
- Location
- Cheltenham, United Kingdom
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by noeltkelly
Originally Posted by noeltkelly
As for the most popular, who knows? It depends on the situation. Personally I'd probably wrap it in an <h1> on the home page, but not on any subsequent pages.Olly Hodgson
thinkdrastic.net
-
Sep 28, 2006, 05:51 #7
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I use it all the time.
What I do is use the <h1> element (since I use it as the site's title, it only gets used once per document) as the container for the header image, then put the site title as the header text.
Here's an example:
HTML Code:<h1>ABC Widget Company</h1>
HTML Code:<h1><span></span>ABC Widget Company</h1>
Code:h1, h1 span { background: url('/images/header.jpg') no-repeat; height: 165px; width: 750px; } h1 span { display: block; margin-bottom: -165px; position: relative; z-index: 1; }
The <span> is set to display: block; since you want to convert it to a block-level element. Its bottom margin is set to a negative value equal to the height of the image, and then has its position set to "relative" so you can apply a z-index to it, which will cause the image to stack above the default header text.
This is the same technique described in the Sitepoint article "Accessible Header Images With CSS And XHTML." If you want to read more about it, go here:
http://www.sitepoint.com/article/hea...ages-css-xhtmlSave 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
-
Sep 28, 2006, 08:16 #8
Here's another useful resource about image replacement techniques:
http://www.stopdesign.com/articles/replace_text/
-
Sep 28, 2006, 14:39 #9
- Join Date
- Sep 2006
- Posts
- 8
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Dan,
That's a great idea, works very well, covers all the bases !
Much appreciated.
Thanks for the reference simsim
Noelt
-
Sep 28, 2006, 19:18 #10
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It covers all the bases but one. What if you want a link inside the header?
Paul O'B has a solution to it, but I took one look at the CSS for it this morning and thought it was pretty messy. Granted, he's just as good with CSS as I am (probably even better) but once I have some free time, I'm going to take a stab at re-writing his example.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
-
Sep 29, 2006, 00:22 #11
it is very simple.
You do:
<h1>Text</h1>
and then in the css for the h1 tag you put a background image (your image logo) and a property of : "text-indent: -1000em". That's all.
-
Sep 29, 2006, 01:35 #12
- Join Date
- Sep 2006
- Posts
- 8
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Dan
It was one of the objectives I was trying to acheive, I done this
<h1 id="imagereplacement"><a href="/test/index.shtml"><span></span>acme.com</a></h1>
with no changes to the CSS the link just sits behind the image.
Am I missing your point here........
Noelt
-
Sep 29, 2006, 01:46 #13
- Join Date
- May 2003
- Location
- Cambridge, UK
- Posts
- 2,366
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
My personal take is that the <h1> should be the main title of the individual page, not the name of the site (i.e. the same on every page).
Just use a plain <img/> for your logo (not image-replaced, as background-images don't get printed) - and with respect to SEO, if you can't manage to place in the SERPs for searches for your own company name you need to try harder.
-
Sep 29, 2006, 04:54 #14
- Join Date
- Sep 2006
- Posts
- 8
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thats a good point Buddy........that the <h1> tag should be the page title and as such you have a different top level heading depending on the content of each page.............
so why move away from this with all of the above techniques...........whats the reason behind it..........can anyone shed light on it.........
Noelt
-
Sep 29, 2006, 05:08 #15
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Skyblaze
Who in their crazy mind would do something as preposterous as this? DIALUP users. Like me.
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
-
Sep 29, 2006, 05:17 #16
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
There's a reason why I use the <h1> element as the site title. I use it as a global hook to define the site's header when I style it. Plus, it also defines the site itself for text-baed browsers *cough* Lynx *cough* and screen readers.
As for adding links to CSS based accessible image header replacement, I'm going to give you the link to Paul O'B's page that shows how to do it. I *might* have some free time this weekend, and if I do, I'll try to whip up an improved version of his CSS (giving proper attribution of course) and then share it here.
Here's the link:
http://www.pmob.co.uk/temp/navimagereplace.htmSave 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
-
Sep 29, 2006, 06:54 #17
Originally Posted by Dan Schulz
-
Sep 29, 2006, 07:21 #18
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
<em> in this case is a replacement for <span>, since Mac-IE (a dead browser that people still seem to use with some regularity) doesn't understand the styles when used with a <span> element in this case.
Paul can tell you more about it.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
-
Sep 29, 2006, 08:07 #19
Originally Posted by Dan Schulz
-
Sep 29, 2006, 09:23 #20
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I see what he did. He used a single image for both states, and then adjusted the position of the image depending on the current state. The top half for normal (and visited) links, and the bottom half for the hover effect.
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
-
Sep 29, 2006, 10:47 #21
- Join Date
- Oct 2005
- Location
- London
- Posts
- 1,678
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi,
Yep a single image for both states. The rollover image is hidden outside the ul and the pulled in to position using background-position in the css. It takes a bit of messing around to get the rollover background positioning right, especially if you have different sized link images.
Basically to get round it, if you do happen to have different sized images you have to specify the width of each image and background position properties for each link image seperatley. Its a little heavy on the css but a really good technique all the same.
You can do it with two seperate images but its slow becuase the hover images dont load until you rollover them causing a slight delay when you rollover for the first time
-
Sep 29, 2006, 11:59 #22
- Join Date
- May 2003
- Location
- Cambridge, UK
- Posts
- 2,366
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's called CSS Sprites - have a google.
-
Sep 29, 2006, 12:30 #23
- Join Date
- Oct 2005
- Location
- London
- Posts
- 1,678
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
So it is! Never heard of it before!
you've got to love alistapart:
http://www.alistapart.com/articles/sprites/
-
Oct 1, 2006, 04:29 #24
Originally Posted by Dan Schulz
-
Oct 1, 2006, 04:58 #25
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What version of FireFox are you using? (I'll also check the other Gecko-based browsers for you to see if it's not unique to FireFox.)
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
Bookmarks