[Résolu] Div aligné à droite : mon "right: 0" ne suffit pas...

Bonsoir,

Je dispose classiquement d'une bannière avec background photo et au-dessus un titre dans un encadré blanc.

Je souhaite que cet encadré se colle à droite et bien entendu en responsif.

J'ai donc utilisé une position absolute et un right: 0 mais si j'obtiens bien une position à droite, mon encadré ne se colle pas complètement à droite.

J'ai tenté de jongler avec un retrait de type right: -6% (ou -70x) mais ça ne fonctionne pas dans toutes les largeur d'écrans puisque l'écart varie si j'étire mon écran, et d'ailleurs ça ne peut être qu'une rustine.

Pour ma bannière photo, j'utilise un dégradé par dessus :

.background-image-page-header::after {
	content: ""!important;
	position: absolute!important;
	height: 100%!important;
	width: 100%!important;
	top: 0!important;
	left: 0!important;
	right: 0!important;
	background: linear-gradient(135deg, white 150px, 35%, transparent);
}

et pour mon encadré, la version avec ma rustine de right: -6%

.page-header.background-image-page-header .page-header-title {
	color: #008bd2!important;
	text-align: left!important;
	padding: 35px!important;
	background-color: rgba(255,255,255,1.00);
	position: absolute!important;
	bottom : -200px!important;
	right: -6%!important;
	width: 500px!important;
}

Est-ce qu'il n'y aurait pas un conflit avec mon code dégradé ?

Pour info, j'utilise régulièrement un !important car je travaille avec un thème wordpress, et même s'il est très pro, ça complique un peu la question .

Bref, peut-être qu'il existe une solution de type flex-end pour forcer cet alignement à droite, je ne sais plus trop là...
Modifié par goudurisc (12 Jun 2020 - 01:05)

Ok mais je ne sais pas si ça va aider beaucoup...
<main id="main" class="site-main clr" role="main">
<header class="page-header background-image-page-header">
<div class="container clr page-header-inner">
<h1 class="page-header-title clr" itemprop="headline">Nos expertises</h1>
</div>
<!-- .page-header-inner -->

<span class="background-image-page-header-overlay"></span> </header>
<!-- .page-header --><!-- #content-wrap -->

</main>

Bonjour,
tu peux nous mettre une url? Ça sera plus simple pour résoudre ton problème.

Ah c'est nettement mieux comme ça.
Donc tu peux retirer toutes tes bidouilles sur le right.

Ton H1 (.page-header-title) ne doit pas être en position absolute, tu peux simplement garder le width.
Et ensuite, tu solutionnes comme ceci:

.background-image-page-header .page-header-inner {
    position: absolute;
    right: 0;
    display: flex;
    justify-content: flex-end;
}

En fait ton problème est tout simple. Tu as demandé à ton H1 de se mettre en position:absolute. Soit, mais il s'agit d'une position absolute par rapport à ta div qui l'encadre à savoir ton .container parce qu'il est en position relative.
Et comme ton .container possède la propriété width: 1240px, tu te retrouves avec un encadré qui vient se coller sur la droite de ta div .container. Donc dès que l'écran est grand ça laisse une marge à droite.
La solution est de déplacer ton .container pour le coller à la droite de l'écran, comme j'ai fait avec le bout de code fournis.

edit: j'ai choisis un display:flex pour que ton cadre ne sorte pas du flux et que si tu le souhaites tu puisses appliquer un bottom: 0 sans avoir ton titre qui vient se positionner en dehors du background. Un position absolute dans un position absolute c'est clairement pas la joie.
Modifié par Raphi (12 Jun 2020 - 14:59)

Que c'est beau la science C'est là où je me rends compte du chemin qu'il me reste à parcourir en CSS. Bon ben tes explications sont aussi claires que l'efficacité de ta solution !
Un vrai grand merci Raphi ! Mais je crois que ça se conclut souvent comme ça sur ce forum en or massif ! Et clic de plus sur "Marquer le sujet comme résolu" !

Avec plaisir !
Content que mes explications soient claires (j'avais un doute ).
Bon courage à toi et bon dev !