Chrome et Firefox avec des flexbox...
valttt
Messages postés
275
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
14 octobre 2024
-
Modifié le 14 oct. 2024 à 19:47
valttt Messages postés 275 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 14 octobre 2024 - 14 oct. 2024 à 21:50
valttt Messages postés 275 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 14 octobre 2024 - 14 oct. 2024 à 21:50
A voir également:
- Chrome et Firefox avec des flexbox...
- Mise a jour chrome - Accueil - Applications & Logiciels
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Restaurer onglets chrome - Guide
- Chrome cast sur tv - Guide
- Comment supprimer bing de firefox - Guide
2 réponses
Bruno83200_6929
Messages postés
273
Date d'inscription
jeudi 18 juin 2020
Statut
Membre
Dernière intervention
14 octobre 2024
51
14 oct. 2024 à 20:27
14 oct. 2024 à 20:27
Bonjour,
Vous pouvez essayer d’ajouter un "reset CSS" qui permet d’uniformiser le comportement des navigateurs en définissant les styles par défaut de manière cohérente.
* { margin: 0; padding: 0; box-sizing: border-box; }
Cela peut aider à corriger les différences de comportement de certains navigateurs.
Si tu veux un exemple plus spécifique basé sur ton code, tu peux partager la partie concernée pour une analyse plus approfondie.
valttt
Messages postés
275
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
14 octobre 2024
15
14 oct. 2024 à 21:50
14 oct. 2024 à 21:50
Merci pour votre aide.
Voici mon code :
<div class="BlocMain"> <!--Aside--> <aside id="aside"> <div id="BlocAside"> <div class="BlocBenefit"> <div class="Always"> <div class="title1"> <div class="title2"> <h2>Titre</h2> </div> </div> </div> </div> </aside> <!--Article--> <article id="article"> <div id="BlocArticle"> <div class="BlocBefore"> <div class="Before"> <div class="title1"> <div class="title2"> <h2>Avant</h2> </div> </div> </div> </div> <div class="BlocAfter"> <div class="After"> <div class="title1"> <div class="title2"> <h2>Après</h2> </div> </div> </div> </div> </div> </article> </div> <style> /******************FONTS**********************/ /***************Box-sing on all elements***************/ * { box-sizing: border-box; } /***************************BODY**************************/ body { margin: 0; } /*************************MAIN*****************************/ a { color: #000 } /* BlocMain */ .BlocMain { height: 770px; margin-top: 50px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap-reverse; gap: 15px; } /* Aside (left side) */ #aside { width: 31%; height: 760px; margin-top: 1.5%; } #BlocAside { background-color: #e0e0e0; height: 750px; margin-top: 1.5%; border: none; border-radius: 20px 20px; } /* Article (right side) */ #article { width: 64%; height: 760px; margin-top: 1.5%; } #BlocArticle { background-color: #e0e0e0; height: 750px; margin-top: 0.75%; border: none; border-radius: 20px 20px; display: flex; flex-direction: row; justify-content: space-between; } /* BlocBenefit*/ .BlocBenefit { width: 100%; } /* BlocBefore and BlacAfter */ .BlocBefore, .BlocAfter { width: 70%; } .BlocBefore { border-right-width: 1px; border-right-color: #000; border-right-style: solid; } /* Before and After */ .Before, .After { margin-top: -1px; } /* Title */ .Before .title1, .After .title1 { width: 92%; padding-top: 1.5%; padding-left: 45%; } .Always .title1 { width: 92%; padding-top: 1.5%; padding-left: 35%; } .title2 { width: 100%; margin-top: 10px; margin-bottom: 5px; margin-left: auto; margin-right: auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .title2 h2 { margin-bottom: 8px; } /* Media Querie >1350px */ @media (max-width: 1350px) { #BlocAside { height: 680px; } #BlocArticle { height: 680px; } } /* Media Querie >1350px */ @media (max-width: 1250px) { #BlocAside { height: 680px; } #BlocArticle { height: 680px; } }