By touchcrew on

I have posted about this a few times and no one seams to have an answer here is the post http://drupal.org/node/161831

Like it says in the post I have made an HTML image map for my header and I have tried to place it in the page.tpl but for some reason this is not working can some please let me know if I can do this in drupal and if so how?

⋅ Categories: Drupal 5.x

Comments

tdimg’s picture

tdimg commented

Without actually seeing the rest of the page, i.e. can you provide an online version, I don't think it has anything to do with the image map, more with the image itself.

As I said, if you can provide an online version of it, including your image map implemented, I can have a look. Without it, I can't really do much.

touchcrew’s picture

touchcrew commented

if you see I added the html header but now it as the is big space from the header to the body how do I get rid of that I know I need to take something out of the page.tpl but what. and when I do take some thing out the header stayes fixed but the side panels are unfixed and can move with the browser. The theme I am using in bluebreeze. here is the site http://www.fansportsunion.com/fan/

http://life1134.wordpress.com/
http://www.touchcrew.com/

tdimg’s picture

tdimg commented

You're approach with an image map here is a little bit unorthodox considering the current knowledge of and practices regarding CSS. It's also sub optimal regarding search engine optimisation, and it isn't quite accessible, for all those reasons I wouldn't recommend to go ahead with it but to study css, navigation lists and image-replacement techniques.

But here's what you have to do to get it working with an image map:

This already works in Firefox but maybe not in Internet Explorer (who knows).

Find in your style.css the following entry for #header and add/change:

#header {
background:transparent url(images/bg-header.gif) repeat-x scroll 0%;
height:200px; /*previously 215px*/
overflow:hidden; /*new!*/
margin:1px 0pt 0pt;
padding:0pt;
}

If that doesn't work in IE, than you'll have to get rid completely of the div id=logotitle, and the div class=menu in your page.tpl.php

touchcrew’s picture

touchcrew commented

This is what I did 

}

#logo-title {
  position: relative;
  overflow: visible;
  float: left;
  height: 43px;  -------------------------------------  this is what I changed 
  padding-left: 10px;
  z-index: 1;
}

}

#logo-title {
  position: relative;
  overflow: visible;
  float: left;
  height: 1px;----------------------------I changed it to this 
  padding-left: 10px;
  z-index: 1;
}

and it took out the space that was below.

http://life1134.wordpress.com/
http://www.touchcrew.com/