28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous
J'étudie actuellement le html et css.

Pour mon projet à l'école je dois positionner deux <div> côte à côte . Une image à côté d'un texte réparti en 3 colonnes .

J'ai vu avec mon prof pour le HTML il m'a dit que la structure était correct . Cependant je n'arrive pas du tout à placer cette image à côté de mon texte.

Si vous pouviez me donner un coup de main car la je sèche complètement.



<section id ="nos-services">




	<div class="head">

		<h1 class="titre-services"> Nos services </h1> 


	<div class="trait"> <div class="circle"><i class="fas fa-circle"></i></div></div>
		

		<p class="description"> Nous nous adaptons à chacuns de vos projets afin qu'ils soient uniques,esthétiques et performants. 
		</p>
	</div>




<aside>
			<img src="images/pic_pc.png"" alt="photo de pc" /> 
</aside>

		
<ul id="contenu">
	

    <li>
      <h2><div class="cercle"><span><i class="fas fa-chart-line"></i></span></div> UX Design</h2>
      		<p>Amélioration de l'expérience utilisateur par l'anticipation des attentes et des besoins de chacuns.</p>
    </li>


    <li>
      <h2><div class="cercle"><span><i class="fas fa-chart-pie"></i></span></div> UI Design</h2>
      		<p>Expérience de navigation la plus intuitive possible via un design fonctionnel...</p>
    </li>


    <li>
      <h2><div class="cercle"><span><i class="fas fa-cubes"></i></span></div> 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>
    </li>


 </ul>

</div>	
</section>




.titre-services 
{
    text-align: center;
    font-family:'robotoblack', arial ,sans-serif;
    font-size: 40px;
    margin-top: 5px;
    color:#282828;
    padding-top: -1px;
}

.description
{
   
    font-family: 'robotoregular', arial ,sans-serif;
    font-size: 14px;
    padding-top: 20px;
    color: #6f7a81;
}



.head
{
   
    position: relative;
    text-align:center; 
    font-size:2em;  
   
                      
  
    border:1px solid black;
     }




h2
{
    margin-left:15px;
    padding-top: 15px;
}

li p
{
    margin-left: 15px;
    color: #6f7a81;
    font-family: 'robotoregular', arial ,sans-serif;
    font-size: 14px;
}


#contenu
{
    display: flex;
    flex-direction: column;
    list-style: none;
    margin-left:50%;
    margin-bottom: 200px;
}






aside
{
    width:500px;
}

aside img /* Image de PC */
{
  
    padding-top: 15px;
   
}


allan00958 a écrit :
Hello

Et si tu changeais la propriété "flex-direction: row" sur "#contenu" ?


Justement je veux que ça reste en colonne et sur la droite ..
Mais à côté de l'image de mon PC .
J'ai trouvé une solution toute simple avec les margin