Logo in Header help please!
 

OK, I've exhausted myself reading various threads and trying to figure this out for a number of weeks now. I finally got the logo placed and it almost looks right, but I have two problems. Please help!

(1) The logo is still a bit squashed.

Here is how it should look:

AlphaSmith Logo

Here is how it looks in the header:

Mushy Logo


How do I get the image to stop stretching and smooshing?



(2) I was able to move the orange search bar down by changing the height in #header .line1 in the CSS, but now the bar simply covers the top of the lower parts of the page, rather than shifting everything down.

How can I get all the various pages to align correctly?

The header CSS I now have is below.


Thank you for your assistance.



/*
header styles
*/
#header .line1 {
position: relative;
height: 125px;
direction: ltr;
}
#header .line1 .logo {
margin-left: 27px;
width: 885px;
}
#header .line1 .logo a img {
width: 370px;
height: 125px;
}

Re: Logo in Header help please!
 

#header .line1 .logo a img {
width: 370px;
height: 125px;
}

the size of your logo is

154px H x 390 W

soooo... obviously... change the dimensions to that.

let me know when ou have other ???

Re: Logo in Header help please!
 

You have to adjust the margin here

#content-container {
clear:both;
float:left;
margin-top:140px; change this to 200px or whatever works best for you
overflow:hidden;
padding-bottom:39px;
position:relative;
width:100%;
}

Re: Logo in Header help please!
 

Now Ashley, did you have to make me look quite so stupid??? :wink:

Apparently, I've been using the dimensions of the original graphic file INSTEAD of the dimensions of the converted png file.

I changed that, and it certainly helps. It's still slightly distorted and fuzzy though. You can see that if you look at the links above.

Any ideas on how to fix that?

(2) Steve, that solved my problem Thank you so very much.

My code on that id is different. I guess because you have 4.2.1? In any event, it worked nicely. I couldn't figure out which div was being used.

Re: Logo in Header help please!
 

Use Firefox with Firebug add-on, very helpful to find out css, classes, divs....
Your site still shows

#header .line1 {
direction:ltr;
height:140px;
position:relative;
}


#header .line1 .logo a img {
height:125px;
width:370px;
}

while your logo dims are <img height="154" width="390".......
You have to make line1 and image heights more than 154px
That's why " It's still slightly distorted and fuzzy though"
If you changethe css you may need to clear your cache to see the changes.

P.S. Correction: if your img dims are correct make
#header .line1 .logo a img {
height:154px;
width:390px;
}
to be same as your image dims

Line1 height must be more then 154px

Re: Logo in Header help please!
 

I could jump for joy. Problems solved.

Thank you so much for the time you took to step me through this. I will take your advice and get Firebug. Hesitant to try to learn just ONE MORE THING, but it will be helpful in the long run.

Again, thanks to both of you for helping out.

Re: Logo in Header help please!
 

Sorry was very buzzed!

Re: Logo in Header help please!
 

:lol: Ashley.

OK, the problems aren't completely solved. Apparently different pages have different templates that aren't based on one another. In other words, the content-container was fixed by using cflsystems' code, but only on SOME pages. In the shopping cart, for example, the pages are still shifted up so things are hidden under the orange bar. :?

Can anyone help me find that particular code and, perhaps, point me to all the various templates that are going to appear for customers that I need to fix?

Re: Logo in Header help please!
 

Apparently you are using fast lane checkout. This module has its own home.tpl and main.css files that you have to change too probably.
skin1/modules/Fast_Lane_Checkout

Re: Logo in Header help please!
 

there are a separate home.tpl and main.css in the flc folder but most of the CSS is still in the skin1/main.css.

The particular piece you are looking for is this.

.flc-container #content-container {
margin-top: 102px;
}