Topic: Dynamically scripted CSS positioning (Page 1 of 1)

I need hardcore help with dynamic CSS positioning, so naturally I thought of the Asylum. Mostly I hope to learn something from you about dynamic CSS positioning, I'll worry about the coding.

The Setup: We're (which really means "I'm") building an inventory application in the Plone CMS, which uses Python/CSS:
http://dragonstar.med.unc.edu/ccbc-test/facilities/test/inventory/bldgGlaxo/roomHallway/boxfreezer/left/c3/box9

If you follow the link and click on the column image with Box 9 highlighted, you'll go up one level to the list of boxes. If you then click on the "A1 A2 A3..." image, you'll see a grid view.

The Problem: Right now, this page is a manually coded table with a non-elegant mix of css thrown in. I'd like to make this view dynamic; the page would loop through each subfolder, called freezerColumns. Each FreezerColumn would have a row property (A, B, or C) and a column property (1, 2, 3, or 4). The page would use the row and column property to properly position the freezerColumn, then grab its owner/status and display it.

Honestly, this is a bit beyond my capabilities, but I want to do it right. The problem is that the text is dynamic. If each freezerColumn was rendered in a fixed-width font and truncated to a certain length, the width of each cell would be the same. But that seems like a hack. Also, if a column doesn't exist or is completely empty (such as L2A, L3B, etc.), there needs to be a space for it in the table. How can I tell a div to go to row A, Column 1, print its text, then make the others flow properly in their place, while putting placeholders in for non-existent freezerColumns?

If this seems like overkill for a grid with only 12 cells, it is. The real issue is at the box level (the original link above). This page will have 81 cells in a 9 x 9 grid. 75% of the time people will just want to see a list of contents, but a critical 25% of the time we'll need to see something that looks like this:

http://dragonstar.med.unc.edu/ccbc-test/facilities/test/inventory/bldgGlaxo/roomHallway/boxfreezer/left/c3/box9/fc_boxview

As a neurotic Asylum member, I hope I've given enough info and that this whole scheme isn't entirely mad. Thanks for any assistance. I've read about the box model and float until I'm blue in the face, but it isn't clicking.

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://dragonstar.med.unc.edu/ccbc-test

404 ?

That's what I get for re-indexing after I post. Sorry, the url is:

http://dragonstar.med.unc.edu/ccbc-test/facilities/test/inventory/bldgGlaxo/hallway/boxfreezer/left/c3/box9

and the second one with the box view is:
http://dragonstar.med.unc.edu/ccbc-test/facilities/test/inventory/bldgGlaxo/hallway/boxfreezer/left/c3/box9/fc_boxview

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://dragonstar.med.unc.edu/ccbc-test

Ok, I have a mostly working solution. The key to it is that you can assign an element to multiple classes within the same declaration. So I made up 9 subclasses called rowa, rowb, rowc, etc. and then 9 sublcasses called col1, col2, col3, etc. Then I loop through all of the objects, grab their rows and columns, and set their class declaration to that.

The css looks like this:

div.dynacell {
  padding: 0 px;
  border: 4px double red;
  margin: 0px;
  position: relative;
  background-color: white;
  display: block;
  }

.dynacell a {
  position: absolute;
  padding: 5px;
  margin: 0px;
  border: 3px dotted; 
  background-color: #BADEF7;
  border-color: #666666;
  color: black;
  font-weight: bold;
  width: 40px;
  height: 40px;
  text-align: center;
  overflow: hidden;
}

.dynacell a:hover { 
  background-color: #6699CC;
  border-color: black;
  color: white;
}

.dynacell a.rowa{ top: 0px   ; }
.dynacell a.rowb{ top: 50px  ; }
.dynacell a.rowc{ top: 100px ; }
.dynacell a.rowd{ top: 150px ; }
.dynacell a.rowe{ top: 200px ; }
.dynacell a.rowf{ top: 250px ; }
.dynacell a.rowg{ top: 300px ; }
.dynacell a.rowh{ top: 350px ; }
.dynacell a.rowi{ top: 400px ; }
.dynacell a.rowj{ top: 450px ; }
.dynacell a.rowk{ top: 500px ; }

.dynacell a.col1{ left: 0px   ; }
.dynacell a.col2{ left: 50px  ; }
.dynacell a.col3{ left: 100px ; }
.dynacell a.col4{ left: 150px ; }
.dynacell a.col5{ left: 200px ; }
.dynacell a.col6{ left: 250px ; }
.dynacell a.col7{ left: 300px ; }
.dynacell a.col8{ left: 350px ; }
.dynacell a.col9{ left: 400px ; }

And the loop renders like this in html:

<div class="dynacell">
       <a href = "#" class = "rowe col5" > e5 </a>
       <a href = "#" class = "rowf col6" > f6 </a>
       <a href = "#" class = "rowg col7" > g7 </a>
       <a href = "#" class = "rowh col8" > h8 </a>
       <a href = "#" class = "rowi col9" > this is a long name </a>
       <a href = "#" class = "rowa col1" > a1 </a>
       <a href = "#" class = "rowb col2" > b2 </a>
       <a href = "#" class = "rowc col3" > this is a really, really, really really looooooong name </a>
       <a href = "#" class = "rowd col4" > d4 </a>
    </div>

This means that any order is fine for the looped elements, their names don't matter, there don't need to be 81 objects in the subfolder... I can just create objects and give them a row and col, and they'll display in the correct place.

Now the problem is that the parent DIV isn't actually holding the <a href>'s. You can see it in action here:

http://dragonstar.med.unc.edu/ccbc-test/facilities/test/inventory/bldgGlaxo/hallway/boxfreezer/left/c3/box9/fc_boxview

~~~~~~~~~~~~~~~~~~~~~~~
Judge Rob, DVD Verdict: http://www.dvdverdict.com/dossiers/rlineberger.php
Site I'm currently struggling with: http://dragonstar.med.unc.edu/ccbc-test