Positioning Transparent .gif Over Sectioned HTML table

Hello everyone,

I made this .gif with transparency over it so I could place it on top of my header table. The problem is that the table is cut into many rows and columns as Adobe Fireworks helped me generate a sliced image that has a link right in the middle of it. I don’t know if there is a way to put this .gif file directly on top of this table?

Here’s what this table looks like:


<table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="635" align="center">
  <!-- fwtable fwsrc="header.png" fwpage="Page 1" fwbase="headerslice" fwstyle="Dreamweaver" fwdocid = "1957171909" fwnested="0" -->
  <tr>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="87" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="464" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="84" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
  </tr>
  <tr>
    <td colspan="3"><img name="headerslice_r1_c1_s1" src="style/headerslice_r1_c1_s1.jpg" width="635" height="19" border="0" id="headerslice_r1_c1_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="19" border="0" /></td>
  </tr>
  <tr>
    <td rowspan="2"><img name="headerslice_r2_c1_s1" src="style/headerslice_r2_c1_s1.jpg" width="87" height="107" border="0" id="headerslice_r2_c1_s1" alt="" /></td>
    <td><img name="headerslice_r2_c2_s1" src="style/headerslice_r2_c2_s1.jpg" width="464" height="80" border="0" id="headerslice_r2_c2_s1" usemap="#m_headerslice_r2_c2_s1" alt="" /></td>
    <td rowspan="2"><img name="headerslice_r2_c3_s1" src="style/headerslice_r2_c3_s1.jpg" width="84" height="107" border="0" id="headerslice_r2_c3_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="80" border="0" /></td>
  </tr>
  <tr>
    <td><img name="headerslice_r3_c2_s1" src="style/headerslice_r3_c2_s1.jpg" width="464" height="27" border="0" id="headerslice_r3_c2_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="27" border="0" /></td>
  </tr>
</table>

Has anyone encountered something like this before?

You could do something like wrap a div around the table, set it to position:relative, then place the image inside that div also and set it to position: absolute. That way, the image can sit over the top of the table.

[I’ll move this to the CSS forum.]

Great Suggestion! It worked, basically; HOWEVER, underneath the .gif lies a Mapped Image Slice which contains a link to my home page. With the .gif on top, the link is inactive. How can I solve this problem?

Position an anchor absolutely on top of the gif with a higher z-index and a size to match the link underneath.

You can’t click through elements (although for modern browsers you can do it with pointer-events: none and the alpha image loader for IE).

It’s actually a very irregular image map. It wasn’t a block- it hugged the irregular shape of what was under there. Fireworks generated the code for me when I finished the Slice right around the lettering.


<div style="position:relative;">
<img src="style/loveheader.gif" style="position:absolute; padding-left:26%;" />
<table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="635" align="center">
  <!-- fwtable fwsrc="header.png" fwpage="Page 1" fwbase="headerslice" fwstyle="Dreamweaver" fwdocid = "1957171909" fwnested="0" -->
  <tr>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="87" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="464" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="84" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
  </tr>
  <tr>
    <td colspan="3"><img name="headerslice_r1_c1_s1" src="style/headerslice_r1_c1_s1.jpg" width="635" height="19" border="0" id="headerslice_r1_c1_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="19" border="0" /></td>
  </tr>
  <tr>
    <td rowspan="2"><img name="headerslice_r2_c1_s1" src="style/headerslice_r2_c1_s1.jpg" width="87" height="107" border="0" id="headerslice_r2_c1_s1" alt="" /></td>
    <td><img name="headerslice_r2_c2_s1" src="style/headerslice_r2_c2_s1.jpg" width="464" height="80" border="0" id="headerslice_r2_c2_s1" usemap="#m_headerslice_r2_c2_s1" alt="" /></td>
    <td rowspan="2"><img name="headerslice_r2_c3_s1" src="style/headerslice_r2_c3_s1.jpg" width="84" height="107" border="0" id="headerslice_r2_c3_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="80" border="0" /></td>
  </tr>
  <tr>
    <td><img name="headerslice_r3_c2_s1" src="style/headerslice_r3_c2_s1.jpg" width="464" height="27" border="0" id="headerslice_r3_c2_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="27" border="0" /></td>
  </tr>
