J'ai utiliser des div pour séparer ma partie texte et mon flotteur afin d'aligner le texte à ce dernier verticalement/horizontalement, cependant la div du texte se retrouve au premier plan et mon flotteur n'es plus cliquable qu'aux endroits où la div texte n'est pas (sur l'image, je ne peux cliquer qu'en bas ou qu'en haut mais pas au centre).
Comment faire pour que ma div avec le flotteur se retrouve au premier plan ?
J'ai trouvé un vieux sujet avec une solution type ci-dessous, mais je crois que je m'y prend mal, cela ne fonctionne pas.
#div1 { z-index: 1; }
#div2 { z-index: 10; }
Extrait de mon code :
HTML :
<body>
<div class="centrertexte">
<a href="image/chat.jpg"><img src="image/chat_petit.jpg" class="imageflottante" alt="photo chat cv" title="Cliquez pour agrandir" /></a>
<div class="content">
<h1> Mon nom </h1>
<p class="taille"> Il y a trop de blanc là dessous, je ferais des colonnes à l'avenir ! </p>
</div>
<div style="clear:both;"></div>
</div>
CSS :
/* alignement centré texte à côté du flotteur */
.centrertexte
{
text-align: center;
position: relative;
}
/* image flottante */
.imageflottante
{
float: left;
width: 200px;
height: 200px;
}
/* centrer le texte verticalement à côté du flotteur */
.content
{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
}
Pourquoi ne pas simplement fixer une largeur à ta div absolute au lieu des 100% par défaut ?
Sinon, la solution la plus simple et la plus correcte serait d'avoir dans ta bannière, 2 divs alignés. Là dans ton cas utiliser le positionnement absolut n'est pas utile.
> Sinon, la solution la plus simple et la plus correcte serait d'avoir dans ta bannière, 2 divs alignés. Là dans ton cas utiliser le positionnement absolut n'est pas utile.
Absolument et complètement d'accord avec ça : il faut penser plus simple (et éviter le position: absolute autant que faire se peut)
Par exemple avec display: flex, c'est fait pour ça, et il y a une section entière à ce sujet dans le cours d'OC.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
C'est pas faux ! je vais essayer tout ça, je reviens en cas de pépins, merci
Edit :
Alors, j'ai refais mon code HTML que voici :
<body>
<div id="enhaut">
<div class="element"><a href="image/chat.jpg"><img src="image/chat_petit.jpg" class="imageflottante" alt="photo chat cv" title="Cliquez pour agrandir" /></a></div>
<div class="element"><h1> Mon nom </h1><p class="taille"> Il y a trop de blanc là dessous, je ferais des colonnes à l'avenir ! </p></div>
</div>
J'ai donc centrer le texte verticalement par rapport au flotteur avec :
#enhaut
{
display: flex;
align-items: center;
}
Ce qui me donne ceci :
Pour l'instant c'est pas trop mal, cependant comment aligner uniquement la div avec le texte au centre de la page ? Après plusieurs essais avec align-self et margin-auto cela ne fonctionne pas.
Je ne sais pas si il y avait une meilleure manière de faire, mais je touche au but alors on va dire que le sujet est résolu merci de votre aide !
- Edité par EulalieMoreau 19 juin 2017 à 11:56:35
Div au premier plan ?
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)