drawing a image like shown

Question

I need to draw such a image like

like.. a + mark at centre and at ends of lines a text box. how do i do it.. i tried.but could not..should i use a image for + symbol or can i do in css...

or what css should i write for it...

Answer 1

You make a table with 2 rows and 2 columns, and you use border-right and border-bottom for the top left cell, and border-top and border-left for the bottom right. Don't forget to add a   in each cell. Then in the CSS, you can define the cell's sizes.

Hope I have helped.

Regards from France ;)

Answer 2

You could use absolute positionned DIV for your "boxes" and use two DIV for the vertical and horizontal lines. Something (untested) like :

CSS:

.box { position:relative; }
.box-end { position:absolute; border:1px solid red; background:white; overflow:hidden; z-index:400; }
.box-end-v { width:20px; height:40px; }
.box-end-h { width:40px; height:20px; }
.box-end-top { top:0px; left:30px; }
.box-end-bottom { top:80px; left:30px; }
.box-end-left { top:30px; left:0px; }
.box-end-right { top:30px; left:80px; }
.box-line { position:absolute; background:black; z-index:100; }
.box-line-v { top:20px; left:50px; width:1px; height:60px; }
.box-line-h { top:50px; left:20px; width:60px; height:1px; }

HTML:

<div class="box">
   <div class="box-end box-end-h box-end-top">T</div>
   <div class="box-end box-end-h box-end-bottom">B</div>
   <div class="box-end box-end-v box-end-left">L</div>
   <div class="box-end box-end-v box-end-right">R</div>
   <div class="box-line box-line-v"></div>
   <div class="box-line box-line-h"></div>
</div>

However, may I suggest this instead? http://raphaeljs.com/