Éléments qui se chevauchent lors de la réduction de fenêtre - HTML/CSS - Programmation
Marsh Posté le 13-03-2019 à 11:44:37
Bonjours,
Tu les as positionné en "absolute", je ne vois pas par quel miracle ils ne se chevaucheraient pas dans la mesure où tu en places un tout à gauche et un à 7px de la droite. Ils ont une largeur définie donc quand tu réduis ta fenêtre ils gardent la même largeur. Le premier garde sa largeur en s'alignant à gauche et le deuxième garde sa largeur en s'alignant à gauche, si tu réduis la largeur de ta fenêtre ils ne peuvent que se chevaucher.
Il existe plusieurs de solutions, après ça dépend de tes attentes...
Marsh Posté le 13-03-2019 à 11:19:06
Bonjour à tous
Je m'arrache actuellement les cheveux avec CSS .
Je suis sur la reproduction d'une maquette, cependant lors de ma réduction de fenêtre mes éléments se chevauchent malgrés le fait de leur avoir attribués une largueur . C'est une image à gauche de l'écran avec du texte en face
Voici mon code
<article>
<div id="services"><!--Ancre Service-->
<h1 class="titre_services" > Nos services </h1>
<p class="content"> <i class="fas fa-circle"></i> </p>
<p class="services">Notre équipe de spécialistes est à votre écoute pour construire un site web performant.</br>
Vos besoins sont notre priorité.</p>
<div class="pc">
<img src="images/pic_pc.png" alt="photo de pc" />
</div>
<div class="titres_description_services">
<div class="services_description">
<div class="services_logo">
<div class="bulle-bleue"></div>
<p class="fa_logo"><i class="fas fa-chart-line"></i></p>
</div>
<div class="service-text">
<h2> UX Design </h2>
<p>Amélioration de l'expérience utilisateur par l'anticipation des attentes et des besoins de chacuns.</p>
</div>
</div>
<div class="services_description">
<div class="services_logo">
<div class="bulle-bleue"> </div>
<p class="fa_logo"><i class="fas fa-chart-pie"></i></p>
</div>
<div class="service-text">
<h2>UI Design</h2>
<p>Expérience de navigation la plus intuitive possible via un design fonctionnel...</p>
</div>
</div>
<div class="services_description">
<div class="services_logo">
<div class="bulle-bleue"></div>
<p class="fa_logo"><i class="fas fa-cubes"></i></p>
</div>
<div class="service-text">
<h2>SEO</h2>
<p>Augmentation de la visibilité et de la qualité de votre site internet au sein des moteurs de recherche via le référencement naturel.</p>
</div>
</div>
</div>