Как я могу поставить «+» под каждую таблицу?

Question

У меня есть этот сайт:

http://dl.dg-site.com/produits-game/

Под каждой таблицы я хочу поставить "+", как в этом примере

http://www.delumine.ch/produits-et-gamme.html

Это мой код:

http://jsfiddle.net/xcn8fg94/

КОДЕКС 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> 

код 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;} 

Я пытался добавить <p>+<p> под каждым столом, но не работает.

Можете ли вы помочь мне решить эту проблему, пожалуйста?

Заранее благодарен!

Answer 1

1. Сделать запас ниже дивы (маржа-снизу)
2. сделать DIV расположены абсолютна, так что р, содержащий + может быть установлен абсолютный
3. Создание р, с классом нижней
4. Дайте им правильный размер и положение

#tabel_1,#tabel_2,#tabel_3,#tabel_4{width:210px;height:540px; 
 
    \t display:inline-block; 
 
    \t background: #FFFFFF; 
 
     vertical-align:top; 
 
    \t border: 2px solid #264572; 
 
    \t 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

вы, вероятно, не использовали бы +, как в том, что находится на клавиатуре. проверьте иконки сайтов, таких как http://fortawesome.github.io/Font-Awesome/. через font-awesome они имеют разные размеры, и они очень просты в использовании. для полного списка значков перейдите сюда: http://fortawesome.github.io/Font-Awesome/icons/

Answer 3

Я бы использовал: после селектора для этого и установить значок в качестве фона. В настоящее время не на моем компьютере, поэтому нет примера извините.