How can I position a tree-shaped image in html and css?

Question

I would like to position some images on my site so that they stay in the format of a tree as in the image

I have each of the separate circles. I tried to align them with the tag table however I was not successful Obs. The images should be separated because each one of them has a link.

Answer 1

Try creating lists for each image within a centralized list, then change the position of the images with left & top as you wish after assigning the relative position (position: relative). According to your image it will be necessary to modify the position of the images only a few times, because they seem a little complex. When you declare left: -1px in an image using position: relative it will be moved 1 pixel back from its natural position. If you remove the - (negative), your image goes 1 pixel forward from its natural position.

But if you don’t want to change the position of the images, change the vertical alignment of each one with vertical-align. He may be top (top), middle (half a), bottom (down) or initial (pattern).

---

Revealing example with HTML & CSS.

CSS:

#tree {
    text-align: center;
}

#tree ul {
    list-style-type: none;
    // Espaço entre linhas !
    margin: 8px 0 8px 0;
}

#tree ul li {
    /* Mostra as imagens na mesma linha */
    display: inline-block;
    /* Espaço horizontal entre as imagens */
    margin: 0 12px 0 12px;
    /* Faz a posição relativa */
    position: relative;
    /* Deixa as imagens alinhadas ao meio */
    vertical-align: middle;
}

HTML:

(each row is a list (<ul>...</ul>), inside the container of your tree)

(place the image or <a> within a column <li> in <ul>)

<div id="tree">
    <ul>
        <li><img/></li>
    </ul>
    <ul>
        <li><img/></li>
        <li><img style="left: -20px; top: -20px;"/></li>
    </ul>
    <ul>
        <li><img/></li>
        <li><img/></li>
        <li><img/></li>
    </ul>
    <ul>
        <li><img/></li>
        <li><img/></li>
        <li><img/></li>
        <li><img style="left: -20px; top: -20px;"/></li>
    </ul>
</div>

Answer 2

Here’s an example of how to structure this:

 <style>
body {
padding:0;
margin:0;
}
.arvore {
  width:788px;
  height:776px;
  border:1px solid #000;

}
.pessoa {
    position: relative;
    width: 378px;
    height: 312px;
    margin: 443px auto;
    border: 1px solid #000;

}

.copa ul li {
  width:209px;
  height:104px;
  border:1px solid #000;
  list-style:none;
  position:relative;
  border:1px solid #000;
  float:left;
}


.copa ul li#ft1 {
    background: url(imagens/ft1.jpg) center center no-repeat;
    margin: 0 248px 0;
}
.copa ul li#ft2 {
    background: url(imagens/ft2.jpg) center center no-repeat;
    margin-left: 145px;
}
.copa ul li#ft3 {
    background: url(imagens/ft3.jpg) center center no-repeat;
}
.copa ul li#ft4 {
    background: url(imagens/ft4.jpg) center center no-repeat;
    clear:left;
    margin-left: 35px;
}
.copa ul li#ft5 {
    background: url(imagens/ft5.jpg) center center no-repeat;
    margin-top: 22px;
}
.copa ul li#ft6 {
    background: url(imagens/ft6.jpg) center center no-repeat;
}
.copa ul li#ft7 {
    background: url(imagens/ft7.jpg) center center no-repeat;
    margin-right: 145px;
    margin-top: -22px;
}
.copa ul li#ft8 {
    background: url(imagens/ft8.jpg) center center no-repeat;
    margin-left: 145px;
    margin-top: -22px;
}




</style>
<div class="arvore">

<div class="copa">
   <ul>
     <li id="ft1">foto1</li>
     <li id="ft2">foto2</li>
     <li id="ft3">foto3</li>
     <li id="ft4">foto4</li>
     <li id="ft5">foto5</li>
     <li id="ft6">foto6</li>
     <li id="ft7">foto7</li>
     <li id="ft8">foto8</li>
   </ul>
</div>

<div class="pessoa">pessoa
</div>

</div>

But in the question of the link, you can put image map, this site makes the code you need.

Example:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://i.stack.imgur.com/CLits.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Missão e Visão" title="Missão e Visão" href="missao-e-visao" coords="332,90,355,83,411,78,455,93,478,116,473,140,460,162,434,173,393,182,354,170,324,154,311,131,313,117,313,103" shape="poly">
    <area target="_blank" alt="Administrativa" title="Administrativa" href="administrativa" coords="276,175,326,191,351,218,340,245,310,270,258,277,211,265,186,240,188,203,228,181" shape="poly">
    <area target="_blank" alt="Gestores" title="Gestores" href="gestores" coords="137,299,181,287,240,293,269,318,275,337,261,362,219,384,166,381,126,363,113,332" shape="poly">
    <area target="_blank" alt="Negócio" title="Negócio" href="negocio" coords="124,410,169,400,210,407,243,427,251,458,235,478,207,496,171,502,119,490,95,467,88,445,103,421" shape="poly">
    <area target="_blank" alt="Técnica" title="Técnica" href="tecnica" coords="393,291,445,302,473,332,467,363,430,385,382,391,321,372,306,332,337,301,362,293" shape="poly">
    <area target="_blank" alt="Tecnologia" title="Tecnologia" href="tecnologia" coords="525,176,576,190,601,226,586,256,550,272,498,273,447,255,437,221,461,190,491,179" shape="poly">
    <area target="_blank" alt="Societária" title="Societária" href="societaria" coords="593,286,643,294,671,321,668,354,635,380,573,382,527,366,511,337,525,309,554,289" shape="poly">
    <area target="_blank" alt="Comportamento" title="Comportamento" href="comportamento" coords="617,400,663,405,693,430,699,459,678,485,631,502,572,491,541,474,537,437,569,405" shape="poly">
</map>