Placing Logo In Header

[eLePHANT]

I want to place a logo I created into my header. Can anyone help me with that? I tried putting the image url in the h1 CSS, but it messed up entire site.

Here is my website: http://nkdogwalking.com
Here is the logo: http://www.nkdogwalking.com/nkdogwalking-logo.gif
Here is the CSS: http://www.nkdogwalking.com/style1.css

Feedback on the logo itself would be appreciated as well. I hope ralph.m sees this. He knows I've been meaning to get a log for a LONG time. I know it's pretty basic, but better than having nothing at all.

[Stomme poes]

Well, the little tagline on the logo is *just* readable for me, otherwise it would be unreadable.

But anyways, did you want to do Gilder-Levin image replacement? Also would you want that tagline to also be available as text ("A tired dog is a good dog")?

Your h1 is already floated. Your logo is 254px wide. Do you have 254px worth of room there for the logo before it bumps down the checklist?

I'll give you two options, Gilder-Levin and plain image.
Here's what you could do, if you wanted to do Gilder-Levin:
HMTL
<h1><em>NK</em> Dog Walking: <small>A tired dog is a good dog</small><span></span></h1>

Just an idea.

h1 {
position: relative;
float: left;
width: 254px;
height: 73px;
font: 30px/35px "Britannic Bold","Trebuchet MS",Helvetica,Arial,sans-serif;
margin: 12px 0 0 .5em;
}
h1 small {
style the small how you'd like. I like to set them to display: block but you'll want to be sure that it doesn't pop out from underneath the image. Or, don't have the tagline at all nor a small. It's just an idea.
}



The important things here is, we're going to set the parent (h1) to position: relative, so that we can use it to position the span.
The h1 remains floated, but we're going to set a height and width (in px because the image is in px) and we're setting the text in px partially because we're doing this image-replacement trick.

Now the span.

h1 span {
position: absolute;
left: 0;
top: 0;
width: 100%; (this lets you adjust image height and width on the h1 alone if you get another image later)
height: 100%;
background: url(nkdogwalking-logo.gif) 0 0 no-repeat;
}

You'll have to probably adjust those font sizes I started with, I can't tell if they're already too big or what. That's a disadvantage of Gilder-Levin. You ideally don't want the text to peek out. If someone needs to enlarge the text enough, though, that's what will happen. You'll have to decide if you want to use overflow: hidden to clip the text, or let it spill out so someone can read it.


The other option is way simpler.

<h1><img src="nkdogwalking-logo.gif" width="254" height="73" alt="NK Dog Walking: A good dog is a tired dog"/></h1>

The problem with this is, retardo browsers like Chrome won't necessarily show the alt text if the image doesn't load. I don't know why, but this is evil and wrong. Can't believe people tolerate Chrome acting like this. Safari might too then. Gecko browsers are the only browsers who deal correctly with images and alt. Everyone else herps and derps.

[eLePHANT]

Hey stomme. Thanks for your detailed analysis of the pros and cons of either way of doing this. I decided on the simpler way. Since I don't even know if I'm done with this logo or not, I guess it doesn't matter. I will enlarge the text on the tagline.

I'm not liking how the white glow is looking either. Maybe the green in "NK" should be orange. Maybe even make the dog logo smaller. It did shift things a bit. I will need to fix that. I'll leave this for now. How does it look to you now that's it up? It's only on Home Page for now.

Thanks again for your help. I didn't realize it was that simple in the end. I could've done that. But not the more complex way you described.

[RyanReese]

If you want a design critique you can head on over to that section of the website where more people can get a gauge of your website and give input .

[ralph.m]

Looks like you've got this all set up now.

One thing I would suggest—if you are using Photoshop to make this logo, or Illustrator—is to add a "matte" color to the image as you save for the web, to remove that faint white line around the outside of the image:

matte: #EAD9B8

Or, set a bg color on the logo of #EAD9B8 and get rid of the transparency. The advantage of that is that you can have text underneath the image which will show if the image fails to load ... the Gilder-Levin technique that poes mentioned above.

