18041 sujets

Questions générales et questions de débutants

3 paragraphes sur une même ligne.

Bonjour, je suis actuellement entrain de faire des tests pour participer à une formation de développeur Web.
Malheureusement avec le peu de connaissance je bloque sur l'avancer du projet, je n'arrive pas a aligner les 3 blocks de text(couleur bleu rouge jaune) sur la même ligne...impossible de faire remonter le jaune, avez vous des suggestions ?

Merci beaucoup Smiley biggrin

upload/1564507721-76533-sans-titre-convertimage.jpg
Modifié par Dimbo (30 Jul 2019 - 20:45)
Modérateur
Les styles s'appliquent souvent sur une structure HTML , là , il n'y a ni l'un ni l'autre. La réponse pourrait être d’éditer ton image mais j'imagine que tu as un soucis de code . Si c'est le cas, partage le code que tu as et dis nous ce que tu as tenter de faire.
Merci pour la réponse, j'essai de reproduire une maquette que mon future formateur m'a donnée pour la réaliser en html et css.

html :
J'ai utilisé des <div> </div> pour créer 3 blocs différents afin de les mettre sur une même ligne.
Chaque div est composées d'une class par exemple
<div class="retro">

Css:
Dans mon css j'ai mis des couleurs aux fonds pour pouvoir différencier mes 3 blocs

.retro{
text-align: center;
background-color: blue;
width: 250px;
float: left;
margin :0 auto 0 0;
}
.demo{
text-align: center;
background-color: red;
width: 250px;
float: center;
margin :0 auto 0 auto;
}
.tournois{
text-align: center;
background-color: yellow;
width: 250px;
margin :0 0 0 auto;
float: right;

J'ai encore du mal avec le positionnement de module (bloc), mais j'ai beau chercher et manipuler je n'est pas trouvé la solution. Pourtant cela me paraissait simple à réaliser Smiley cligne
Administrateur
Hello,

Pour commencer, "float: center" n'existe pas, il ne peut donc produire aucun résultat. Où as-tu lu cette bizarrerie ?

Dans un second temps, je te suggère vivement de laisser tomber le positionnement flottant, qui n'est vraiment pas fait pour cela, à moins que tu n'aies à supporter de très vieux navigateurs tels que IE9 par exemple.

Renseigne-toi sur les positionnement Flexbox ou Grid Layout, cela te facilitera grandement la vie Smiley smile (il y a des articles sur ces sujets dans Alsacréations, mais également sur des ressources indispensables telles que MDN).

Bonne chance !
Meilleure solution
Salut,
Cette "bizarrerie" sort de ma tête, il existe float right et left pourquoi pas center mdr Smiley smile
Je me renseigne merci mais je suis débutant et ne comprend pas l'ensemble des explications.
J'ai réussi après 2/3h de manipulation ! Mais je n'ai pas compris comment ^^
Administrateur
Dimbo a écrit :
Mais je n'ai pas compris comment ^^

Ce n'est ni anormal ni alarmant Smiley smile

Tu as raison. CSS est un langage qui s'apprend, il y a des règles de base à connaître notamment sur l'impact que peut avoir un sélecteur par rapport à un autre, le choix d'un positionnement par rapport à un autre, rien n'est dû au hasard et ce n'est pas parce qu'un truc ne marche pas qu'on essaye un autre truc au hasard.

Il existe d'excellentes ressources d'apprentissage, notamment les documentations de MDN (https://developer.mozilla.org/fr/docs/Web/CSS).
Il faut prendre le temps de les assimiler, ne pas sauter les étapes. Bref, comme n'importe quel autre langage, mais la bonne nouvelle est que n'importe qui peut y arriver Smiley cligne
Jean-Pierre-Bruneau a écrit :
Houla Smiley eek A quoi sert HTML5 si tu conseilles une solution avec des tables Smiley cligne


comme je suis débutant je prends toutes les solutions que l'on me proposera ...

Merci
Sujet clos
Aller à