Banner alignment problem

**fairestcape** · 4 Dec 2008, 11:13 AM

The method you have used to insert an image map in the header is incorrect. Revert to the original tpl_header.php , then...

... Look here:

http://www.zen-cart.com/forum/showthread.php?t=114731

**digiVixen** · 4 Dec 2008, 12:37 PM

Thanks for your reply, I'm still lost - I don't have Dreamweaver just Image Ready to do the slicing and the code that it produced doesn't look the same as the other threads, so I don't know what to do now.

Here's the code in the banner.html file:

<html>
<head>
<title>banner_html</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="969" height="auto" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<a href="http://anitastergioudesigns.com/"
onmouseover="window.status='AnitaStergiouDesigns.com Home'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://anitastergioudesigns.com/images/banner/home.gif" width="969" height="113" border="0" alt="AnitaStergioudesigns.com"></a></td>
</tr>
<tr>
<td>
<a href="http://anitastergioudesigns.com/shoppe"
onmouseover="window.status='Shoppe at AnitaStergiouDesigns.com'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://anitastergioudesigns.com/images/banner/shoppe.gif" width="215" height="127" border="0" alt="Shoppe"></a></td>
<td>
<a href="http://anitastergioudesigns.com/studio"
onmouseover="window.status='Inspiration Studio at AnitaStergiouDesigns.com'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://anitastergioudesigns.com/images/banner/studio.gif" width="232" height="127" border="0" alt="Studio"></a></td>
<td>
<a href="http://anitastergioudesigns.com/chatter"
onmouseover="window.status='Forums at AnitaStergiouDesigns.com'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://anitastergioudesigns.com/images/banner/chatter.gif" width="187" height="127" border="0" alt="Chatter"></a></td>
<td>
<a href="http://anitastergioudesigns.com/blog"
onmouseover="window.status='AnitaStergiouDesigns.com Blog'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://anitastergioudesigns.com/images/banner/blog.gif" width="187" height="127" border="0" alt="Blog"></a></td>
<td>
<a href="http://anitastergioudesigns.com/team"
onmouseover="window.status='The AnitaStergiouDesigns.com Creative Team'; return true;"
onmouseout="window.status=''; return true;">
<img src="http://anitastergioudesigns.com/images/banner/team.gif" width="148" height="127" border="0" alt="Team"></a></td>
</tr>
</table>
</body>
</html>

**digiVixen** · 4 Dec 2008, 12:40 PM

I need baby talk here please - this has been driving me nuts for weeks and I just don't understand code!

**schoolboy** · 4 Dec 2008, 01:30 PM

I'll create a proper header image for you and build a map quickly.

You will need to use the image I build (I'll put it up on a link for you to copy) then I will post the MAP CODE in this thread.

Give me a couple of minutes...

**schoolboy** · 4 Dec 2008, 01:58 PM

Anita:

(BEFORE YOU START - BACKUP any php files first... !)

Get your modified LOGO here:

Code:

http://www.edutrade.co.uk/images/temp/logo.jpg

SAVE IT to the following on your server...

/includes/templates/custom/images/

You will see it's a JPG image, so you will need to modify the DEFINES for it in:

includes/languages/english/header.php

The settings you will need are:

Code:

// added defines for header alt and text

  define('HEADER_LOGO_WIDTH', '969px');
  define('HEADER_LOGO_HEIGHT', '240px');
  define('HEADER_LOGO_IMAGE', 'logo.jpg');

Then use this MAP code to create the image map in tpl_header.php as described in other postings.

Code:

<div id="headerWrapper">
<!--bof-branding display-->
    <div align="center"><img src="includes/templates/custom/images/logo.jpg" width="969" height="240" border="0" usemap="#Map">
   <map name="Map">
    <area href="http://anitastergioudesigns.com/shoppe" shape="rect" coords="81, 165, 182, 212">
    <area href="http://anitastergioudesigns.com/studio" shape="rect" coords="320, 165, 422, 212">
    <area href="http://anitastergioudesigns.com/chatter" shape="rect" coords="483, 165, 582, 212">
    <area href="http://anitastergioudesigns.com/blog" shape="rect" coords="688, 165, 787, 212">
    <area href="http://anitastergioudesigns.com/team" shape="rect" coords="852, 165, 950, 212">
   </map>
 </div>

(Naturally, you must check the hyperlinks - <a href=...> to make sure they point at the pages you want them to...)

YOU MAY ALSO HAVE TO alter wrapper widths in your stylesheet - I see you've been playing with these and seem to have deleted #logowrapper... In fact, I am sure you will have to adjust the stylesheet for wrapper widths.

To assist you here... The logo.jpg image (taken off your site, is 969px wide and 240px high)

**digiVixen** · 4 Dec 2008, 02:33 PM

Thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you!

I'll try it and let you know how I go.

**digiVixen** · 4 Dec 2008, 03:33 PM

Awesome. I got through it all up to the stylesheet.

Not sure about the #logo wrapper. I've done only the teensiest editing on the stylesheet myself, mostly changing colour codes - although the site was initially installed and set up by someone else.

I've never touched the #logo wrapper part of it and it seems to match what's in the unedited Zen download?

Hints please...

Thread: Banner alignment problem

Thread Tools

Search Thread

Display

Hybrid View

Re: Banner alignment problem

Re: Banner alignment problem

Re: Banner alignment problem

Re: Banner alignment problem

Re: Banner alignment problem

Re: Banner alignment problem

Re: Banner alignment problem

Similar Threads

Alignment of Banner Header position 2

banner 2 alignment

Banner Alignment

Sidebox banner alignment

theme277--css--banner alignment

Posting Permissions