</table>
</div>
<map name="m_headerslice_r2_c2_s1" id="m_headerslice_r2_c2_s1">
  <area shape="poly" coords="22,49,36,18,45,9,57,2,60,8,56,17,54,25,52,32,53,38,55,33,57,28,63,29,64,32,65,36,63,42,59,47,55,50,57,53,59,57,63,59,66,58,68,53,68,49,67,46,66,43,65,37,69,37,70,31,71,23,74,16,79,11,82,7,83,10,83,15,87,11,92,8,96,8,100,10,104,15,106,22,106,27,104,34,99,43,95,50,91,55,95,55,100,53,101,47,103,39,107,35,112,33,117,34,121,31,125,31,139,29,145,28,150,27,150,23,151,13,151,13,152,10,163,0,164,6,164,15,163,24,166,26,171,24,177,24,181,24,185,23,192,24,202,24,212,24,220,28,222,31,228,28,234,28,244,28,252,28,258,36,262,28,264,24,271,22,278,23,280,28,280,32,285,30,292,29,296,28,303,28,313,30,322,29,340,30,345,25,352,24,359,24,365,27,370,30,374,30,381,30,390,29,397,29,406,30,460,30,464,36,464,44,460,52,450,54,192,54,184,56,176,55,170,58,164,57,156,60,151,59,144,61,137,59,132,62,128,63,116,63,104,64,97,66,90,68,84,66,78,70,70,70,63,72,54,70,50,65,44,59,42,56,32,58,30,66,28,70,22,77,14,80,6,78,1,73,0,67,3,62,9,64,14,65,13,59,16,53,22,49" href="javascript:;" alt="" onmouseout="MM_swapImage('headerslice_r2_c2_s1','','style/headerslice_r2_c2_s1.jpg',1);"  onmouseover="MM_swapImage('headerslice_r2_c2_s1','','style/headerslice_r2_c2_s4.jpg',1);"  />
</map>

Try raising the z-index on the image - assuming that the overlay gif and the image map are within the same stacking context.

Do you have this online somewhere?

On the .gif image, I raised the z-index to 99999, and it didn’t work.

I just FTP’d it to the following: Atlanta Review Group™- Dating Section The moving hearts and bear’s hand is the gif and the Atlanta Review Group header is the jpg underneath with a slice on top that hugs very closely around the lettering.

Hi,

The image map is actually almost as big as the animated gif you have on top so there’s no point in raising the x-index because that would obscure your animated gif.

The easiest solution as I said before is simply to place a blank anchor on top. It won’t hug the images like an image map but it will be close enough for what you want.

Use the following extra code:


