Dynamically scripted CSS positioning — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Dynamically scripted CSS positioning

This page's ID: 26226

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	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: [code] 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 ; } [/code] And the loop renders like this in html: [code] <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> [/code] 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 Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu