28168 sujets

CSS et mise en forme, CSS3

Centrage d'élement dans un popup

Bonjour
J'ai modifié un code existant en remplaçant une image par une icone.
Le code CSS est moderne et peu trop complexe pour moi.
Je n'arrive pas à centrer la partie centrale (icone + texte) et à la faire un peu descendre en bougeant des valeurs de la colonne !?
quel que soit l’écran bien sûr (et si possible sans javascript)

https://jtest-ext.88h.ovh/index.php?option=com_content&view=article&id=15:art-avec-img-webp&catid=9&Itemid=101

<div class="eb-columns-container columns-2">
<div id="icone">????</div>
<div class="eb-column">
<p><span class="fw-bold">Et si vous nous aidiez à grandir ?</span></p>
Et rendre plus visible<br>les ressources documentaires 
<p><span class="fw-bold">à partir de ce site<br><strong>Gros projet d'insérer plusieurs milliers de livres</strong> d'ici l'été. <br>Besoin d'au moins 2 000€ !<br></span></p>
<span class="fw-bold"><a href="pourquoi-faire-un-don">Faites un don dès maintenant</a></span></div>
</div>




div #icone {
  font-size: 6rem;
}

.eb-{eb.id} {
	font-size: 16px;
}

.eb-{eb.id} .eb-dialog {
    background-image: url(https://templates.tassos.gr/images/engagebox/templates-assets/Sales/abstract-shape-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.eb-{eb.id} .eb-container {
	width: 100%;
}

.eb-{eb.id} .eb-container img {
	margin: 0 auto;
    display: block;
    max-height: 270px;
}

.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(1) {
	flex-basis: 40%;
}

.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(2) {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.eb-{eb.id} .eb-mast-head {
	font-weight: 700;
	font-size: 10px;
	line-height: 12px;
}

.eb-{eb.id} .eb-title {
	margin-top: 0;
	font-weight: 700;
	font-size: 40px;
	line-height: 47px;
	color: #FE512B;
	margin-bottom: 16px;
}

.eb-{eb.id} .eb-description {
	color: #212121;
	margin-bottom: 22px;
}

.eb-{eb.id} .eb-btn {
	display: inline-block;
	padding: 16.5px 50px;
	color: #fff;
	background: #FE512B;
	border-radius: 39px;
        text-decoration: none;
}

.eb-{eb.id} .eb-close {
	width: 35px;
	height: 35px;
	background: #FE512B;
	border-radius: 50%;
}

@media only screen and (max-width: 991px) {
	.eb-{eb.id} .eb-dialog,
	.eb-{eb.id} .eb-content {
		overflow: initial;
	}

	.eb-{eb.id} .eb-close {
		top: -45px;
	}
	
	.eb-{eb.id} .eb-dialog {
		background: #fff;
		box-shadow: 0px 11px 15px -7px rgba(0,0,0,.2), 0px 24px 38px 3px rgba(0,0,0,.1), 0px 9px 46px 8px rgba(0,0,0,.1);
		height: auto !important;
		padding: 24px !important;
	}

	.eb-{eb.id} .eb-columns-container {
		gap: 8px;
	}
}

@media only screen and (max-width: 576px) {
	.eb-{eb.id} img {
		display: none;
	}

	.eb-{eb.id} .eb-title {
		font-size: 30px;
	}

	.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(2) {
		align-items: center;
	}
}
Bonsoir
A priori c'est bon en déplaçant juste l'icone avec
div #icone {
  font-size: 6rem;
  margin-top: 60px;
  margin-left: 80px;
  margin-right: 20px;
}


Pouvez-vous me confirmer que c'est ok en me disant sur quel système, navigateur, voir écran ?
Merci
Bonjour
Bon en fait je reviens vers vous car jeme suis aperçu que j'avai viré une colonne dans le code Smiley decu
Je dois aussi prendre en compte que l'icone ou le texte peut varier.

Comment diminuer l'espace entre les 2 colonnes ?

div #icone {
  font-size: 10rem;
  margin-left: 60px;
  margin-top: 80px /* parfois nécessaire selon icone */
}



