div over table

meester · 01-06-2011, 10:03 PM

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 · 01-06-2011, 11:18 PM

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

meester · 01-07-2011, 01:51 PM

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 Code:

<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 · 01-07-2011, 02:56 PM

Quote:

Originally Posted by meester

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 · 01-07-2011, 03:06 PM

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 Code:

<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 · 01-07-2011, 06:16 PM

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
Sliced site from PS 7 into DW has content placement issues
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 · 01-10-2011, 02:40 AM

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.

01-06-2011, 10:03 PM	#1
meester New Member Join Date: Nov 2010 Posts: 11	div over table 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!

01-06-2011, 11:18 PM	#2
Mug Bronze Member Join Date: Dec 2010 Posts: 62	Do you have a link to the web page? or can you copy in the code? __________________ Mug Web Design Chester \| Check out our latest post on the Job Centre

01-07-2011, 03:06 PM	#5
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	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 Code: <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; } __________________ John Darling* Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

01-10-2011, 02:40 AM	#7
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	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. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

01-07-2011, 06:16 PM	#6
meester New Member Join Date: Nov 2010 Posts: 11	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 Sliced site from PS 7 into DW has content placement issues 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 __________________ -meester