<h1>Images</h1> ???? ?? ?? ? ? ?

Fireproofgfx

Fireproofgfx

New Member
Is it ok to <H1> An image????

The reason I ask is because I want the header font to be a cursive font to match a constitution theme. I am using "English" Font. I tried just changing the Font to English for my H1 tag but on my wifes PC it went to a default font because she doesn't have the font uploaded, which would be the case for a lot of people.

So can I and is there anything wrong with do it??

http://www.jesseyoungforcongress.com/VER3 WeBSITE/z.php Here you can see the difference between the the Image<h1> titled Resources and the <h1> text 'Welcome to Jesse Young for Congress" and if you are lucky you might see it the way it should be lol...

HTML: 
<h1><img src="images/resources.png" width="200" height="46" alt="Jesse Young For Congress" /></h1>
 
CaldwellYSR

CaldwellYSR

Member
I don't know for sure if you can. I've never tried it. It's not a good idea even if you can do it. Your h1 tag is pretty important for SEO.
 
ronaldroe

ronaldroe

Super Moderator
Staff member
It won't validate, but it'll work. The question is, why would you want to? What I would do instead is load the font using @font-face. You'll want the text to be in your header for search engine purposes. The other alternative would be something like this:

HTML
Code: 
<div id="logo"><h1>Welcome to Jesse Young for Congress</h1><img src="http://www.webdesignforum.com/images/logo.png" alt="" /></div>

CSS
Code: 
#logo{
height: 80px; /*Or whatever the height of the logo is*/
width:100px; /*Or whatever the width of the logo is*/
}
#logo h1{
display:inline;
height:0px;
overflow:hidden; /*Key to making it work*/
width:0px;
}
 
CaldwellYSR

CaldwellYSR

Member
ronaldroe said:
It won't validate, but it'll work. The question is, why would you want to? What I would do instead is load the font using @font-face. You'll want the text to be in your header for search engine purposes. The other alternative would be something like this:

HTML
Code: 
<div id="logo"><h1>Welcome to Jesse Young for Congress</h1><img src="http://www.webdesignforum.com/images/logo.png" alt="" /></div>

CSS
Code: 
#logo{
height: 80px; /*Or whatever the height of the logo is*/
width:100px; /*Or whatever the width of the logo is*/
}
#logo h1{
display:inline;
height:0px;
overflow:hidden; /*Key to making it work*/
width:0px;
}
Click to expand...


Why couldn't you set #logo h1 {display: hidden;} instead? I'm assuming it has something to do with SEO (I don't know much about SEO... I probably should learn that XD)
 
M

mellowyellow

New Member
HTML
Code: 
<h1>TEXT</h1>

CSS
Code: 
h1 {
   text-indent: -9999px;
   background: url(image.png) no-repeat bottom right; /* or wherever you want it placed */
    }


I second the @font-face suggestion, by the way, unless you really do need the image. I have never tried it - but it is pretty ubiquitous now, isn't it?

Is there anything wrong with the method I outlined above?

Man, there are a ton of techniques out there...take a look : http://www.mezzoblue.com/tests/revised-image-replacement/

o_O haven't read through that, just googled it....
 
Last edited:
Phreaddee

Phreaddee

Super Moderator
Staff member
yep google fonts is not only easier but you don't run into licensing issues either.
and savvy folk dont steal your font you've paid good money for. (assuming that its not a free font)
 
M

mellowyellow

New Member
http://css-tricks.com/630-css-image-replacement/

fixed that link for ya

I really wonder how important it is to "pass" for situations where the user has IMAGES off. Unsurprisingly, none of the techniques work for all four of the possible variations of CSS on/off and Images on/off, and the only two that work for three out of four, are cumbersome. Do you really want to either a) load all images twice, or b) not be able to use transparent backgrounds, as well as having some extra code, just to make your header work when the user has disabled CSS?

IMO, if a user turns of CSS or images...they're asking for some broken looking sites.
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
Fireproofgfx, there are a few options, couple have been mentioned.

Web Fonts
Using the Google web fonts api is not a bad method, it even works in IE7! Surprised on that one. You only limitation here are the fonts that are available, will they match the one you have in mind?

Background Image and Text Indent
Using a background image for the heading and a negative text indent. This idea is ok, but the issue is the text is not present. Even when you use an image (<img />) there is alt text information. All in all, I'm not a fan of this method.

Gilder/Levin Method
In this situation you use a empty span to contain the background image. Then position the span over the text in the heading using absolute positioning. With this method, the text for the heading is still visible if the image does not appear/load.
HTML: 
<h1>Page Heading<span></span></h1>
Code: 
 h1 {
position:relative;
width:220px;
height:70px;
}
h1 span {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: transparent url(sprite.png) 0 0 no-repeat;
}
 
ronaldroe

ronaldroe

Super Moderator
Staff member
CaldwellYSR said:
Why couldn't you set #logo h1 {display: hidden;} instead? I'm assuming it has something to do with SEO (I don't know much about SEO... I probably should learn that XD)
Click to expand...

Accessibility. If the text doesn't render, a screen reader won't read it. With the code I posted, the text renders, you just can't see it. There may be SEO implications as well, but I'm not the best person to ask about that.
 
You must log in or register to reply here.
Top