Center Logo in Header Vertically & Wrap Text Around Image

[chava]

I followed the suggestions to center my logo in the header of my site by setting out separately:
#logo {
text-align:center;
}

This centered the logo horizontally just fine, but my header area increased in height, creating extra space on the bottom. I then added:

vertical-align:middle;
to the above and it brought the logo down a little from the top, but still left additional space at the bottom.

Is there something else I need to change. The extra height is fine, I guess, would just like to center it vertically.

Also, I tried wrapping text around my credit card image on the main page, positioning the logo on the right. It worked, but the text does not start at the same level as the top of the image. Is there something coded into zencart causing this? I notice that if you click on a product to go to the product listing page, the small photo upper left also has the text spaced down from the top. Any idea where I can change this to get the text in line with the top of these images.

I used this text (edited for posting here) on my main page to wrap the text around image:

<p><img src="http://www.antiquesbycharla.com/XXXX...c_discover.gif" alt="Credit Card Logos" align="right" width="176" height="35" hspace="25"/></p>
<p>For your shopping convenience, we accept Discover, Visa, MasterCard, checks or money orders.</p>

http://www.antiquesbycharla.com
Thanks for any help.

[RuFuS]

Hi Chava,

***Option One***
If you want to remove the space below the your logo try removing

<div id="taglineWrapper"></div>

<br class="clearBoth" />

both of which are right above the <!--eof-branding display--> you can also remove the vertical-align: middle; that you added
***************

***Option Two***
If you like the gap (and down want to remove it completely, after doing the above change your css as below

#logo {
         text-align: center;
		 padding-top:10px;
		 padding-bottom:10px;
         }

***************

[chava]

Thanks so much RuFus for the quick reply. I removed the vertical-align:middle and added the 10px padding to top & bottom. It did add the padding to the top and increased my header size vertically even more. So I need to apply the other fix you mentioned.

In My includes/templates/my custom template/common/tpl-header.php
(I am assuming this is the correct folder to change). You said to find:
<div id="taglineWrapper"></div>, but what I find doesn't have the </div> at the end.

I found this:
[FONT=Times New Roman]<!--bof-branding display-->[/FONT]
[FONT=Times New Roman]<div id="logoWrapper">[/FONT]
[FONT=Times New Roman] <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>[/FONT]
[FONT=Times New Roman] <div id="taglineWrapper">[/FONT]
[FONT=Times New Roman]<?php[/FONT]
[FONT=Times New Roman] if (HEADER_SALES_TEXT != '') {[/FONT]
[FONT=Times New Roman]?>[/FONT]
[FONT=Times New Roman] <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>[/FONT]
[FONT=Times New Roman]<?php[/FONT]
[FONT=Times New Roman] }[/FONT]
[FONT=Times New Roman]?>[/FONT]
[FONT=Times New Roman]<?php[/FONT]
[FONT=Times New Roman] if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {[/FONT]
[FONT=Times New Roman] if ($banner->RecordCount() > 0) {[/FONT]
[FONT=Times New Roman]?>[/FONT]
[FONT=Times New Roman] <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>[/FONT]
[FONT=Times New Roman]<?php[/FONT]
[FONT=Times New Roman] }[/FONT]
[FONT=Times New Roman] }[/FONT]
[FONT=Times New Roman]?>[/FONT]
[FONT=Times New Roman] </div>[/FONT]
[FONT=Times New Roman]</div>[/FONT]
[FONT=Times New Roman]<br class="clearBoth"/>[/FONT]
[FONT=Times New Roman]<!--eof-branding display-->[/FONT]
[FONT=Times New Roman][/FONT]
[FONT=Times New Roman]Am I supposed to remove these two lines in red, even though the first doesn't have </div> at the end?[/FONT]
[FONT=Times New Roman]Thanks.[/FONT]

[RuFuS]

Hi Chava,

You could actually (as you are not using this code) try removing everything in red below

<!--bof-branding display-->
<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
}
?>
<?php
if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
</div></div>
br class="clearBoth"/>
<!--eof-branding display-->

[RuFuS]

Your image alignment issue can be solved by changing your code to this:

<p><img src="http://www.antiquesbycharla.com/XXXX...c_discover.gif" alt="Credit Card Logos" align="right" width="176" height="35" />For your shopping convenience, we accept Discover, Visa, MasterCard, checks or money orders. </p>

[chava]

Hi RuFuS
Awesome! Thanks so much! Removing all that text worked perfectly.

Regarding my 2nd problem, the reason I had hspace="25" is to put some space between the text and the logo horizontally. If I remove that, it snugs the text right up to the logo. I did remove it just to see the effect, and it didn't move the text up in line with the top of the image. I have it removed now and the effect is still the same. Am I missing something.

[RuFuS]

Hi Chava,

The code for your second issue is slightly different, it not only removes the hspace (as it isn't needed) but places the image inside paragraph <p> tags.

I did quickly test this and it worked fine for me in Fireworks and IE?

[chava]

Thank you again RuFuS. I overlooked that I was suppose to remove one of the sets of <p> tags. Worked perfectly!

Thanks so much for your help. Now I can get on my way to finishing up my site and adding items.