div over table

meester · Jan 6, 2011

Hey everyone, I'm trying to get my div to be placed relative over a table. The second I change div position to relative, it gets pushed off the table, but keeps it's position numbers in code. Is this even possible to do?? Do I need to change the z-index?
Any help would be fantastic, thanks!

Mug · Jan 7, 2011

Do you have a link to the web page? or can you copy in the code?

meester · Jan 7, 2011

Yeah I can post the code. I started off by slicing the layout in photoshop, and would like to throw my text in where I need to.
Here's the code:

HTML:

<html>
<head>
<title>OemPrototype</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-image: url();
	background-repeat:repeat-x;
	background-position:top;
	padding:top;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.style1 {
	font-size: 14px;
	color: #666666;
}
.style2 {color: #0E7BC0}
.style4 {
	font-size: 16px;
	color: #FFFFFF;
	font-weight: bold;
}
.style5 {
	font-size: 12px;
	color: #CDCDCF;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<!-- ImageReady Slices (website_render_forweb.psd) -->
<table width="1452" height="963" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
	<tr>
		<td rowspan="4">
			<img src="http://www.webdesignforum.com/images/website_render_forweb_01.jpg" width="231" height="963" alt=""></td>
		<td colspan="2">
			<img src="http://www.webdesignforum.com/images/Header.gif" width="968" height="84" alt=""></td>
		<td rowspan="4">
			<img src="http://www.webdesignforum.com/images/website_render_forweb_03.jpg" width="253" height="963" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.webdesignforum.com/images/Side_nav_brief.gif" width="484" height="451" alt=""></td>
		<td>
			<img src="http://www.webdesignforum.com/images/website_render_forweb_05.jpg" width="484" height="451" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="http://www.webdesignforum.com/images/Footer.jpg" width="968" height="144" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" align="left" valign="top">		  <p>&nbsp;</p>
			<div id="Layer2" style="position:absolute; left: 329px; top: 114px; width:144px; height:115px; z-index:2;">
			  <p class="style4">Services</p>
			  <p class="style4 style5">CNC Machining<br>
			    Plastic Injection Molding<br>
			    Vacuum Forming<br>
			    Product Design<br>
			    Product Manufacturing</p>
		    </div>			<p><br>
		  </p></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="Layer1" style="position:absolute; width:323px; height:18px; z-index:1; left: 875px; top: 94px;"><strong><span class="style1"><span class="style2">services</span> | our work | facilities | about | contact </span></strong></div>
</body>
</html>

Thanks again

PixelPusher · Jan 7, 2011

meester said:
Hey everyone, I'm trying to get my div to be placed relative over a table. The second I change div position to relative, it gets pushed off the table, but keeps it's position numbers in code. Is this even possible to do?? Do I need to change the z-index?
Any help would be fantastic, thanks!

If you want to stack them (div over table), yes you will need to adjust the z-index. Using relative position for both will not work either. When using relative position, elements stay in position "relative" to each other.

What you are wanting to do is pull the div out of the normal flow of the page, and place it over the top of an element. To do this you need to use absolute position.

PixelPusher · Jan 7, 2011

When you absolutely position an element, it is aligned to the first parent with a position set to anything other than "static". If such parent doesn't exist, it will position itself to the body. In this case you would want a container of sorts (which you may already have...i didn't read through your code below

). So it would look something like this:

HTML

HTML:

<div class="container">
   <table>....</table>
   <div>...</div>
</div>

Code:

div.container, div.container table {
   position:relative;
   z-index:1; /* default index setting, might not be needed */
}
div.container div {
   position:absolute;
   top:0;
   left:0;
   z-index:3;
}

meester · Jan 7, 2011

This is good information, definitely helped me out. What I was really trying to do though, was have divs on top of my photoshopped sliced layout (in table form) which I got to work, but when I previewed in my browser and stretched the webpage it would stay stationary (like it's supposed to) and not stay with the table. Couldn't get it to work, so now I am basically doing what you told this guy to do in this thread
http://www.webdesignforum.com/8699-sliced-site-ps-7-into-dw-has-content-placement-issues.html
I'll just use the same images from photoshop, placed as div backgrounds..if that is the best way..?
Again, thanks John you've been a HUGE help and not just in these two threads

PixelPusher · Jan 10, 2011

Meester,

I'm glad to hear I could help you out and shed a little light on the concept of positioning elements with css. In regards to the thread you mentioned and your layout as well, yes it is definitely better to build you web layout through divisions (divs) not tables. Save the tables for tabular data (data grids).

As a rule of thumb, the only images that should be placed on a page through an image tag <img> are those that relate to the pages content. For instance a picture of a new model home on a real estate website relates to the content (text) on the page. All other images, that typically are nothing more than dressing for the site (gradients, graphics, fancy borders, etc) should all be added through css.

div over table

meester

New Member

Mug

New Member

meester

New Member

PixelPusher

Super Moderator

PixelPusher

Super Moderator

meester

New Member

PixelPusher

Super Moderator