H1 header Image

[jackfitz]

I am new to landing pages and am coming across a dilemma time over.
To either have an Image header (looks better) or text (and use <h1> for SEO/QS purposes)
I have heard of a tool that will automatically insert a picture according to the header h1 text. does anyone have experience with this or some suggestions?

 

[bb_wolfe]

CSS, learn it.

 

[threehundred]

You are asking 2 different questions in 1. Clarify what you are looking to do.

 

[jackfitz]

I want to know how to have a good looking header, and a h1 tag for QS. in my experience using text for the header does not look as good as it can with an word as an image.

 

[threehundred]

You can do a couple of different things.

1. Do like bb wolfe said and learn css. You could find/create an image you wanted and find the text you want. Then you can use css, upload the font to your server, and recreate the image you want using both a background image and your h1 with the font you uploaded for the same effect as an image, plus with the QS of the h1.

2. Use an image, add alt text with your keyword or the text you'd use for the h1.

3. Use an image and h1 and use css to hide the h1 either offscreen or via display:none

 

[Bsod_]

Have the text in the header tag as well as an image, then in your stylesheet set it to not display

eg in your HTML

<div id="header">
    <h1>Fleshlights-R-Us</h1>
    <img src="logo.gif" alt="Fleshlights-R-Us" />
</div>

and in your stylesheet

#header h1
{
    display:none;
}

As for this: "I have heard of a tool that will automatically insert a picture according to the header h1 text" - are you thinking of sIFR?

Another thing to consider is that the h1 tag should reflect the most important content on the page, not necessarily the name of the site or logo text. I use a H1 with the name of the site on the home page, but for all other pages the H1 is the title of the content for that page (eg, category name, product name, blog post title, etc). So for most landing pages you could just have an image logo and then put the lander title in the h1.. eg

<div id="header">
    <img src="logo.gif" alt="Fleshlights-R-Us" />
</div>
<div id="content">
    <h1>Buy Fleshlights Here!</h1>
</div>

 

[jackfitz]

Thanks for all the input it helps heaps, exactly what i was after

 

[ikonic]

n00bs!

<h1 style="background-image: url(path.ext) #FFFFFF;">Heading<h1>

 

[Fatbat]

n00bs!

You shouldn't use upper case in your code and you can shorten that colour specification to just #fff, oh and your closing h1 tag is incorrect, but carry on expert.

 

[ikonic]

You shouldn't use upper case in your code

color codes are case insensitive

and you can shorten that colour specification to just #fff

... and, the point is

oh and your closing h1 tag is incorrect,

wow, your awesome, you found a typo

but carry on expert.

how does go fuck yourself sound!

 

[Fatbat]

How does you don't have a fucking clue sound?

You come in here swinging your dick like some know it all douchebag and are sore when someone calls you on it? Fuck off.

Good CSS uses shorthand. XHTML won't validate if uppercase it used. You fucked up the closing tag trying to be a showoff.

Go suck a cock.

 

[droplister]

About - cufon - GitHub
cufón - fonts for the people

Have your cake and eat it too.

 

[seosly]

I've had a lot of luck doing something as follows:

<h1 id="logo"><span>Logo Text</span></h1>

h1#logo{
display: block;
background-image: url('logo.jpg');
height: imageheight;
width: imagewidth;
}

h1#logo span{
display: none;
}

 

[Xdreamer]

I use something similar for wordpress:

<div id="header">
<h1><a href="<?php echo get_settings('home'); ?>/" title="blablabla"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>

#header h1  {
    margin: 0;
    padding: 0;
    text-indent: -9999px;
}
#header h1 a {
    background-image: url(images/logo.gif);
    background-repeat: no-repeat;
    display: block;
    width: 310px;
    height: 60px;
    border: 0;
}

 

[pfgannon]

color codes are case insensitive


... and, the point is


wow, your awesome, you found a typo


how does go fuck yourself sound!

How does you don't have a fucking clue sound?

You come in here swinging your dick like some know it all douchebag and are sore when someone calls you on it? Fuck off.

Good CSS uses shorthand. XHTML won't validate if uppercase it used. You fucked up the closing tag trying to be a showoff.

Go suck a cock.

 

[ikonic]

How does you don't have a fucking clue sound?
You come in here swinging your dick like some know it all douchebag and are sore when someone calls you on it? Fuck off.

Good CSS uses shorthand. XHTML won't validate if uppercase it used. You fucked up the closing tag trying to be a showoff.

Go suck a cock.

With the exception of the typo it validates as XHTML 1.0 STRICT.

Therefore, before you decide to post into a forum about a swinging dick douchebag that doesn't haven't a clue, spend a couple of minutes verifying your argument first before posting so you DO LOOK LIKE A COMPLETE AND UTTER FUCK WIT when the douche you are trying to call out actually knows more about subject then your do.

finally to avoid any further confusion

here is the code for putting it into a css file

h1{
background-image: url(path.ext);
background-color: #FFFFFF;
}

or

h1{
background: url(path.ext) #FFFFFF;
}

Strangely both validate as css 2.0 with UPPERCASE in them. Perhaps you might want to spend a little time actually reading the specs.


EDIT:
Just to clarify since you are such a FUCKWIT.

background-image: url(path.ext) #FFFFFF;

won't validate as css in a style sheet but it does when its inline but i guess with all your knowledge you already new that right?

RE-EDIT:
Brad, what was the point of you posting into this thread other then to troll? You haven't contributed to thread, you haven't helped the op so at this point, the only thing you seem to have done is concrete your position as the #1 dude without a fuckin clue.... and you are still going on.

PS: I look forward to your next post.

 

[Fatbat]

LoL, I've got you doing experiments and shit. I could have sworn that wouldn't validate, my mistake.

You haven't contributed to thread, you haven't helped the op...

If you really think your original post with the name calling and lack luster code example was some great contribution to this thread then you think too highly of yourself. Whatever, carry on.

 

[ikonic]

LoL, I've got you doing experiments and shit.

lol yeah, it was like shit and experiments and stuff and I was like i'm going to experiment and then i did it, and it was like yeah, brads wrong and shit, and then i posted that.

If you really think your original post with the name calling and lack luster code example was some great contribution to this thread then you think too highly of yourself.

I'm still waiting for your "code example" captian genius.

PS: n00b

 

[1nspire]

lol yeah, it was like shit and experiments and stuff and I was like i'm going to experiment and then i did it, and it was like yeah, brads wrong and shit, and then i posted that. And then one time at band camp, I stuck a flute in my pussy.

<div id="bitchslap">

<stfu>ikonic</stfu>

</div>

 

[bambosi]

images is better than text, but text is better for SEO