[Résolu][CSS] Alignements d'élements

Questions, astuces à propos des modèles et des feuilles de styles
azer
Membre
Messages : 45
Inscription : 31 Juil 2008 20:50

[Résolu][CSS] Alignements d'élements

Messagepar azer » 24 Août 2012 15:32

Bonjour,

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 :)
Dernière édition par azer le 27 Août 2012 14:54, édité 1 fois.

Landry
Membre
Messages : 71
Inscription : 10 Juil 2012 13:28
Localisation : Tours

Re: [CSS] Alignements d'élements

Messagepar Landry » 24 Août 2012 16:44

Je suis désolé mais je n'ai pas le temps de tout lire mais en survolant j'ai vu que tu parlais de taille fixe.
Essaye plutôt en utilisant les tailles maximals
css/html tout va bien -- php un peu moins -- javascript encore moins -- débutant sur contao

Avatar de l’utilisateur
audrey
Membre
Messages : 282
Inscription : 07 Mars 2011 09:09
Localisation : Perpignan
Contact :

Re: [CSS] Alignements d'élements

Messagepar audrey » 24 Août 2012 16:52

La boite s'agrandi parce que tu as mis un padding dans tes boites.
Donc effectivement, mets plutôt un max-height. Cela forcera la hauteur à 100px maxmum. Le problème c'est si la taille de la police s'agrandi chez le visiteur, ou si tu ajoutes du texte, là ça va déborder ..

Sinon, une autre solution par ici : http://forum.contao.fr/post12298.html#p12298

azer
Membre
Messages : 45
Inscription : 31 Juil 2008 20:50

Re: [CSS] Alignements d'élements

Messagepar azer » 27 Août 2012 14:54

Super c'était bien à cause du padding. Impecc. Ces boites ne doivent pas avoir beaucoup de texte. Si un jour ça devient le cas c'est qu'il faudra passer ce texte en article ...

Merci :)


Revenir vers « Modèles et CSS »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité