Insert CSS to show dependencies

Question

Insert CSS to show dependencies

Navigation

#1 by (3 votes)

2

I need to develop an HTML document similar to the image below:

I'mhavingahardtimemakingconnections,lookwhatmyprojectis.

Ineedyoutolookmoreorlesslikethis

Myhtmllookslikethis:

<!DOCTYPEHTML><htmllang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<link href="C:\Users\JeanCarlos\OneDrive\Faculdade\TCC\TCC II\Diagrama de Rede\bootstrap.3.3.5\content\Content\bootstrap.css" rel="stylesheet" />
<link href="C:\Users\JeanCarlos\OneDrive\Faculdade\TCC\TCC II\Diagrama de Rede\bootstrap.3.3.5\content\Content\bootstrap-theme.css" rel="stylesheet" />
<style>

.div1{
position: absolute;
top: 200px;
left: 25px;
}

.div2{
position: absolute;
top: 50px;
left: 225px;
}

.div3{
position: absolute;
top: 400px;
left: 225px;
}

.div4{
position: absolute;
top: 200px;
left: 425px;
}

</style>
<body>
<div class="div1">
<table class="table table-striped table-responsive">

    <tr>
        <td>1</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>
        <td></td>
        <td>A</td>
        <td></td>
    </tr>
    <tr>
        <td>1</td>
        <td>0</td>
        <td>5</td>
    </tr>
   </table>
  </div>

  <div class="div2">
  <table class="table table-striped table-responsive">
    <tr>
        <td>6</td>
        <td>5</td>
        <td>10</td>
    </tr>
    <tr>
        <td></td>
        <td>B</td>
        <td></td>
    </tr>
    <tr>
        <td>11</td>
        <td>5</td>
        <td>15</td>
    </tr>
   </table>
   </div>   

   <div class="div3">
    <table class="table table-striped table-responsive">
    <tr>
        <td>6</td>
        <td>10</td>
        <td>15</td>
    </tr>
    <tr>
        <td></td>
        <td>C</td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>0</td>
        <td>15</td>
    </tr>
   </table>
   </div>

 <div class="div4"> 
  <table class="table table-striped table-responsive">
    <tr>
        <td>16</td>
        <td>15</td>
        <td>30</td>
    </tr>
    <tr>
        <td></td>
        <td>D</td>
        <td></td>
    </tr>
    <tr>
        <td>16</td>
        <td>0</td>
        <td>30</td>
    </tr>
    </table>
  </div>

   </body> 
   </html>

html5 css3

asked by anonymous 26.10.2015 / 20:58

1 answer

How to find out the number of rows and columns of a dynamically created array? Bring QR Code data to my fields

score 3 · Accepted Answer

If I understand, you need something like:

Oneoptionistoaddadivaftereachtableexample:

<div><imgclass="seta310" src="arrow.png" />
</div>

You can create CSS classes to position your divs and use a CSS3 feature called transform , for example:

>

/*Rotacionando em 310 graus*/
.seta310
{
    position: relative;
    left: 100px;
    top: 150px;

    -ms-transform: rotate(310deg); /* IE 9 */
    -webkit-transform: rotate(310deg); /* Chrome, Safari, Opera */
    transform: rotate(310deg);
}

Done this for the first arrow, you can rotate the others.

Example: Fiddle