Bonjour,

Je suis étudiant et je travaille actuellement sur un petit projet. Regardez plutôt l'image ci-dessous :

(ps: Me jugez pas je viens de commencer, rien n'est définitif je suis encore en phase de veille technologique...)

J'ai 4 images qui sont en position absolute car je fais des animations dessus, mais j'aimerais les aligner  verticalement en bas (au niveau des pieds) au lieu d'en haut (là elles sont alignées au niveau de la tête).

J'ai essayé plusieurs trucs en CSS comme

vertical-align:bottom;

Au niveau des images, de la div, rien de marche, le problème vient peut etre de bootstrap ?

 Voici mon code html (je suis avec laravel):

<section class="row">
                    <div class="avatars col-md-7">
                        <a href="#homme">{!! Html::Image('/images/pere.png', "pere", ['id=1 width=12% height=auto onclick=transformation(1,"pere") class=homme'], true) !!}</a>
                        <a href="#femme">{!! Html::Image('/images/mere.png', "mere", ['id=2 width=8.5% height=auto onclick=transformation(2,"mere") class=femme'], true) !!}</a>
                        <a href="#garcon">{!! Html::Image('/images/fils.png', "fils", ['id=3 width=9% height=auto onclick=transformation(3,"fils") class=garcon'], true) !!}</a>
                        <a href="#fille">{!! Html::Image('/images/fille.png', "fille", ['id=4 width=7% height=auto onclick=transformation(4,"fille") class=fille'], true) !!}</a>
                    </div>
                    <div class="col-md-4">
                        <div class="panel">
                            <div class="panel-heading">On vous emmène faire la fête !</div>
                            <div class="panel-body" id="texte"> 
                                <p id="texte">Au-coeur-des-fetes.fr est un site transmédia qui vous propose de découvrir les fêtes de Bayonne à l'aide de vidéos en 360° et d'une carte intéractive.<br/><br/>
                                Commencez par choisir votre avatar qui vous correspond le mieux !</p>
                      </div>
                    </div>
</section>

Quel code css me conseillez-vous de mettre pour ma div "avatars" ?

Avez-vous des conseils pour le positionnement ? J'avoue que je galère un peu pour le positionnement en html... Je trouve bootstrap pas vraiment efficace finalement...

Le deuxième problème c'est que quand je diminue la taille de l'écran, le panel passe par dessus les avatars, j'avoue ne pas savoir comment régler ce problème. (on voit les têtes dépasser)

Si vous pouvez m'aider ça serait vraiment cool, si vous voulez voir plus de mon code je vous le fournirai, même si je pense que rien d'autres n'est concernés, juste que les images sont en position absolute.

Merci d'avance à vous!

Salut,

La propriété vertical-align pour tes images est très bien. Malheureusement elle ne fonctionne pas ici car les colonnes de ta version de Bootstrap sont en float et que ces deux propriétés sont incompatibles en raison du fait que la propriété float fait sortir les éléments du flux.

Je te suggères d'essayer flexbox, peut être quelque chose du type :

.avatars {
display:flex;
align-items:flex-end;
}

Et pour ce qui arrive quand tu diminues la taille de ta fenêtre je te conseille de commencer par ajouter des classes pour les terminaux mobiles à tes colonnes col-md-4 et col-md-7. 

-
Edité par Mewen_bzh 18 janvier 2018 à 17:19:14

Mewen_bzh a écrit:

Salut,

La propriété vertical-align pour tes images est très bien. Malheureusement elle ne fonctionne pas ici car les colonnes de ta version de Bootstrap sont en float et que ces deux propriétés sont incompatibles en raison du fait que la propriété float fait sortir les éléments du flux.

Je te suggères d'essayer flexbox, peut être quelque chose du type :

.avatars {
display:flex;
align-items:flex-end;
}

Et pour ce qui arrive quand tu diminues la taille de ta fenêtre je te conseille de commencer par ajouter des classes pour les terminaux mobiles à tes colonnes col-md-4 et col-md-7. 

-
Edité par Mewen_bzh il y a environ 1 heure

Salut, merci beaucoup de m'aider c'est très sympa de ta part !

Ah très bien pour le problème de petits écrans, c'est réglé !

Pour l'autre problème, je ne connaissais pas flexbox, le code que tu m'a fourni ne fonctionne pas, je fais des recherches pour voir si je peux trouver un truc..

1h après:

Bon j'ai trouvé une solution, j'ai fais :

.row {
display:flex;
align-items:flex-end;
}

et j'ai rajouté bottom:0 sur toute les images, exemple:

.fille{
left:80%;
bottom:0;
}

C'est une bonne solution ?

Par contre, Lorsque l'écran est petit j'aimerai mettre mes images sur toute une ligne et le panel sur une ligne en dessous. J'ai l'impression qu'avec ce que je viens de faire ce n'est pas possible je me trompe ?

-
Edité par JeanBentayou 18 janvier 2018 à 19:18:00