<div> qui ne se place pas côte à côte

Fermé
Tinkerbell06 Messages postés 2 Date d'inscription vendredi 26 avril 2019 Statut Membre Dernière intervention 26 avril 2019 - 26 avril 2019 à 11:44
Tinkerbell06 Messages postés 2 Date d'inscription vendredi 26 avril 2019 Statut Membre Dernière intervention 26 avril 2019 - 26 avril 2019 à 15:17
Bonjour à tous

Je suis nouvelle sur le forum , et étudie le HTML/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.


<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;
   
}






Merci beaucoup par avance pour votre aide

2 réponses

Salut, structure correcte pour le HTML ? je ne crois pas.

Le dernier div fermant(ligne50 dans le code tronqué) correspond à rien. Au passage il vaut mieux éviter les div en HTML5 car ils ne représentent rien, par exemple ci ils peuvent être avantageusement remplacé par 'article' surtout qu'ils comprennent un titre.
détails ici (chapitre14) : http://41mag.fr/html5-20-conseils-et-astuces-pour-coder-proprement-ses-pages.html
La balise ASIDE ne met rien à côté elle indique simplement que le contenu n'est pas en rapport avec le contenu principal. C'est indépendant de la mise en page qui se fait en CSS. C'est donc cette balise(où directement l'image si l'image est en rapport avec le texte ASIDE n'a rien à faire là) qu'il faut positionner avec CSS.

'Cependant je n'arrive pas du tout à placer cette image à côté de mon texte. '
Commencer par créer une classe ou id CSS pour la positionner si c'est nécessaire. Sinon mettre l'image à la suite du texte et dans la même balise que le texte la mettra naturellement et plus simplement à la suite de celui ci.
Peut-être je n'ai pas compris la question car ce n'est pas clair: si vous avez 3 colonnes et que l'image doit être 'à côté' elle est forcément dans une colonne ou alors vous avez une 4ème colonne qui contient l'image et c'est celle ci qu'il faut positionner en fonction des autres.
Vous pouvez par exemple utiliser la propriété 'float' pour indiquer qu'un élément est en flottant(hors du flux normal) par rapport au précédent ou faire en sorte qu'ils soient tous sur la même ligne et diviser les dimensions en fonction du nombre de colonnes que vous voulez(ex: width:33%; sur 100% = 1/3 donc 3 colonnes de même largeur)sans oublier de supprimer les marges internes et externes(margin/padding) pour qu'elles prennent exactement la place voulue).


ps: pour voir vos erreurs facilement (cmme la balise div fermante en trop) vous pouvez utiliser un éditeur de code comme Notepad++ ou Geany IDE qui affiche une coloration syntaxique et et les erreurs en évidences ainsi.
0
Tinkerbell06 Messages postés 2 Date d'inscription vendredi 26 avril 2019 Statut Membre Dernière intervention 26 avril 2019
26 avril 2019 à 15:17
Merci pour la div effectivement je l'avais laissé en trop
Justement j'avais mis des <article> mes mes profs me les ont fais enlever ... Et remplacer .
Donc je ne fais que suivre leurs avis ..
Je met un exemple de ce que je souhaite .

0