PS: I like the logo. I've always really liked the site design, too. It has a warm feel that would make me want to hire you. Honestly. (And, of course, if I even had a dog ... and if I didn't want to walk it myself ... and if you didn't live on the other side of the world ... )

[eLePHANT]

One thing I would suggest—if you are using Photoshop to make this logo, or Illustrator—is to add a "matte" color to the image as you save for the web, to remove that faint white line around the outside of the image:

matte: #EAD9B8

PS: I like the logo. I've always really liked the site design, too. It has a warm feel that would make me want to hire you. Honestly. (And, of course, if I even had a dog ... and if I didn't want to walk it myself ... and if you didn't live on the other side of the world ... )

Thanks for the compliments, ralph. I'm glad the site has that effect on you. I was told by someone that it should be more "graphic intensive" like I paid someone to do it. So I get conflicted over that. This person works in the dog industry and thinks that my site looks too "homely." So I go back and forth in my head what I should do. At least I have a logo now.

That "matte" suggestion did the trick. Thanks so much. I did notice the white glow, but didn't understand why it was there since I chose "transparency" and "save for web--gif." It's gone now. I guess last thing to do now is to get the checkered marks and info on right centered again.

[Stomme poes]

save for web--gif

<-- that right there.

Gifs have a limited number of colours, and the transparency is only either on or off. No in-betweens. What you saw IN your image editor was a full alpha channel: various levels of transparency on all those pixes on the edge. I almost always use PNGs, but if they are indexed (which I do whenever I can get away with it, reduces filesize like mad), they have the same problems, visually. It's just with Gif there's no other option.

I use the Gimp, which (so far as I know) doesn't have a matte option as some special option. But i always do this:

If the image sits on a solid colour, and esp if I'm using Gilder-Levin or similar (where the image MUST cover up text etc) then I just add the solid colour to the image. This does mean the image cannot be placed in other places where the background colour is different. But it does mean I can make the file quite small. I can index it (limit the number of colours) and avoid transparency completely.

I won't mention how certain browsers will make sure the background colour you use will never match the CSS colour because they are retarded blah blah... but this can be a problem. I fix with pngcrush.

If I have a pattern behind the image, then a solid colour is of course a no-go. So instead, I would
- create the image with a solid background like above
- select the background area by colour using the colour select tool and remove it.

This leaves a "matte" at the edges of the image, so instead of say black pixels going to semi-transparency, I not have a bunch of solid pixels are just black, black-to-brown, and finally brown (the background colour). So no alpha transparency is needed, and the image can be indexed. Instead of a white edge or a jagged edge, you'll get what looks like a smooth fade-to-brown edge and a pattern would mostly look ok behind it.

If I must have a pattern behind with a very contrasty colour, the matte will show too much, or if the image might be placed either on a dark surface (like brown) or a light surface (like white) then I'd have pure non-indexed PNG with the alpha layer. Those are the largest files in terms of size, and IE6 will show whatever background colour was sitting in your pallette when you saved the image, instead of the transparency.

Of course every place here I'm saying "solid colour", if the image does not have the ability to move over the pattern, then transparency still isn't needed. The pattern goes in the background and matches up the pattern on the page.

These are all for things like logos where generally I don't use jpg.

I was told by someone that it should be more "graphic intensive" like I paid someone to do it. So I get conflicted over that.

I suspect that would end up cluttering the page and right now it's a good level of readability/findability. You have little icons in places to liven things up. I wouldn't make it more graphics-intensive unless indeed someone professional was able to give you a (different) design that could accommodate more images without turning into garbage. People aren't coming to marvel at how your site looks, they're coming to see if you are who they want to walk their dogs.

[eLePHANT]

Thanks for the explanations of things, Stomme. I appreciate that. That is a lot to take in. These terms like "Gilder-Levin" and "alpha transparency" are new to me. Always learn something new each time I come back here. You guys are amazing.

Well, I centered the ul and the contact info on right. I basically added more padding to each in the CSS. It looks fine in Firefox and Chrome, but not in IE8. The contact info on right side is a bit high. How does it look in IE9?

[RyanReese]

Looks basically identical in IE9 . No issues differentiating it from Chrome, at least.