Okay, I've almost got it
(see it here). Since I needed an image not in the background for the image map of the email address I decided to just use the bottom half of the title area with the hours & contact info on it.
I also resized a few things and moved the navigation.
The main background is all one image now, except for the bottom. I put the superheroes feet in as a png directly below the main image jpg to give it a little dimension.
I'm very close now, but I've run into a strange snag. on my new nav bar for some reason the "Map" button only shows up in IE, Firefox completely ignores it and I can't see a difference in the coding.
HTML-------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Big City Comix & Games - Kansas City's Premiere Comic & Game Store</title>
<link href="css/bcc.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container-white">
<div id="container2">
<div class="email">
<img src="images/nav-11-23/header-hours.png" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="181,28,406,49" href="Gerald@BigCityComix.com" alt="email me here" />
</map></div>
<div class="nav2">
<p class="image-swap-comics"> <a href="#nogo"><em></em></a> </p>
<p class="image-swap-map"> <a href="#nogo"><em></em></a> </p>
<p class="image-swap-games"> <a href="#nogo"><em></em></a> </p>
</div>
</div>
<div id="heroes-bottom"> <img src="images/heroes/heros_bottom.png" /></div>
</div>
</body>
</html>
CSS (this needs to be cleaned up, sorry for the mess)-------------------------------
@charset "utf-8";
/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
border: 0px;
background-image:url(../images/background/comic-background.jpg);
}
#wrapper {
width: 960px;
margin: 0 auto 0 auto;
position: relative;
}
br.clear {
clear:both;
}
#heroes-bottom {
width: 938px;
height: 70px;
background-image:url(../images/heroes/heros_bottom.png);
position: relative;
left: 5px;
top: 0px;
}
#container2 {
width: 938px;
height: 615px;
margin: 0 auto 0 auto;
border-top: 5px solid black;
border-left: 5px solid black;
border-right: 5px solid black;
background-image:url(../images/heroes/heroes-top.jpg);
background-repeat: no-repeat;
}
#container-white {
margin: 5px auto 0 auto;
width: 942px;
height: auto;
}
/*COMICS BUTTON*/
.image-swap-comics {
width: 85px;
height: 15px;
position: relative;
padding: 0;
margin: 0;
line-height: 85px;
vertical-align: top;
text-align: center;
}
.image-swap-comics em {
display: block;
width: 85px;
height: 15px;
position: absolute;
top: 0;
left: 0;
background: url(../images/nav-11-23/comics.png);
background-position: left;
}
.image-swap-comics a:hover em {
background: url(../images/nav-11-23/comics.png);
background-position: right;
}
/*TOURNAMENT & GAMES BUTTON*/
.image-swap-games {
width: 151px;
height: 38px;
position: relative;
padding: 0;
margin: 0;
line-height: 151px;
vertical-align: top;
text-align: center;
}
.image-swap-games em {
display: block;
width: 151px;
height: 38px;
position: absolute;
top: 25px;
left: 0;
background: url(../images/nav-11-23/games.png);
background-position: left;
}
.image-swap-games a:hover em {
background: url(../images/nav-11-23/games.png;
background-position: right;
}
/*MAP BUTTON*/
.image-swap-map {
width: 43px;
height: 15px;
position: relative;
padding: 0;
margin: 0;
line-height: 43px;
vertical-align: top;
text-align: center;
}
.image-swap-map em {
display: block;
width: 43px;
height: 15px;
position: absolute;
top: 15px;
left: 0;
background: url(../images/nav-11-23/map.png);
background-position: left;
}
.image-swap-map a:hover em {
background: url(../images/nav-11-23/map.png);
background-position: right;
}
.nav {
background-color:#FFF100;
width: 700px;
height: auto;
position: relative;
top: 300px;
left: 119px;
z-index: 50;
border: 5px solid black;
clear: both;
}
.nav2 {
width: 150px;
height: auto;
position: relative;
top: 115px;
left: 100px;
z-index: 50;
clear: both;
}
#container {
width: 943px;
height: 690px;
margin: 0 10px 0 10px;
border: 5px solid black;
}
#container-map {
width: 945px;
height: 875px;
margin: 0 10px 0 10px;
border: 5px solid black;
}
.center {
vertical-align: top;
width: 869px;
margin: 0 0 0 0;
}
#hero-back {
position: relative;
z-index: 10;
width: 1024px;
height: 550px;
margin: 40px auto 0px auto;
}
#hero-front {
position: relative;
z-index: 1;
width: 654px;
height: 473px;
margin: 40px auto 0px auto;
}
#front_box {
position:relative;
display:block;
}
img.front {
position: absolute;
top: 200px;
left: 285px;
}
#logo_box {
position:relative;
display: block;
}
img.logo {
position: absolute;
top: 5px;
left: 35px;
}
#back_box {
position:relative;
display: block;
}
img.back {
position: absolute;
top: 115px;
left: 10px;
z-index: -5;
}
.info-box {
background-color:#FFFF00;
width: 700px;
position: absolute;
top: 350px;
left: 135px;
z-index: 50;
border: 5px solid black;
clear: both;
}
.email {
width: 611px;
height: 76px;
position: relative;
top: 73px;
left: 306px;
}
#footer {
position: absolute;
left: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 9px;
}
Any ideas on the strange "Map" button issue?
Thanks,
JTN
Login 
Web Design & Development 
Search 
Facebook
Twitter
TechGuy.tv
TSG Mobile