HTML Forum

**secured-nor1** · 10-08-2010, 10:24 AM

Hi all! I am newbei to this forum and also webdesigning. I trying to position a DIV related to an image. Here is my code without any success.

Code:

<html>
<head>
<title>Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<style type="text/css">
body {
	background-color: #666;
}
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 683px;
	top: 335px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" valign="middle"> 
<tr> 
<td > 
<center>
  <div>
    <div id="apDiv1"><img src="images/ide/ide_menu_item_2.png" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></div>
    <img src="images/typ_bg.jpg" alt="" name="GoodBad" width="815" height="514" id="GoodBad">
  </div>
</center> 
</td> 
</tr> 
</table>
</body>
</html>

I am trying to overlay ide_menu_item_2png over typ_bg.jpg and I am not allowed to use typ_bg.jpg as background image because of a 3rd party script.

This is very annoying because I cant go further.
My website on construction
http://cun8.net/gb.html

**LadynRed** · 10-08-2010, 01:44 PM

Good grief - 1 - get rid of the tables for layout, they were meant for data and that's not the modern way to build a layout. 2 - get rid of the horrid deprecated <center> tag and use CSS to position things as needed. 3 - you can't position the div relative to the image inside it - it's works the other way around, the image gets positioned relative to it's parent - the div. Why do you need absolute positioning anyway? It's not really the best way to build a layout.

You also don't need all that javascript junk to do a simple image rollover, use CSS.

**secured-nor1** · 10-08-2010, 06:17 PM

Ok thanks.
1. tables be gone!
2. I'll get rid of <center> but tell me how with CSS?
3. Any example code that I can see and steal?

I just want to center the typ_bg.jpg and overlay the the ide_menu_item_2.png over it. Thats it. I'm not a fan of absolute or smirnoff =)

**LadynRed** · 10-12-2010, 08:19 AM

To center your site - http://www.webmaster-talk.com/css-fo...r-website.html

To center the background it would be something like this applied to the div to have the bg image;
background: url(images/typ_bg.jpg) center top;

Then you put your menu in.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!