Je suis confronté à un problème que je n'arrive pas à résoudre. J'ai intégré dans mon #main 2 div.
La première contient une bannière avec un texte défilant, et la seconde contiendra au final les articles et autres items.
Dans ma seconde div, j'ai créer une première div qui contient un slider d'images et 6 petites boites en dessous dans lesquelles je mets du contenu et une image.
Voici le code. Il sera sans doute plus parlant (je vous passe la section du slider d'images) :
Code : Tout sélectionner
<section id="main">
<div class="inside">
<div id="defil"><marquee>texte défilant ... texte défilant ... texte défilant ... texte défilant ... </marquee></div>
<article id="accueil" class="mod_article block">
<section class="ce_slideItStart ">
....
....
</section>
</div>
</div>
</div>
</section>
<section id="boxItemTop" class="ce_text boxItemRight block">
<figure class="image_container">
<img width="64" height="64" alt="" src="system/html/entreprise-be487133.png">
</figure>
<p>bla bla bla</p>
</section>
<section id="boxItemTop" class="ce_text boxItemRight block">
<figure class="image_container">
<img width="64" height="64" alt="" src="system/html/particulier-86397fc2.png">
</figure>
<p>bla bla bla</p>
</section>
<section id="boxItemTop" class="ce_text block">
<figure class="image_container">
<img width="64" height="64" alt="" src="system/html/client-38c63940.png">
</figure>
<p>bla bla bla</p>
</section>
<br>
<section id="boxItemBottom" class="ce_text boxItemRight block">
<figure class="image_container">
<img width="64" height="64" alt="" src="system/html/newsletter-5ca03f57.png">
</figure>
<p>bla bla bla</p>
</section>
<section id="boxItemBottom" class="ce_text boxItemRight block">
<figure class="image_container">
<img width="64" height="64" alt="" src="system/html/rss-27d0b3e9.png">
</figure>
<p>bla bla bla</p>
</section>
<section id="boxItemBottom" class="ce_text block">
<figure class="image_container">
<img width="64" height="64" alt="" src="system/html/contact-4d2d7b8f.png">
</figure>
<p>bla bla bla</p>
</section>
</article>
</div>
<div id="clear"></div>
</section>
Toutes les boxItem doivent avoir la même hauteur. Mais j'ai remarqué que si je mets 3 lignes dans le première et 4 lignes dans seconde boitie faisant partie de la même "ligne", les deux boites ne sont plus alignées.
Voici mon css:
Code : Tout sélectionner
#boxItemTop {
background-image: url("../../tl_files/site/img/container.png");
background-repeat: repeat;
border: 1px solid #286D78;
border-radius: 10px 10px 10px 10px;
display: inline-block;
height: 100px;
margin-top: 50px;
overflow: visible;
padding: 10px;
text-align: left;
width: 200px;
}
#boxItemBottom {
background-image: url("../../tl_files/site/img/container.png");
background-repeat: repeat;
border: 1px solid #286D78;
border-radius: 10px 10px 10px 10px;
display: inline-block;
height: 100px;
margin-bottom: 30px;
margin-top: 50px;
overflow: visible;
padding: 10px;
position: relative;
text-align: left;
width: 200px;
}
.boxItemRight {
margin-right: 50px;
}
Je ne comprends pas pourquoi les boites bougent en suivant le nombre de ligne de texte surtout que les boites ont une hauteur fixe.
J'espère que vous pourrez me filer un coup de main