28112 sujets

CSS et mise en forme, CSS3

Divs qui se chevauchent sans raison

Bonjour,

je développe un site sous wordpress et quand je réduis ma page, les divs du footer qui contiennent les contact se chevauchent au lieu de passer les unes sous les autres. Pourtant je n'ai pas de position absolute... De plus je leur ai mis une class "bloc-footer" en indiquant un min-width: de 271px qui apparait bien valide dans la console et n'est pourtant pas respecté...
Quelqu'un aurait-t-il une idée ?
Voici l'adresse du site :
https://new.cirquelacompagnie.com/
Merci d'avance !

Isabelle
Bonsoir,

C'est Elementor ça ? Le thème dont on entend parler si souvent avec DIVI ?
Le système de classes est atroce, on se croirait dans Tailwind...

La grille problématique est en flex, je suis un peu rouillé... il y a tellement de classes et de variables CSS qui viennent parasiter la lecture que je ne sais plus où j'en suis. Un vrai imbroglio.

Je n'ai pas réussi à trouver une solution sans écraser la grille d'origine, mais j'ai quand même une solution avec Grid Layout :
.elementor-element.elementor-element-be0c56b {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17em, 100%), 1fr));
    gap: 1em;
}

À mettre à la fin de vos styles de templates. Ce n'est sans doute pas la meilleure solution mais elle vous sortira d'un mauvais pas en attendant qu'un autre alsanaute vous sorte éventuellement de là de manière plus élégante, c'est à dire sans écraser le style d'origine (@gcyrillus : si tu es dans le coin...).
Modifié par Olivier C (17 Mar 2024 - 23:12)
bonsoir
on va dire que je ne suis qu'un méchant, mais je tombe de ma chaise en voyant l'énorme code source de ta page avec autant d'erreurs.
pour une page aussi simple comment peut-on faire aussi compliqué ?
la fumée que tu vois par ta fenêtre, c'est le validateur w3c qui a explosé.
Modifié par drphilgood (17 Mar 2024 - 23:55)
Modérateur
@Olivier C
pas mieux pour pansement :
avec des sélecteurs à rallonge pour éviter des !important et mêmes conclusions et tout comme @drphilgood Smiley smile .
le minmax sur 23em pour garder les adresses mails sur une ligne Smiley decu et une tentative de contenir un peu la taille du logo.
div[data-id="be0c56b"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(23em, 100%), 1fr));
  gap: 1em;
}
div[data-id="be0c56b"] div {
  margin:0;/* se servir du gap sur la grid plutôt */
}
/* comme on a une grid:  interprétation personnel  qui réduit un peu la taille du logo  */
div:is([data-id="5d1ecf5"].elementor-element.elementor-element-5d1ecf5.e-con-full.e-flex.e-con.e-parent) div[data-id="be0c56b"] div[data-id="a368028"] {
  grid-row:1/3;
  height:0;
  min-height:100%;
  max-width:100%;  
}

div:is([data-id="5d1ecf5"].elementor-element.elementor-element-5d1ecf5.e-con-full.e-flex.e-con.e-parent) div[data-id="be0c56b"] .elementor-widget-container img {
  max-height:100%;
  width:auto;
}
/* fin interprétation perso */
Dans des cas aussi specifiques et, surtout, aussi alambiqués, je pense que l'on peut se permettre l'utilisation des `!important`.

Crédit : l'emploi de min() dans minmax() est une astuce que je dois à Yordi. Je n'y avais jamais pensé auparavant. Merci infiniment à lui.
Re.

Je fais ici un excursus de la question initiale : je suis allé voir ces fameuses erreurs du validateur W3C. Franchement j'ai vu bien pire : quand on regarde dans le détail on s'aperçoit qu'une mauvaise utilisation des balises <br> provoque la moitié d'entre elles. Rien qu'une correction sur ce point passerait le nombre d'erreurs en dessous de 50.

Le point suivant est avant tout une information et concerne même les meilleurs spécialistes de l'intégration (si si), à savoir, l'emploi de balises autofermantes sur des éléments vides (le slash de fin) :
<balise />

Ce qui déclenche un avertissement du validateur que je traduis ci :
"W3C validator" a écrit :
La barre oblique finale sur les éléments vides n'a aucun effet et interagit mal avec les valeurs d'attributs non citées.

Les fanatiques de la norme XHTML ignoreront cet avertissement avec dédain.

De même, l'avertissement du validateur sur les attributs rôles est un partit pris discutable étant donné que certains lecteurs d'écrans s'en servent encore.

