how to not mess up the flow of things?

[jaylow]

i am adding images to a table it needs to represent the connections between the sectors on a map (look at code and you understand)i use "float:" for the ones that go left and right and then position them with position:relative top and bottombut then ones that need to go in the top center and bottom center can not use float: so the push everything a bit uphow can i fix this?look at Venious 7.3 (in the red space)you can download the code in the attachment .html and .cssyou probably see i am pretty new to this Edit: i cant seem to upload the connection images that its all about (maybe to small 1kb)so its hard to test it out with out those...

css.css

index2.html

Edited April 6, 2013 by jaylow

[jaylow]

if i remove the <div> around <div id="st_bc"><img class="st_bc" src="images/st.png"></div> and use position:relative; i can move the straigh bottom line on the right place. but that messes up all the other straigh bottom lines... does anyone know a way to make them all work out and stay in the bottom center (and top center) on the <td> with out pushing the left and right images up/down/left/right?i need to add this to every <td> in the code so it should work universalThanks also if i find a way to fix this i will post it here

[jaylow]

found outi can do it like this:

<td><div class="empthy"> </div><div class="empthy"> </div><div class="empthy"><img src="images/tld.png"></div><br class="clearboth" /><div class="empthy"><img src="images/center_l.png"></div><div class="empthy"> </div><div class="empthy"><img src="images/center_r.png"></div><br class="clearboth" /><div class="empthy"><img src="images/drd.png"></div><div class="empthy"> </div><div class="empthy"> </div></td>---------------# the  Css #--------------- .empthy{float: left;width: 30px;height:30px;z-index:5;}.clearboth { clear: both; } 

but then i have a problem with the text in the centerit will mess up the center as it does not fit. is there a way to force the text to be centered in the <td> and not mess up the other content in it ?

Edited April 6, 2013 by jaylow

[jaylow]

ha i got it \ / and the end result is less Css and the same html

<td class="cresent"><div class="empthy"> </div><div class="empthy"> </div><div class="empthy"><img src="images/tld.png"></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"><img src="images/center_r.png"></div><br class="clearboth" /><div class="empthy"><img src="images/drd.png"></div><div class="empthy"> </div><div class="empthy"> </div></td> .empthy{float: left;width: 30px;height:30px;z-index:5;}.clearboth { clear: both; } .text {position: absolute;width:100%;text-align:center;overflow:visible;Z-index:6; .cresent {position: absolute;background: #540400;}

Thanks,only took me 3 hours

[jaylow]

its seems that now all is good but one thing..if to <td> are next to iets other and have something in them they overlap...it has something to do with.cresent {position: absolute;background: #540400;}but if i turn that off it messes up even more..would ther be a way to make a 1px width by 90px height space inbetween 2 <td> in a table