#wrap {
    position:relative;
    width:635px;
    margin:auto;
}
#maintable{
    width:100%;
    margin:auto;
}
.home {
    position:absolute;
    z-index:99;
    top:40px;
    left:100px;
    width:450px;
    height:50px;
    text-decoration:none;
    background:url(http://productreviewsbytyler.com/style/spacer.gif) no-repeat -1px -1px;
}
.overlay {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
}

Then change the html in bold:


<body onload="MM_preloadImages('style/headerslice_r2_c2_s1.jpg','style/headerslice_r2_c2_s4.jpg')">
[B]<div id="wrap">
    <div><img src="http://productreviewsbytyler.com/style/loveheader.gif" class="overlay"  /><a class="home" href="#"></a></div>
    <table id="maintable" cellpadding="0" cellspacing="0">[/B]
        <!-- fwtable fwsrc="header.png" fwpage="Page 1" fwbase="headerslice" fwstyle="Dreamweaver" fwdocid = "1957171909" fwnested="0" -->
        <tr>
            <td><img src="http://productreviewsbytyler.com/style/spacer.gif" alt="" name="undefined_2" width="87" height="1" border="0" /></td>


To be honest and without meaning to be rude that page could do with some tender loving care as none of those tables are needed. CSS could do that in about a third of the code quite easily. Try not to use inline styles either as that just bloats the markup.

I’d also lose the animated gifs as that instantly dates the site as 1999 unless you were going for a retro feel on purpose :slight_smile:

I’m not loving the design either - sorry.:slight_smile: (Hope Jason’s not looking)

Also note:

Below you will see some of the some of the most popular online

So what does a modern web designer do to put animations in their header images? I know there’s a lot of Flash animations used, but not everyone has Flash Player.

If they have any sense then they don’t use animation at all or at least have it turned off by default. Most users find them distracting and indeed your animated gif gave me a headache with all that vibration and I wonder what would happen to someone with epilepsy.

If you are talking about slideshow and rotating banners then that is usually done with javascript but again you have to be careful not to annoy users. There is a fine line between good and naff and if any doubt then opt out instead.

There is a reason that the blink tag was outlawed :slight_smile:

That right there makes it sound like you are doing something HORRIBLY wrong from a markup and layout perspective.

Taking a look at your page, first thing I’d do is swing a GIANT AXE at that annoying epileptic fit inducing animooted gif nonsense in the header. I’m also wondering why you seem to think you need a table since I see no tabular data, or even columns. Even when using tables for layout (which these days is a cardinal sin) it makes no sense to have tables in there!

You’ve barely even got CONTENT and you’re already pushing 480k – which is ridiculous. that’s easily three and a half times the upper limit I allow for a single page on a site,

The conflicting colors, inconsistent font sizes, animated GIF, spacer.gif’s, tables for nothing, bold and underscore tags on elements that should be headings (I think, hard to tell with the lack of document structure), inlined presentation on EVERY line, goofy javascripted font effects, static scripting inlined in the markup, comic sans… I’m sitting here wondering where the auto-playing midi music is to finish off the 1997 style appearance and coding practices.

Peeking under the hood you have that stupid malfing mm_ javascripted nonsense for mouse hover effects (basically using Javascript to do CSS’ job) – a likely indicator you’re using Dreamweaver or some other Adobe product. Do yourself a favor and pitch the bloated wysiwyg editor that vomits up code any old way in the trash, go get a flat text editor and work with the HTML directly.

… and of course jquery bloat in a beginner page and a transitional doctype – transitional of course meaning you’re in transition from 1997 to 1998.

Of course the valid site links (on a site that isn’t valid) are also good for a chuckle. Some advice, visitors to websites don’t care if it’s valid or not, so those links and images are just a waste of bandwidth. It’s only coding geeks like you’ll find on these forums who care – or even should care.

Just out of curiosity, what decade and a half out of date tutorial or book are you learning to code from?

Wait, is this a joke? This is a joke, right? You’re building one of these?
The World’s Worst Website Ever!

If this isn’t a joke, for starters one should clean up your HTML to what’s actually needed, getting rid of all the scripting for nothing nonsense you’ve got in there:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="Description"
	content="Online dating services are becoming increasingly popular within the last decade. Statistically, the divorce rate is lower for matches made online."
/>

<meta
	name="Keywords"
	content="atlanta,dating,mature,singles,senior,age"
/>


<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Atlanta Review Group&trade;- Dating Section
</title>

</head><body>

<div id="pageWrapper">
	<h1>
		Atlanta <small>Deview Cro_e</small>
		<span></span>
	</h1> 
	
	<h2>Dating Section</h2>
	<p class="standout">
		Below you will see some of the some of the most popular online dating services. A lot of these matchmaking services specialize in an age group or sites for people looking to mingle within a certain ethnic group.
	</p>
	<p class="realMature">
		If you are within the age range of 35-55, you have a chance at online dating success at
		<a href="http://www.atlantareviewgroup.com/dating/realmaturesinglesreview1.php">
			Real Mature Singles
		</a>
	</p>
	
	<p class="seniorMeet">
		Maybe you are a senior citizen looking to date other seniors. You would probably have some fun on
		<a href="http://www.atlantareviewgroup.com/dating/seniorpeoplemeetreview1.php">
			Senior People Meet
		</a>
	</p>
	
	<div id="footer">
		<a href="http://validator.w3.org/check?uri=referer">
			<img
				src="http://www.w3.org/Icons/valid-xhtml10"
				alt="Valid XHTML 1.0 Transitional"
				width="88" height="31"
			 />
		 </a>
		 <a href="http://jigsaw.w3.org/css-validator/check/referer">
			<img
				src="http://jigsaw.w3.org/css-validator/images/vcss"
				alt="Valid CSS!"
			/>
		</a>
		<!--[if IE]>
			<object
				classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
				codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
				width="380" height="68"
			>
		<!-- <![endif]-->
		<!--[if !IE]> -->
			<object
				type="application/x-shockwave-flash"
				data="thanksforvisiting.swf"
				width="380" height="68"
			>
		<!-- <![endif]-->
			<param name="movie" value="thanksforvisiting.swf" />
		</object>
		<div>
			&copy; AtlantaReviewGroup.com<br />
			Updated June 3, 2011
		</div>
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>	

</body></html>

EVERYTHING else you are doing belongs in the CSS… or shouldn’t even be on the page in the first place… That animated flash thing at the bottom for example is in desperate need of a giant axe swung at it. You shouldn’t even be attempting that type of fancy nonsense until you’ve grasped the basics.

Too late - you’ve been caught :slight_smile:

Great Posts.

I knew that .gif file was not done. I was slowing the movement down a lot, but I understand that you have said .gif is a thing of the past.

This is my first website, so this is where I started (YouTube - ‪How to Create a Website the Right Way For Beginners Part 1‬‏)

Don’t worry we all made the same mistakes when we started. :slight_smile:

You’re lucky in that someone has pointed out the mistakes early on - it took me years to lose all my bad habits and learn all the things mentioned in the above posts.

Just keep practising and make it better each time. We don’t expect you to understand everything we say in one sitting but just take on board as much as you can and then keep coming back to it as you learn and understand more.

That tutorial is what I call nube-bait… If that’s “the right way” then I’m the Queen of England. That video looks like some PSD jockey showing off his lack of understanding how to build a website properly.

My advice if you’re just starting out is multi-fold This is advice I WISH someone had given me eight years ago!

  1. The Internet isn’t JUST a visual medium, and “what you see” is NEVER what visitors get. With all the different font renderers in the various operating systems, different screen sizes, different OS dot pitch (pixels per character size) and array of different browsers, the very notion of being able to “draw a pretty picture” for a one-size fits all design is nonsensical rubbish. So until you understand how to build a page’s HTML directly and how to create the layout using CSS, do yourself a huge favor and forget photoshop, dreamweaver, fireworks, frontpage, or any other “visual site construction” method even EXISTS.

  2. Do not just copypasta “gee ain’t it neat” stuff from sites like dynamic drive or Dreamweaver templates (or auto-code) until you understand how to make them from scratch – otherwise you have no clue if you’re copying bad code or not… and when it comes to javascript based stuff, there’s a HELL of a lot of bad code out there. MOST of the “gee ain’t it neat” animated stuff actually getting in the way of making a usable real-world deployable site – no matter how much the flashtards claim otherwise.

  3. For just starting out, I suggest you grab the Sitepoint Book Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd. He gets you right down into coding properly skipping over a whole bunch of bad practices you are better off not learning. Mind you, there’s a bunch of garbage in the last few chapters I personally would never put on a website (like the google analytics and other copypasta plugin crap), but the core bits of building a site using HTML and CSS gives you a rock solid foundation on which you can build your skills. You can buy that book through this site, at most major booksellers, and it’s even on many college and public library shelves – to be brutally frank, it’s probably the ONLY blasted book on shelves worth a damn so far as HTML/CSS for beginners is concerned, most everything else being decade out of date rot.

  4. once you have a grasp of the grammar, syntax and methodologies of HTML/CSS, I highly suggest you read beginning to end a decent reference of the HTML tags. If you don’t know all the tags, you won’t know semantically which tags to use. I like the old WDG reference:
    HTML 4 Reference

Even if it is a bit dated… the reference here at sitepoint is good too:
HTML Reference

The Sitepoint reference for CSS being one of the best out there.

It’s dry stuff, but it’s important you know this if you’re going to learn to build websites properly. It’s why we call it work and not happy happy fun time. :smiley:

I can’t wait to read Sitepoint’s book.