Subsistent enfin quelques erreurs sur les attributs srcset et autres tags styles qui, effectivement, mériteraient une correction.

Au final, je pense que beaucoup de ces erreurs sont dûes au thème lui-même.
Modérateur
Bonjour,

Une tentative en gardant le flex d'origine, et en limitant la largeur du logo à 20em :
.elementor-element.elementor-element-be0c56b.e-con-full.logo-footer.e-flex.e-con.e-child {
    flex-wrap: wrap;
    justify-content: center;
}

.elementor-element.elementor-element-be0c56b.e-con-full.logo-footer.e-flex.e-con.e-child>div {
    max-width: max-content;
}

.elementor-element.elementor-element-be0c56b.e-con-full.logo-footer.e-flex.e-con.e-child>div:first-of-type {
    max-width: 20em;
}

Amicalement,
Modérateur
Bonjour,

Il faudrait aussi remplacer :
.fond-blanc {
  width:730px;
  margin: auto;
}
par
.fond-blanc {
  width: 100%;
  margin: auto;
}
car le width:730px; empêche le conteneur du texte de présentation du cirque de se réduire en dessous de 730px de large quand l'internaute réduit la largeur de sa fenêtre (ce qui tronque le contenu sans possibilité de le lire). Indispensable de corriger ça d'une manière ou d'une autre !

J'ai testé avec un grand écran en réduisant la largeur de la fenêtre. Je n'ai pas testé sur téléphone ou tablette.

Le reste a l'air de tenir la route (à quelques micro-détails près probablement, mais il y a toujours des micro-détails à régler de toutes façons). Globalement, j'ai trouvé que ce n'était pas si mal.

Amicalement,
Modifié par parsimonhi (18 Mar 2024 - 09:54)
Merci à tous pour vos réponse.
Le code est peut-être sale et hyper chargé, mais c'est comme ça que fonctionne wordpress... Moi le seul code que j'ajoute c'est du css et de temps en temps une fonction javascript. J'utilise elementor (qui n'est pas un thème mais un plugin constructeur de page) et le thème OceanWP.
Olivier C : Tout à fait d'accord sur le systeme de class atroce, on y comprend rien, mais c'est comme ça, ce sont des class que je n'ai pas crées.
Quant à la balise <br>, je ne l'utilise pas, mais j'utilise <br/> quand j'en ai besoin. Donc s'il y a du <br> quelque part ce n'est pas moi qui l'ai mise mais le CMS...
Voilà maintenant je vais tester vos propositions puis je vous fais un retour Smiley smile
Modifié par Isaabelle (19 Mar 2024 - 19:25)
Modérateur
Bonjour,
Isaabelle a écrit :
Quant à la balise <br>, je ne l'utilise pas, mais j'utilise <br/> quand j'en ai besoin. Donc s'il y a du <br> quelque part ce n'est pas moi qui l'ai mise mais le CMS...
Voilà maintenant je vais tester vos propositions puis je vous fais un retour Smiley smile
Justement, dans le monde de 2024, il vaut mieux employer <br> plutôt que <br/>.

De manière générale, on ne met pas de "/" juste avant le ">" dans les balises en HTML5 (pas de "/" donc pour les balises <input>, <img>, <meta>, etc.).

Note : quand on insère dans un document HTML5 des balises d'un autre "langage" comme par exemple du svg, on doit par contre continuer à se conformer aux règles de cet autre langage, et donc, dans le cas du svg, on peut être amené à utiliser des "/" avant les ">" pour des balises telles que <use>, <rect>, <path>, etc.

Amicalement,
Modifié par parsimonhi (20 Mar 2024 - 04:30)
À ce que vient de dire parsimonhi je complète en disant que j'ai vu aussi passer ceci :
</br>

Ce qui déclenche des erreurs en cascade.
Isaabelle a écrit :
Le code est peut-être sale et hyper chargé, mais c'est comme ça que fonctionne wordpress...

Nop : on peut tout à fait faire un code ultrapropre avec WordPress en créant son propre thème, mais avec pas mal de bidouillages j'en conviens.

Ceci étant dit je comprends tout à fait que l'on puisse s'appuyer sur un thème existant dans le but de livrer un produit. Un développeur/intégrateur c'est normal qu'au fil du temps il ait son fond propre, un thème de base qu'il aurait peaufiné peu à peu. De votre côté, en tant que graphiste, vous n'allez pas réinventer la roue pour une mission ponctuelle.

C'est juste qu'il est bien de savoir que c'est possible.
Modifié par Olivier C (20 Mar 2024 - 05:29)
Prévenir un modérateur
Répondre au sujet
Aller à