<div class="eb-columns-container columns-2">
<div id="icone" class="eb-column">????</div> /* MODIF colonne*/
<div class="eb-column">
<p><span class="fw-bold">Et si vous nous aidiez à grandir ?</span></p>
Et rendre plus visible<br>les ressources documentaires 
<p><span class="fw-bold">à partir de ce site<br><strong>Gros projet d'insérer plusieurs milliers de livres</strong> d'ici l'été. <br>Besoin d'au moins 2 000€ !<br></span></p>
<span class="fw-bold"><a href="pourquoi-faire-un-don">Faites un don dès maintenant</a></span></div>
</div>

Modifié par HDcms (02 Oct 2024 - 10:34)
Modérateur
Bonjour, bonsoir,

Il est difficile de t'aider, je suis revenu plusieurs fois sur ton sujet et ouvert ta page en lien pour me faire une idée.
La popup dont tu parles s'est finalement ouverte au moment ou j'allais à nouveau fermé l'onglet de ton lien car je ne voyais toujours pas ce dont tu parlais. Du coup, okay, je la vois , regardons dans l'inspecteur ... heu Smiley sweatdrop j'ai pas assez de temps là pour trier tout ça....
alors il y a un premier problème chez moi, l'affichage de la popup est aléatoire et ne se fait quasiment jamais ou alors je n'ai pas trouvé ce qui declencher son affichage.

Pour ta question et demande d'aide, le HTML donné et la feuille de style avec tes {eb.id} rend impossible le test de ton extrait de code. Tenter d'extraire le code et le css de ta page pour cet élément depuis l'inspecteur est une vrai misère. (X feuilles de styles et styles inline à trier et récupérer) .

En conclusion, même en voulant faire un effort (et je suis revenu plusieurs fois sur ton sujet) pour récupérer uniquement ta portion de HTML complète et les styles appliqués à cette boite pour reproduire et visualiser ton soucis, on fini par jeter l'éponge même si on a une opinion et quelques idées ou approches à te proposer.

Il faudrait que tu nous fasses un condensé fonctionnel qui reproduise ton soucis.
Bonsoir
D'abords merci d'avoir essayé. Effectivement j’oubliais qu'il a un comportement spécial.
J'avai déjà simplifié côté admin, maintenant je le laisse en permanence, est-ce que cela peut aider car sinon comment encore simplifier ?

Avec les codes fournies, j'avais trouvé une propriété comme https://fr.w3docs.com/apprendre-css/grid-column-gap.html mais je ne sais pas si c'est utile ni comment faire ?
Ce qui est sûr aussi c'est que je ne veux pas la même largeur des colonnes
Modérateur
Bonjour,

je viens de reprendre ton HTML et ton image et comme je travaille tout à l'heure, je te propose une approche en grid et float+shape-outside et un aspect-ratio pour tenter de coller a la longueur de texte et l'image en bg..

.eb-columns-container {
  font-size: 16px;
  background-image: url(https://templates.tassos.gr/images/engagebox/templates-assets/Sales/abstract-shape-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  display: grid;

  aspect-ratio: 2/1;
  max-height: 18em;
  margin-inline: auto;
}
.eb-column:before {
  content: "";
  height: 100%;
  float: left;
  width: 200px;
  shape-outside: polygon(
    99% 1%,
    27% 22%,
    20% 37%,
    29% 45%,
    36% 54%,
    35% 63%,
    31% 70%,
    20% 74%,
    1% 75%,
    0% 0%
  );
}
.columns-2 {
  grid-template-columns: 60px 1fr;
  gap: 1em;
}
#icone {
  font-size: 80px;
  padding-inline-start: 0.5em;
  margin: auto;
}
.eb-column p:first-of-type {
  padding-top: 2.2em;
}


codepen pour jouer avec : https://codepen.io/gc-nomade/pen/YzmqXBX

J’espère que cela peut t'aider et t'inspirer.

________________________________________________________________________________
edit
a propos du CSS

https://developer.mozilla.org/fr/docs/Web/CSS/shape-outside

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout

https://developer.mozilla.org/fr/docs/Web/CSS/clamp

https://developer.mozilla.org/fr/docs/Web/CSS/aspect-ratio

