Sat, 2013-04-06 18:34
Hi, i have a problem with position absolute in a when it have this the cells next to it overlaps the one next to it. if there is a empty cell in between then there is no problem
if you look at the code at jerroan and Ethernoan the should be next to iets other in a a
but they over lap
i cant upload the images in the code but they are 30x by 30x
if you look at:
.cresent { position: absolute; width: 90px; background: #540400; }
it makes a mess of
<td class="cresent"> <div class="empthy"style="width:30px;"> </div> <div class="empthy"style="width: 30px;"> </div> <div class="empthy"style="width:30px;"><img src="images/trd.png"></div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="text">Jerroan</div> <div class="empthy"><img src="images/center_r.png"></div> <br class="clearboth" /> <div class="empthy"><img src="images/bld.png"></div> <div class="empthy"> </div> <div class="empthy"> </div> </td> <td class="cresent"> <div class="empthy"> </div> <div class="empthy"><img src="images/st.png"></div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"><img src="images/center_l.png"></div> <div class="empthy"> </div> <div class="text">Ethernoan</div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> </td>
(they over lap in the table)
<!DOCTYPE html> <html> <head> <title>fleet map</title> </head> <style> .empthy { float:left; width: 30px; height:30px; z-index:5; } .clearboth { clear: both; } .text { width: 100%; position: absolute; Z-index:6; } body { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #A1A1AF; background: #000030; } table { border: 1px solid gray; table-layout: fixed; width: 2430px; } th, td { text-align: center; border-left: 1px solid gray; border-bottom: 1px solid gray; width: 90px; height: 90px; } .cresent { position: absolute; width: 90px; background: #540400; } .butterfly { position: absolute; background: #532d00; } .local_group { position: absolute; background: #004f53; } .jannaria { display: block; position: absolute; background: #540050; } .pass { position: absolute; background: #00542e; } .Admin { position: absolute; background: gold; } </style> <body> <h1>Fleet map</h1> <table cellspacing="0" cellpadding="0" id="uni" > <tr> <th>  </th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> <th>16</th> <th>17</th> <th>18</th> <th>19</th> <th>20</th> <th>21</th> <th>22</th> <th>23</th> <th>24</th> <th>25</th> <th>26</th> <th>27</th> </tr> <tr> <td>1</td> <td class="Admin"> <div class="empthy"><img src="images/tld.png"></div> <div class="empthy"><img src="images/st.png"></div> <div class="empthy"><img src="images/trd.png"></div> <br class="clearboth" /> <div class="empthy"><img src="images/center_l.png"></div> <div class="empthy"> </div> <div class="text"><b>Admin</b></div> <div class="empthy"><img src="images/center_r.png"></div> <br class="clearboth" /> <div class="empthy"><img src="images/bld.png"></div> <div class="empthy"><img src="images/sd.png"></div> <div class="empthy"><img src="images/brd.png"></div> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>2</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>3</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>4</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>5</td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="cresent"> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"> </div> <div class="text">Yimi</div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"><img src="images/bld.png"></div> <div class="empthy"><img src="images/sd.png"></div> <div class="empthy"><img src="images/brd.png"></div> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>6</td> <td> </td> <td> </td> <td> </td> <td class="cresent"> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"><img src="images/trd.png"></div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="text">Delphinus</div> <div class="empthy"><img src="images/center_r.png"></div> <br class="clearboth" /> <div class="empthy"><img src="images/bld.png"></div> <div class="empthy"> </div> <div class="empthy"><img src="images/brd.png"></div> </td> <td> </td> <td class="cresent"> <div class="empthy"><img src="images/tld.png"></div> <div class="empthy"> </div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"><img src="images/center_l.png"></div> <div class="text">Purism</div> <div class="empthy"> </div> <div class="empthy"><img src="images/center_r.png"></div> <br class="clearboth" /> <div class="empthy"><img src="images/bld.png"></div> <div class="empthy"> </div> <div class="empthy"><img src="images/brd.png"></div> </td> <td> </td> <td> </td> <td class="cresent"> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"><img src="images/center_l.png"></div> <div class="text">Eharesa</div> <div class="empthy"> </div> <div class="empthy"><img src="images/center_r.png"></div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> </td> <td> </td> <td> </td> <td class="pass"> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"><img src="images/center_l.png"></div> <div class="text">Crescent Pass-02</div> <div class="empthy"> </div> <div class="empthy"><img src="images/center_r.png"></div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>7</td> <td> </td> <td> </td> <td class="cresent"> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"><img src="images/trd.png"></div> <br class="clearboth" /> <div class="empthy"> </div> <div class="text">Venious</div> <div class="empthy"> </div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"><img src="images/bld.png"></div> <div class="empthy"><img src="images/sd.png"></div> <div class="empthy"> </div> </td> <td> </td> <td class="cresent"> <div class="empthy"><img src="images/tld.png"></div> <div class="empthy"><img src="images/st.png"></div> <div class="empthy"><img src="images/trd.png"></div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="text">Dunkios</div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>8</td> <td> </td> <td class="cresent"> <div class="empthy"style="width:30px;"> </div> <div class="empthy"style="width: 30px;"> </div> <div class="empthy"style="width:30px;"><img src="images/trd.png"></div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="text">Jerroan</div> <div class="empthy"><img src="images/center_r.png"></div> <br class="clearboth" /> <div class="empthy"><img src="images/bld.png"></div> <div class="empthy"> </div> <div class="empthy"> </div> </td> <!--<td style="background:#540400;"> <div class="empthy"> </div> <div class="empthy"><img src="images/st.png"></div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"><img src="images/center_l.png"></div> <div class="empthy" style="text-align: center;">Ethernoan</div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> </td>--> <td class="cresent"> <div class="empthy"> </div> <div class="empthy"><img src="images/st.png"></div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"><img src="images/center_l.png"></div> <div class="empthy"> </div> <div class="text">Ethernoan</div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> </td> --> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="jannaria "> <div class="empthy"> </div> <div class="empthy"> </div> <div class="empthy"> </div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"> </div> <div class="text">Tular</div> <div class="empthy"><img src="images/center_r.png"></div> <br class="clearboth" /> <div class="empthy"> </div> <div class="empthy"><img src="images/sd.png"></div> <div class="empthy"> </div> </td> <td> </td> <td> </td> <td> </td> <td class="jannaria "> Hauthout </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>9</td> <td class="cresent">Daikara</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="jannaria ">Bracada</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>10</td> <td class="cresent">Benisum</td> <td> </td> <td class="cresent">Aquila</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="jannaria ">Seraphem</td> <td class="jannaria ">Gargosh</td> <td class="jannaria ">Arc</td> <td class="jannaria ">jannaris</td> <td> </td> <td class="jannaria ">Orion</td> <td class="jannaria ">Nehioun</td> <td class="jannaria ">Delvana</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>11</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="jannaria">Corona</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>12</td> <td class="cresent">Iota</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="jannaria">Borgain</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>13</td> <td> </td> <td class="cresent">Briggea</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="jannaria">Tatalia</td> <td> </td> <td class="pass">Jannaria Pass-02</td> <td class="pass">Jannaria Pass-03</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>14</td> <td> </td> <td> </td> <td class="cresent">Tesseract</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="pass">Jannaria Pass-01</td> <td> </td> <td> </td> <td class="jannaria">Keidos</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>15</td> <td> </td> <td> </td> <td> </td> <td class="cresent">Ehtian</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="local_group">Iga</td> <td> </td> <td> </td> <td> </td> <td class="local_group">inco</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>16</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="butterfly">Enigiside</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="local_group">Quan</td> <td> </td> <td> </td> <td> </td> <td class="local_group">Aldebaran</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>17</td> <td> </td> <td> </td> <td> </td> <td class="pass">Crescent Pass-01</td> <td> </td> <td> </td> <td> </td> <td class="butterfly">Gloschton</td> <td class="butterfly">Coaliside</td> <td class="butterfly">Feroniside</td> <td class="butterfly">Beldain</td> <td> </td> <td class="pass">Buttery Pass-01</td> <td> </td> <td class="local_group">Gecko</td> <td class="local_group">Sawon</td> <td class="local_group">Arcturus</td> <td class="local_group">Sirius</td> <td class="local_group">Centauri</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <tr> <td>18</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="butterfly">Deltonis</td> <td class="butterfly">Valence</td> <td> </td> <td class="butterfly">Yehenous</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="local_group">Cassiopeia</td> <td class="local_group">Narokan</td> <td class="local_group">Struve</td> <td class="local_group">Centic</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <td>19</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <td>20</td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="butterfly">Theagous</td> <td class="butterfly">Yiko</td> <td class="butterfly">Silverancea</td> <td> </td> <td class="butterfly">Blaze</td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="local_group">Cetus</td> <td> </td> <td> </td> <td> </td> <td class="local_group">Terra</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <td>21</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="butterfly">Helios</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
Sat, 2013-04-06 22:56
#1
Back up a bit
Why are you using tables? I don't see positionally related (records and fields) data. Tables are special purpose containers and don't play well with relative, absolute or fixed positioning. There are too many contrary requirements.
Can you post a link so that we may see what's going on?
cheers,
gary
Sat, 2013-04-06 23:37
#2
i don't have a place to host
i don't have a place to host anything.
i am using tables as it looked to be a easy way to make what i wanted to have (a map of some sectors for a space game) i had a real hard time moving the images in the cells but wwith Float:left; and clear: both;
i could nicely make them fit.
i only needed the text in the center and it works for most cells that don't touch
but cells that touch from the right side overlap
if you copy and past the the full code into a .html
and look at 8.2 there should be a cell called "Jerroan"
and at 8.3 should be "Ethernoan" but they overlap with
.cresent { position: absolute; width: 90px; background: #540400; }
if i remove "position: absolute;"
they go in place but then the text moves to the other side of the screen
i have seen a page where they have the same end result as i want but they use javascript and i dont know so much about javascript see here
Sat, 2013-04-06 23:37
#3
i don't have a place to host
double post..
Sun, 2013-04-07 03:12
#4
Oops, my bad
For your purposes, I suppose the table is the way to go. I should have looked closer before mouthing off.
Here is my take on a working method; be sure to test before committing.
<!DOCTYPE html> <html> <head> <meta http-equiv="text/html; char=utf-8" /> <title>J-test doc</title> <style type="text/css"> /*<![CDATA[*/ body { background-color: #003; color: white; font: 100%/1.25 sans-serif; margin: 0; } h1 { text-align: center; } table { border: 1px solid gray; border-collapse: collapse; border-spacing: 0; font-size: .75em; margin: 1.25em auto; } th, td { border: 1px solid gray; height: 90px; padding: 0; text-align: center; vertical-align: top; width: 90px; white-space: nowrap; word-spacing: -.5em; } th { vertical-align: middle; } td div { line-height: 30px; position: relative; } td div img { vertical-align: top; } td.admin { background-color: gold; color: inherit; } td.cresent { background-color: #500; } td.jannaria { background-color: #505; } td span.txt { font-weight: bold; left: 0; position: absolute; top: 0; width: 100%; } /*]]>*/ </style> </head> <body> <h1>Fleet map</h1> <table> <thead> <tr> <th>  </th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> </tr> </thead> <tbody> <tr> <th>1</th> <td class="admin"> <div> <img src="jr.gif" /> <img src="jg.gif" /> <img src="jb.gif" /> </div> <div> <img src="jb.gif" /> <img src="jr.gif" /> <img src="jg.gif" /> <span class="txt">Admin</span> </div> <div> <img src="jg.gif" /> <img src="jb.gif" /> <img src="jr.gif" /> </div> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>7</th> <td> </td> <td> </td> <td class="cresent"> <div> <img src="jr.gif" /> <img src="jt.gif" /> <img src="jb.gif" /> </div> <div> <img src="jt.gif" /> <img src="jr.gif" /> <img src="jt.gif" /> <span class="txt">Venious</span> </div> <div> <img src="jg.gif" /> <img src="jt.gif" /> <img src="jr.gif" /> </div> </td> <td> </td> <td class="cresent"> <div> <img src="jr.gif" /> <img src="jg.gif" /> <img src="jb.gif" /> </div> <div> <img src="jb.gif" /> <img src="jr.gif" /> <img src="jg.gif" /> <span class="txt">Dunkioss</span> </div> <div> <img src="jg.gif" /> <img src="jb.gif" /> <img src="jr.gif" /> </div> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>8</th> <td> </td> <td class="cresent"> <div> <img src="jt.gif" /> <img src="jg.gif" /> <img src="jt.gif" /> </div> <div> <img src="jb.gif" /> <img src="jt.gif" /> <img src="jg.gif" /> <span class="txt">Jerroan</span> </div> <div> <img src="jt.gif" /> <img src="jb.gif" /> <img src="jt.gif" /> </div> </td> <td class="cresent"> <div> <img src="jr.gif" /> <img src="jg.gif" /> <img src="jb.gif" /> </div> <div> <img src="jb.gif" /> <img src="jr.gif" /> <img src="jg.gif" /> <span class="txt">Ethernoan</span> </div> <div> <img src="jg.gif" /> <img src="jb.gif" /> <img src="jr.gif" /> </div> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td class="jannaria "> <div> <img src="jr.gif" /> <img src="jt.gif" /> <img src="jb.gif" /> </div> <div> <img src="jt.gif" /> <img src="jt.gif" /> <img src="jt.gif" /> <span class="txt">Tular</span> </div> <div> <img src="jg.gif" /> <img src="jt.gif" /> <img src="jr.gif" /> </div> </td> </tr> </tbody> </table> </body> </html>
I used four 30×30 images, red, green, blue, and transparent. Attd.
cheers,
gary
| Attachment | Size |
|---|---|
| jr.gif | 69 bytes |
| jg.gif | 69 bytes |
| jb.gif | 69 bytes |
| jt.gif | 69 bytes |
Tue, 2013-04-09 05:44
#5
Works
thanks this works perfect.