5 replies [Last post]
Jaylow
Jaylow's picture
Offline
Regular
poland
Last seen: 8 years 23 weeks ago
poland
Timezone: GMT+1
Joined: 2010-10-20
Posts: 26
Points: 31

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;">&nbsp;</div>
<div class="empthy"style="width: 30px;">&nbsp;</div>
<div class="empthy"style="width:30px;"><img src="images/trd.png"></div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</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">&nbsp;</div>
<div class="empthy">&nbsp;</div>
</td>
<td class="cresent">
<div class="empthy">&nbsp;</div>
<div class="empthy"><img src="images/st.png"></div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy"><img src="images/center_l.png"></div>
<div class="empthy">&nbsp;</div>
<div class="text">Ethernoan</div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</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>&nbsp </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">&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>2</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>3</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>4</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>5</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="cresent">
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="text">Yimi</div>
<div class="empthy">&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
 
 
</tr>
<tr>
<td>6</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="cresent">
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy"><img src="images/trd.png"></div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</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">&nbsp;</div>
<div class="empthy"><img src="images/brd.png"></div>
</td>
<td>&nbsp;</td>
<td class="cresent">
<div class="empthy"><img src="images/tld.png"></div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy"><img src="images/center_l.png"></div>
<div class="text">Purism</div>
<div class="empthy">&nbsp;</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">&nbsp;</div>
<div class="empthy"><img src="images/brd.png"></div>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="cresent">
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy"><img src="images/center_l.png"></div>
<div class="text">Eharesa</div>
<div class="empthy">&nbsp;</div>
<div class="empthy"><img src="images/center_r.png"></div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="pass">
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy"><img src="images/center_l.png"></div>
<div class="text">Crescent Pass-02</div>
<div class="empthy">&nbsp;</div>
<div class="empthy"><img src="images/center_r.png"></div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
 
 
</tr>
<tr>
<td>7</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="cresent">
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy"><img src="images/trd.png"></div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="text">Venious</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</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">&nbsp;</div>
</td>
<td>&nbsp;</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">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="text">Dunkios</div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>8</td>
<td>&nbsp;</td>
<td class="cresent">
<div class="empthy"style="width:30px;">&nbsp;</div>
<div class="empthy"style="width: 30px;">&nbsp;</div>
<div class="empthy"style="width:30px;"><img src="images/trd.png"></div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</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">&nbsp;</div>
<div class="empthy">&nbsp;</div>
</td>
<!--<td style="background:#540400;">
<div class="empthy">&nbsp;</div>
<div class="empthy"><img src="images/st.png"></div>
<div class="empthy">&nbsp;</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">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
</td>-->
<td class="cresent">
<div class="empthy">&nbsp;</div>
<div class="empthy"><img src="images/st.png"></div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy"><img src="images/center_l.png"></div>
<div class="empthy">&nbsp;</div>
<div class="text">Ethernoan</div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
</td> -->
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="jannaria ">
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy">&nbsp;</div>
<div class="text">Tular</div>
<div class="empthy"><img src="images/center_r.png"></div>
<br class="clearboth" />
<div class="empthy">&nbsp;</div>
<div class="empthy"><img src="images/sd.png"></div>
<div class="empthy">&nbsp;</div>
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="jannaria ">
Hauthout
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>9</td>
<td class="cresent">Daikara</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="jannaria ">Bracada</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>10</td>
<td class="cresent">Benisum</td>
<td>&nbsp;</td>
<td class="cresent">Aquila</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="jannaria ">Seraphem</td>
<td class="jannaria ">Gargosh</td>
<td class="jannaria ">Arc</td>
<td class="jannaria ">jannaris</td>
<td>&nbsp;</td>
<td class="jannaria ">Orion</td>
<td class="jannaria ">Nehioun</td>
<td class="jannaria ">Delvana</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>11</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="jannaria">Corona</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>12</td>
<td class="cresent">Iota</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="jannaria">Borgain</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>13</td>
<td>&nbsp;</td>
<td class="cresent">Briggea</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="jannaria">Tatalia</td>
<td>&nbsp;</td>
<td class="pass">Jannaria Pass-02</td>
<td class="pass">Jannaria Pass-03</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>14</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="cresent">Tesseract</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="pass">Jannaria Pass-01</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="jannaria">Keidos</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>15</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="cresent">Ehtian</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="local_group">Iga</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="local_group">inco</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>16</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="butterfly">Enigiside</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="local_group">Quan</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="local_group">Aldebaran</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>17</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="pass">Crescent Pass-01</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="butterfly">Gloschton</td>
<td class="butterfly">Coaliside</td>
<td class="butterfly">Feroniside</td>
<td class="butterfly">Beldain</td>
<td>&nbsp;</td>
<td class="pass">Buttery Pass-01</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
 
 
<tr>
<td>18</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="butterfly">Deltonis</td>
<td class="butterfly">Valence</td>
<td>&nbsp;</td>
<td class="butterfly">Yehenous</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<td>19</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<td>20</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="butterfly">Theagous</td>
<td class="butterfly">Yiko</td>
<td class="butterfly">Silverancea</td>
<td>&nbsp;</td>
<td class="butterfly">Blaze</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="local_group">Cetus</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="local_group">Terra</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<td>21</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="butterfly">Helios</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
 
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Jaylow
Jaylow's picture
Offline
Regular
poland
Last seen: 8 years 23 weeks ago
poland
Timezone: GMT+1
Joined: 2010-10-20
Posts: 26
Points: 31

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

Jaylow
Jaylow's picture
Offline
Regular
poland
Last seen: 8 years 23 weeks ago
poland
Timezone: GMT+1
Joined: 2010-10-20
Posts: 26
Points: 31

i don't have a place to host

double post..

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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>&nbsp </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>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	</tr>
 
	<tr>
	  <th>7</th>
	  <td>&nbsp;</td>
	  <td>&nbsp;</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>&nbsp;</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>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	</tr>
 
	<tr>
	  <th>8</th>
 
	  <td>&nbsp;</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>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</td>
	  <td>&nbsp;</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>
Even a minimal test case and copy/pasting a table is a PITA. That's why tables should always be generated by server-side scripting.

I used four 30×30 images, red, green, blue, and transparent. Attd.

cheers,

gary

AttachmentSize
jr.gif 69 bytes
jg.gif 69 bytes
jb.gif 69 bytes
jt.gif 69 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Jaylow
Jaylow's picture
Offline
Regular
poland
Last seen: 8 years 23 weeks ago
poland
Timezone: GMT+1
Joined: 2010-10-20
Posts: 26
Points: 31

Works

thanks this works perfect.