How can I put a "+" below each table? - html

Question

I have this site:
http://dl.dg-site.com/produits-game/
Under each table I want to put a "+" as in this example
http://www.delumine.ch/produits-et-gamme.html
This is my code:
http://jsfiddle.net/xcn8fg94/
CODE HTML:
<div id="tabel_1">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
</div>
<div id="tabel_2">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
</div>
<div id="tabel_3">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
</div>
<div id="tabel_4">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
</div>
Code CSS:
#tabel_1,#tabel_2,#tabel_3,#tabel_4{width:210px;height:540px;
display:inline-block;
background: #FFFFFF;
vertical-align:top;
border: 2px solid #264572;
margin-left: 10px;}
I tried to add <p>+<p> under each table but not working.
Can you help me to solve this problem please?
Thanks in advance!

Answer 1

Make a margin below the divs (margin-bottom)
Make the div positioned absolute, so that the p containing the + can be positioned absolute
Create the p , with class bottom
Give them the correct dimension and position
#tabel_1,#tabel_2,#tabel_3,#tabel_4{width:210px;height:540px;
display:inline-block;
background: #FFFFFF;
vertical-align:top;
border: 2px solid #264572;
margin-left: 10px;
margin-bottom: 50px;
position: relative;
}
.bottom {
position: absolute;
top: 100%;
left: 0px;
right: 0px;
width: 1em;
margin: auto;
font-size: 40px;
font-weight: bolder;
}
<div id="tabel_1">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
<p class="bottom">+</p>
</div>
<div id="tabel_2">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
<p class="bottom">+</p>
</div>
<div id="tabel_3">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
<p class="bottom">+</p>
</div>
<div id="tabel_4">
<p id="title_first">Qualité</p>
<p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
<div id="image_first"></div>
<p class="bottom">+</p>
</div>

Answer 2

you probably wouldnt use the + as in what is on your keyboard. check out icon websites like http://fortawesome.github.io/Font-Awesome/. through font-awesome they have different sizes and they are very easy to use.
for the full icon list go here: http://fortawesome.github.io/Font-Awesome/icons/

Answer 3

I'd use a :after selector for that and set an icon as the background. Currently not on my pc, so no example sorry.