Forcing a 3 row layout dynamically

rosh1e · April 7th, 2007, 07:11 AM

Hi,

Does anyone know how I can force my table to be in a 3 row format with the number of columns created dynamically. As I would like items to be displayed in a fixed div. However I want them to be able to scroll through the table with horizontal as opposed to vertical scroll bars. When I've tried it, it comes out in a 3 column format, with the 4th row hidden from view.

In summary I would like a new column to be created for every 4th item. I have done this using tables, but I was told that I was using too many as each item was wrapped in a table which was in turn wrapped in a table cell, which when the number of cells created hit 4 a new column was created. Here's a static version of what I had orignally:

Code:

<table bgcolor="#FFFDFD" cellspacing="3">
<tr>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10164bluefront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work 
<br />Yes
<br />yes
</div> 
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10109blackfront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work 
<br />Yes
<br />yes
</div> 
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10173brownfront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work 
<br />Yes
<br />yes
</div> 
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10198greyfront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work 
<br />Yes
<br />yes
</div> 
</td>
</tr>
</table>
</td>
</tr>

Hope that makes sense, I'd like to know the most efficient way to do this and any help would be appreciated as I'm stuck.

Thank you in advance

Ryan Fait · April 7th, 2007, 07:39 AM

A server side language is the only way to do something like that. PHP or ASP for example.

rosh1e · April 7th, 2007, 08:02 AM

Hi,

Thanks for your reply, I understand that, but how do I go about forcing the table to be created in three rows?

Ryan Fait · April 7th, 2007, 08:55 AM

I suggest you either learn PHP or hire someone to code what you want.

rosh1e · April 7th, 2007, 09:01 AM

I know how to use PHP and like I said I was able to achieve it with tables, but I haven't been able to acheive it with CSS... I just needed a little advice that's all.

Thanks anyway... I'll get there in the end

Ryan Fait · April 7th, 2007, 09:10 AM

Perhaps I don't understand what you want. The word "dynamic" should never be used in the same sentence as CSS. I'm assuming you know very little about CSS; the fact that you're using tables is enough to bring me to that conclusion. Could maybe post a link, an attachment or even a more descriptive question?

rosh1e · April 7th, 2007, 09:24 AM

Hi,

Ok, maybe I'm not making myself clear at all, but basically this is what I'm trying to achieve

http://www.shesjustgottohaveit.com/N...ies.php/offers

Although I have decided to change the design, the layout will basically be the same. What I would like is for each time a users mouse hovers over the image a semi transparent layer appears showing the items details. Also I wanted to make sure that the items can be scrolled horizontally.

I hope this makes more sense now.

Thank you once again

PS this is what I have used in my PHP file

Code:

  <div id = "itemcontainer">
    <div id = "itempicture">
     <?
      echo "<a href='/productdetails.php/$productcode/$bestcolourname/'><img src='$picture' height='148' width='111' border='0'></img></a>"; 
            ?>    
    </div>
    <div id = "itemdetails">
   <b><font color="#666666">Polka Dot Wrap Dresss</b>
   <br />
   <br />Available in Green, Blue, Black & Orange
   <br />Price £20.00</font>
    </div>
    
  </div>

And the CSS

Code:

#items{height: 500px; width: 600px;}
#itemcontainer{ width: 148px; height: 148px; background-color:#FFFFFF; float: left;}
#itempicture { position:relative; top:0; left:0;   width: 148px; height: 148px; background-color: #ffffff; z-index:1;}
#itemdetails {background-color:#FFFFFF ; height:70px; width:148px; filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75; position:relative; margin-top: -100px; z-index:2;}