Jump to content
jaylow

how to not mess up the flow of things?

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...