Je débute tout juste le HTML et le CSS grâce à Open Classroom et je me retrouve face à un problème, je viens donc vers vous afin d'obtenir une aide et pourquoi pas une explication afin de mieux comprendre le fonctionnement de la mise en page avec flexbox, etc...
Mon problème est tout simple, je n'arrive pas à placer le texte en rouge ci-dessous (dans la bordure experiences) à droite du texte en noir, j'ai passé toute l'après-midi à faire des pied et des mains sans succès, ce n'était jamais exactement comme il faut.
Désolé si mon code semble "bordélique", je débute et de plus ayant trifouillé celui-ci toute l'après-midi pour résoudre mon problème et modifier mes données personnelles par Dwayne Johnson avant de vous le partager il se peut qu'il soit bien alambiqué !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="ut-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dwayne Jonhson</title>
<link rel="stylesheet" href="MonCV2.css">
</head>
<body>
<div id="liseret"><a href="img/PhotoDeProfilXL.jpg"><img src="img/PhotoDeProfil.jpg" alt="Ma photo de profil"></a>
<aside>
<h2>Langues</h2>
<ul>
<li>Anglais</li>
<li>Italien</li>
</ul>
<h2>Atouts</h2>
<ul>
<li>Fort</li>
<li>Dynamique</li>
<li>Rigoureux</li>
<li>Persuasif</li>
</ul>
<h2>Centres d'intérêt</h2>
<ul>
<li>Catch</li>
<li>Cinéma</li>
<li>Billard</li>
<li>Sport</li>
</ul>
</aside></div>
<div id="Bloc_page">
<h1>Dwayne Jonhson</h1>
<p>Catcheur WWE et star mondialement connue</p>
<section id="experiences">
<div class="gauche"><h2>Expériences</h2>
<h3>Catcheur WWE</h3>
<h4>Caroline du nord, USA</h4>
<em>De juin 1970 à décembre 2021</em>
</div>
<p class="droit"> Tabassage en règle de Undertaker et John Cena. <br>
Grande maitrise du coup de la chaise. <br>
Aisance dans les sauts de la 3ème corde.</p>
<div class="gauche"><h3>Fast and furious</h3>
<h4>Indépendant</h4>
<em>de 2007 à 2021</em>
</div>
<p class="droit">Acteur principal du Blockbuster Fast and furious</p>
<div class="gauche"><h3>Animateur jeune</h3>
<h4>Maison de quartier de Boston, New York USA</h4>
<em>De juillet 2015 à août 2015</em>
</div>
<p class="droit">Animation pour les jeunes, organisation et animation de jeux et activités de Catch</p>
<div class="gauche"><h3>Stage d'observation en milieu professionnel</h3>
<h4>Hollywood, Los Angeles</h4>
<em>Janvier 2014</em>
</div>
<p class="droit">Technique d'acting : Comédie, Drame <br>
Maitrise de l'évasion : Entrainement, suivi <br>
Carnet de contacts : Discussion, connaissance, piston</p>
<div class="gauche"><h3>Assistant événementiel</h3>
<h4>Maison de quartier à Boston, New York USA</h4>
<em>De juillet 2013 à août 2013</em>
</div>
<p class="droit">Préparation d'événements: Mise en place des tables, décorations, ring, clé à molete,...</p>
</section>
<section>
<h2>Diplômes et formations</h2>
<h3>WWE</h3>
<h4>Université Wrestle, Los Angeles</h4>
<em>de septembre 2020 à juin 2021</em>
<p>Mention très bien.</p>
<h3>Niveau terminale scientifique</h3>
<h4>Lycée Dwayne Jonhson, New York</h4>
<em>de septembre 2016 à avril 2017</em>
<h3>Double licence sport-étude</h3>
<h4>Université Wrestle et Université d'acting, Los Angeles </h4>
<em>2021- En cours</em>
</section>
<section>
<h2>Divers</h2>
<h3>Voyage</h3>
<h4>France et Amérique du sud</h4>
<em>d'août 2017 à octobre 2017</em>
<p>Visite de tous les restaurants qui finirent ruinés.</p>
<h3>Permis B</h3>
<em>2021- En cours</em>
<p>Code obtenu, 25 heures de conduite effectives.</p>
</section>
</div>
</body>
</html>
Le code CSS :
@font-face{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}
body{
display: flex;
background-color: rgb(104, 104, 104);
margin: auto;
font-size: 16px; /*Taille de base*/
width: 780px; /*taille impresion*/
border: solid 1px black;
}
#liseret{
border: rgb(90, 90, 90) 1px solid;
background-color: rgb(90, 90, 90);
border-radius: 5px 5px;
height: 500px;
width: 20%;
}
img{ /*L'image sort du liseret en réduisant la page.
Je ne sais pas comment mais j'ai réussi à palier au probléme par hasard*/
border: black 1px solid;
border-radius: 50px;
margin-left: 35px;
margin-top: 20px;
box-shadow: 5px 5px 5px rgb(0, 0, 0);
}
aside h2{
font-size: 1.2em;
padding-left: 8%;
color: rgb(94, 23, 23);
text-decoration-line: underline;
}
ul{
list-style: none;
padding-left: 15%;
}
#Bloc_page{
display: flex;
flex-direction: column;
margin-left: 100px;
}
h1{
text-align: center;
}
h1 + p{
margin-top: -20px;
text-align: center;
color: black;
}
#experiences h2{
margin-bottom: -10px;
}
h3{
margin-bottom: 0px;
font-weight: normal;
font-size: 1.2em;
}
h4{
margin-top: 0px;
margin-bottom: -2px;
font-weight: normal;
}
section{
padding-left: 10px;
}
#experiences{
display: flex;
flex-wrap: wrap;
border: black 1px solid;
font-weight: normal;
width: 400px;
}
.gauche{
color: rgb(0, 0, 0);
}
.droit{
color: rgb(94, 23, 23);
}
p{
color:rgb(94, 23, 23);
}
/*Mettre les paragraphes .droit dans les div de .gauche ?
Problème lié au div ou au conteneur bloc_page ou experiences ?
Utiliser display: inline-block; ?*/
(La bordure qui entoure le bloc expérience n'est la que pour m'aider à visualiser les choses.)
Bonsoir, display:flex; sur body dans votre cas n'est pas necessaire ! et si j'ai bien compris vous voulez mettre le texte catcheur wwe ... a gauche de tabassage en regle de undertaker ...
PS : mdr
<div class="container">
<div>catcheur wwe ....</div>
<div>tabassage en regle de undertaker</div>
</div>
<style>
.ccontainer
{
display:flex;
flex-direction: row;
justify-content: space-between;
align-items:center;
}
</style>
ca devrait les aligner sur la meme ligne vous n'auriez donc qu'a creer de nouveaux bloc container qui contiendra vos deux blocs l'un qui sera le texte en rouge l'autre le texte en noir
<section>
<h2>Expériences</h2>
<div class="container">
<div class="gauche">
<h3> Catcheur WWE</h3>
<h4> Caroline du nord, USA</h4>
<em> De juin 1970 à décembre 2021</em>
</div>
<p>Tabassage en règle de Undertaker et John Cena. <br/>
Grande maitrise du coup de la chaise. <br/>
Aisance dans les sauts de la 3ème corde.</p>
</div>
<div class="container">
<div class="gauche">
<h3>Fast and furious</h3>
<h4>Indépendant</h4>
<em>de 2007 à 2021</em>
</div>
<p><br/>Acteur principal du Blockbuster Fast and furious</p>
</div>
<div class="container">
<div class="gauche">
<h3>Animateur jeune</h3>
<h4>Maison de quartier de Boston, New York USA</h4>
<em>De juillet 2015 à août 2015</em>
</div>
<p><br/>Animation pour les jeunes, organisation et animation de jeux et activités de Catch</p>
</div>
Par contre comme on peut le voir j'ai du mettre des <br/> avant les paragraphes (excepté pour le premier parce qu'il commence en même temps que celui de gauche de par sa taille), car je voulais qu'ils soient centrés par rapport aux textes de gauche et non pas qu'ils démarrent au même niveau, je ne sais pas si c'est très clean sémantiquement par contre :/.
Code CSS :
@font-face{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}
body{
display: flex;
background-color: rgb(104, 104, 104);
margin: auto;
font-size: 13px; /*Taille de base*/
width: 780px; /*taille impresion*/
border: solid 1px black;
}
#liseret{
border: rgb(90, 90, 90) 1px solid;
background-color: rgb(90, 90, 90);
border-radius: 5px 5px;
height: 500px;
width: 20%;
}
img{ /*L'image sort du liseret en réduisant la page.
Je ne sais pas comment mais j'ai réussi à palier au probléme par hasard*/
border: black 1px solid;
border-radius: 50px;
margin-left: 35px;
margin-top: 20px;
box-shadow: 5px 5px 5px rgb(0, 0, 0);
}
aside h2{
font-size: 1.2em;
padding-left: 8%;
color: rgb(94, 23, 23);
text-decoration-line: underline;
}
ul{
list-style: none;
padding-left: 15%;
}
#Bloc_page{
display: flex;
flex-direction: column;
margin-left: 100px;
}
h1{
text-align: center;
}
h1 + p{
margin-top: -15px;
text-align: center;
color: black;
}
h2{
margin-bottom: 0px;
}
h3{
margin-bottom: 0px;
font-weight: normal;
font-size: 1.2em;
}
h4{
margin: 0px;
font-weight: normal;
}
.container{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items: baseline;/*Aligner le texte et <br> en HTML pour centrer par rapport au texte de gauche*/
}
.gauche{
width: 200px;
}
.container p{
width: 300px;
margin-left: 10px;
}
p{
color:rgb(94, 23, 23);
}
J'ai remplacé align-items: center; par align-items: baseline; afin que le texte de droite et celui de gauche reste bien aligné.
Bonne journée !
- Edité par Cuillere. 27 octobre 2021 à 16:13:15
[CSS] Positionner un texte à droite
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
yasakani no magatama