et https://bennettfeely.com/clippy/ pour les formes en clip-path/shape-outside.
Modifié par gcyrillus (03 Oct 2024 - 12:55)
Bonjour
Merci pour ton suivi mais je pense que j'ai compris mes difficultés Smiley eek
D'abords, cette popup dépend d'une extension qui génère plein de forme différente.
Il y a donc une partie du code qui se trouvait ailleurs de ce que je fournissais (voir image)
J'avai essayé avec codepen mais cela ne pouvait fonctionner !
De plus je ne dois pas non plus modifier le HTML et juste adapter le contenu

Je pense que c'est plus correct avec le code suivant sauf remarques pour améliorer et passer partout

div#icone {
 font-size: 12rem;
 margin-top: 100px;
 margin-left: 80px;
}

.eb-{eb.id} {
	font-size: 16px;
}

.eb-{eb.id} .eb-dialog {
    background-image: url(https://templates.tassos.gr/images/engagebox/templates-assets/Sales/abstract-shape-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.eb-{eb.id} .eb-container {
	width: 100%;
}

.eb-{eb.id} .eb-container img {
	margin: 0 auto;
    display: block;
    max-height: 270px;
}

.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(1) {
	flex-basis: 40%;
}

.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(2) {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.eb-{eb.id} .eb-mast-head {
	font-weight: 700;
	font-size: 10px;
	line-height: 12px;
}

.eb-{eb.id} .eb-title {
	margin-top: 0;
	font-weight: 700;
	font-size: 40px;
	line-height: 47px;
	color: #FE512B;
	margin-bottom: 16px;
}

.eb-{eb.id} .eb-description {
	color: #212121;
	margin-bottom: 22px;
}

.eb-{eb.id} .eb-btn {
	display: inline-block;
	padding: 16.5px 50px;
	color: #fff;
	background: #FE512B;
	border-radius: 39px;
        text-decoration: none;
}

.eb-{eb.id} .eb-close {
	width: 35px;
	height: 35px;
	background: #FE512B;
	border-radius: 50%;
}

@media only screen and (max-width: 991px) {
	.eb-{eb.id} .eb-dialog,
	.eb-{eb.id} .eb-content {
		overflow: initial;
	}

	.eb-{eb.id} .eb-close {
		top: -45px;
	}
	
	.eb-{eb.id} .eb-dialog {
		background: #fff;
		box-shadow: 0px 11px 15px -7px rgba(0,0,0,.2), 0px 24px 38px 3px rgba(0,0,0,.1), 0px 9px 46px 8px rgba(0,0,0,.1);
		height: auto !important;
		padding: 24px !important;
	}

	.eb-{eb.id} .eb-columns-container {
		gap: 8px;
	}
}

@media only screen and (max-width: 576px) {
	.eb-{eb.id} img {
		display: none;
	}

	.eb-{eb.id} .eb-title {
		font-size: 30px;
	}

	.eb-{eb.id} .eb-columns-container .eb-column:nth-of-type(2) {
		align-items: center;
	}
}


upload/1727956282-58614-capturedancrandu2024-10-0313-.png
Modérateur
HDcms a écrit :
Bonjour
Merci pour ton suivi mais je pense que j'ai compris mes difficultés Smiley eek

C'est rassurant pour toi, désolé du défaut d'efficacité.
HDcms a écrit :

D'abords, cette popup dépend d'une extension qui génère plein de forme différente.
Il y a donc une partie du code qui se trouvait ailleurs de ce que je fournissais (voir image)
J’avais essayé avec codepen mais cela ne pouvait fonctionner !
De plus je ne dois pas non plus modifier le HTML et juste adapter le contenu

Oui, pour le coup il est compliqué de pimper un truc déjà cadrer.

Visuellement , c'est mieux et je le vois Smiley smile . Il y a un débordement du texte sur la forme en première ligne et le bouton est proche du bord en desktop. En dessous de 992px, tu n'as à priori encore rien tenter. Je ne connais pas ce CMS ni ce module .je ne pourrais pas t'orienter.

Cdt
Bonjour
Je pense que cela est résolu avec

/*div#icone { /* avant*/
 font-size: 12rem;
 margin-top: 100px;
 margin-left: 80px;
}*/
div#icone {
     font-size: 10rem;
     line-height: 2;
     text-align: center;
}
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à