Éléments qui se chevauchent lors de la réduction de fenêtre

Éléments qui se chevauchent lors de la réduction de fenêtre - HTML/CSS - Programmation

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>
 
 
 
 
 
 

Code :
  1. .pc
  2. {
  3. position: absolute;
  4. top:800px;
  5. z-index: 1;
  6. width: 300px;
  7. }
  8. .titres_description_services
  9. {
  10. height: 500px;
  11. width: 500px;
  12. min-width: 450px;
  13. position: absolute;
  14. top:900px;
  15. right: 7px;
  16. }
  17. .services_description
  18. {
  19. display:flex;
  20. }

Reply

Marsh Posté le 13-03-2019 à 11:19:06   

Reply

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...


Message édité par MaybeEijOrNot le 13-03-2019 à 11:44:48

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed