Jump to content

how to not mess up the flow of things?


jaylow
 Share

Recommended Posts

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

post-47156-729_thumb.png

Edited by jaylow
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by jaylow
Link to comment
Share on other sites

ha i got it \ :Bucktooth: / 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 :P

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...