Definitely a CSS Layout problem that makes you go WOW! =)

Ok, hopefully I can spit this all out correctly. I am working on a site. It currently has an existing php display database for users, but I am trying to get it to fit into my existing new web design layout and I am having complications.

If you go to newlifeultrasound.com/photos/ and log in using:

testname
password

It will bring you up a display of the picture database. However, I am trying to take that little snippet of php code, and effectively place it onto a page such as newlifeultrasound.com/about.htm. Each time I try and set that code within that page, the top background images and stuff all start repeating, and get messed up and stuff.

So, what I tried to do was create a DIV tag with the following class properties:

DIV.pictures {
z-index:1;
float:right;
position:absolute;
left: 155px;
top: 423px;
width: 714px;
height: 510px;

}

However, when in Dreamweaver, it all looked good like it was going to work, however, when I uploaded the file, the database was no where to be found. So, does anyone have any suggestions of how I can place this php code into the existing design newlifeultrasound.com/about.htm without completely screwing up the design/layout?

<h1 style="color:#842b02;"><?php echo $q_login['name']; ?></h1>
<h2 style="color:#842b02;"><?php echo $q_login['tagline']; ?></h2>
<table width="558" border="0">
<tr>
<td width="17%"><div align="center"><?php echo $htmlimages[0]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[1]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[2]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[3]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[4]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[5]; ?></div></td>
</tr>
<tr>
<td width="17%"><div align="center"><?php echo $htmlimages[6]; ?></div></td>
<td colspan="4" rowspan="4" align="center" valign="middle" bgcolor="#842b02"><div align="center"><?php echo $centerimage; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[7]; ?></div></td>
</tr>
<tr>
<td width="17%"><div align="center"><?php echo $htmlimages[8]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[9]; ?></div></td>
</tr>
<tr>
<td width="17%"><div align="center"><?php echo $htmlimages[10]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[11]; ?></div></td>
</tr>
<tr>
<td width="17%"><div align="center"><?php echo $htmlimages[12]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[13]; ?></div></td>
</tr>
<tr>
<td width="17%"><div align="center"><?php echo $htmlimages[14]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[15]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[16]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[17]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[18]; ?></div></td>
<td width="17%"><div align="center"><?php echo $htmlimages[19]; ?></div></td>
</tr>
<tr>
<td colspan="4" valign="top"><div align="center" class="style2" style="margin-left:230px;">
<p class="copyright">&copy; Copyright 2007<br />
New Life Ultrasound Inc. </p>
</div></td>
</tr>
</table>

 

I can say that the CSS snippet you posted is conflicting with itself.

DIV.pictures {
z-index:1;
float:right;
position:absolute;
left: 155px;
top: 423px;
width: 714px;
height: 510px;
}

Code (markup):

When you float something, you've decided its position, so you can't then go say position: absolute too. You gotta pick one.

The z-index is generally pretty useless except when there are two specifically positioned things, and you want one "on top of" or "beneath" the other (I'm using quotes cause monitors are flat). Something positioned absolutely usually sits above the regularly-flowing document anyway.

I also bet you don't need a seperate div for every image, or at least you wouldn't for normal images sitting on your server (you would have maybe one containing div for all the images, and each image itself could then be floated or whatever for positioning)... tho I'm thinking you're using the divs as a placeholder wherein the php can plunk the images. Since you're already using a table, can't you just use the td itself? I'm not even sure a td can hold a div legally... *edit yes it can.

You might be too busy or have a deadline to jump into wholly divs and CSS, but this page looks complicated enough to need various CSS trickery (php stuff aside).


*Edit, I don't think you've said... wth is 4d ultrasound? video??

 

Well, first up I would axe ALL of the inlined presentation - you are using CSS, so USE it.

Second, I'd lose the align="center" wrapping DIV's, they serve NO purpose that's apparant (though I'm guessing)

Third, I'd clean up the php.

Fourth, axe the stupid mm_ javascript nonsense - that was a bad idea in 1997, it's pointless today.

Fifth, I'd generate actual THUMBNAILS to save on the AGONIZINGLY LONG page load instead of shrinking the full size images browser-side. (edit - my bad, the full size images are tiny - it's that header that's the pig)

Finally, I'd axe the table since it serves NO purpose.

Of course, you said dreamweaver, which explains a LOT of the waste and bloat I'm seeing.