Je bien pris soin de tester mon code avant de vous l'envoyer, il m'affiche un erreur dans (.lisere) avec :
28
.lisere
normal n'est pas une valeur de align-items : normal
Mais c'est justement grace à cela que j'ai reussi à placer mon liseré comme il faut !
J'ai passé des heures à chercher des infos dans presque toout le forum, aparement, je ne suis pas trés malin, j'ai vu des posts sur la flexbox, mais j'ai pas trouvé la solution...
je veux faire ceci, l'exercice avec le CV:
Avec cela:
Et voici mon code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Cris Braga</title>
</head>
<body>
<div id="conteneur">
<div class="lisere">lisere</div>
<div class="header">
<h1>Cris Braga</h1><br/>
<p>Especialiste dans les métiers d'accueil</p>
<p><a href="image/braga.jpg" ><img src="image/braga_mini.jpg" class="photo" alt="Photo de Braga"></a></p>
</div>
<div class="experience">
<h2>EXPÉRIENCE PROFESSIONNELLE</h2>
<dl>
<dt>01/2017 à 12/2017 → Hotel - (Palace) - Paris - 75016</dt>
<dd>Poste : coordinateur clientèle - PABX(responsable du standard téléphonique)<br/>
Missions: en charge de recevoir et d’orienter les appels au sein de l'entreprise; prendre des réservations pour les 3 restaurants de l'hôtel; prendre en charge, traiter, rapporter au responsable de service et effectuer le suivi des plaintes des clients.</dd>
<dt>06/2016 à 12/2016 → Hotel - (4 étoiles) - Paris - 75008</dt>
<dd>Poste : Réceptionniste<br/>
Missions: check-in, check-out, contrôler les arrivées et départs, facturation et encaissements, faire l'attribution les chambres, communiquer les consignes au personnel d'étages, prendre et saisir les réservations, standard téléphonique, e-mail, traiter et répondre aux plaintes des clients.</dd>
<dt>03/2016 à 05/2016 → Hotel - (4 étoiles) - Roissy - 95700</dt>
<dd>Poste : Réceptionniste(Stage pratique en tant que réceptionniste)</dd>
<dt>10/2015 à 12/2015 → Hotel - (5 étoiles) - Paris - 75008</dt>
<dd>Poste : Réceptionniste(Stage pratique en tant que réceptionniste)</dd>
<dt>09/2015 à 11/2015 → Hotel - (4 étoiles) - Roissy - 95700</dt>
<dd>Poste : Réceptionniste(Stage d'immersion et découverte du métier)</dd>
<dt>02/2005 à 01/2013 (8 ans) → Crevette's Aquaculture</dt>
<dd>Poste : Technicien de laboratoire</dd>
<dt>01/1991 à 01/2005 (14 ans) → Auto-entrepreneur</dt>
<dd> Poste: Vendeur /Représentant commercial dans l'industrie de la mode prêt-à-porter</dd>
</dl>
</div>
<div class="formation">
<h2>FORMATION</h2>
<p>Avril 2016 - →Titre Professionnel de Réceptionniste →Centre de formation professionnelle - Paris</p><br/>
<p>Décembre 1991 →BAC "S" (biologie) → Lycée Voltaire</p>
</div>
<div class="langues">
<h2>LANGUES</h2>
<ol>
<li><strong>Anglais</strong> → niveau expert ( lire, écrire, parler) - accueil, téléphone, frappe, traduction.</li>
<li><strong>Espagnol</strong> → niveau intermédiaire (lire, écrire, parler) - accueil, téléphone, frappe.</li>
<li><strong>Français</strong> → niveau expert (lire, écrire, parler) - accueil, téléphone, frappe, traduction.</li>
<li><strong>Portugais</strong> → langue maternelle</li>
</ol>
</div>
<div class="logiciels">
<h2>LOGICIELS</h2>
<p>Logiciels de gestion hôteliere(PMS):</p>
<ul><li><strong>Fols</strong> → niveau intermédiaire</li>
<li><strong>Opera Fidelio</strong> → niveau intermédiaire</li>
<li><strong>Jazotel</strong> → niveau intermédiaire</li>
</ul>
<strong>Word, Excel, Power Point et l'Internet →niveau expert</strong>
</div>
<div class="interet">
<h2>CENTRES D'INTÉRÊT</h2>
<p>La pratique de sport, la littérature, la culture française.</p>
</div>
</div>
</body>
</html>
CSS:
@font-face {
font-family: '20_dbregular';
src: url('fonts/20db_regular_macroman/20db-webfont.eot');
src: url('fonts/20db_regular_macroman/20db-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/20db_regular_macroman/20db-webfont.woff2') format('woff2'),
url('fonts/20db_regular_macroman/20db-webfont.woff') format('woff'),
url('fonts/20db_regular_macroman/20db-webfont.ttf') format('truetype'),
url('fonts/20db_regular_macroman/20db-webfont.svg#20_dbregular') format('svg');
font-weight: normal;
font-style: normal;
}
#conteneur
{
background-image: url(https://professor-falken.com/wp-content/uploads/2017/01/agua-mar-submarina-transparente-playa-arena-Fondos-de-Pantalla-HD-professor-falken.com_.jpg);
border: 10px black double;
display: flex;
}
.lisere
{
background: red;
align-items: normal;
}
.header
{
font-family: '20_dbregular';/*utilisation de la police qu'on vient de definir*/
font-size: large;
margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */
display: flex;
justify-content: space-between;
align-items: flex-end;
text-align: center;
padding: 12px;
border: 10px black double;
}
.photo
{
float: right;
}
.experience
{
border: 10px black double;
display: flex;
flex-direction: column;
}
h2
{
text-align: center;
text-decoration: underline;
}
.formation
{
color: black;
font-weight: bolder;
border: 10px black double;
display: flex;
flex-direction: column;
}
.langues
{
color: black;
border: 10px black double;
display: flex;
flex-direction: column;
}
.logiciels
{
border: 10px black double;
display: flex;
flex-direction: column;
}
.interet
{
color: black;
border: 10px black double;
display: flex;
flex-direction: column;
}
Comment bien agencer mes blocs dans mon conteneur?
Comment placer le header en haut , comme dans l'exercice?( quelle proprieté flexbox ? )
Comment placer les autres elements en bas du header, cote à cote?( quelle proprieté flexbox ? )
tu peux tout à fait rajouter des blocs conteneurs, tu sais. Par exemple, autour des trois blocs "expérience", "compétences", "formation", tu peux mettre une div. Et ainsi la cibler
- Edité par Lamecarlate 18 janvier 2018 à 13:38:29
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Ah, je vois que ça progresse ! Je vais te donner des pistes mais l'essentiel est que tu saisisse le fonctionnement de l'organisation des blocs dans les pages, après ça ira tout seul ...
Ce qui ne va pas, actuellement, c'est que tu as un "conteneur" qui contient tous tes éléments en un seul paquet (les div lisere, header, experience, formation, etc.
Comme aucune structure n'existe pour les disposer un peu, ils se placent juste au mieux, les uns à côtés des autres ...
Tu vas donc devoir réfléchir à organiser un peu tout ça en rangeant les éléments dans des boîtes qui vont se juxtaposer grâce à flex.
Pour y aller progressivement, essaye de mettre en place la 1ere structure suivante :
dans conteneur, laisse ton liseré comme il est et crée une boite (si tu veux : un div avec une classe particulière) qui va regrouper tout le reste des éléments de ta page (header, experience, etc jusqu'à interet
tu te trouves donc avec 2 ensembles juxtaposés dans "conteneur" :
lisere
et ta nouvelle boîte "fourre-tout"
et ils s'affichent côte à côte, par défaut ; pour le moment, ton site ne change pas d'apparence.
Maintenant, il te reste à organiser la nouvelle boîte "fourre-tout" dans laquelle tu voudrais avoir
le header et, juste en dessous les expérience/formation/langue côte à côte de gauche à droite ...
Normalement, tu devrais ressentir la nécessité de placer toutes ces expériences dans une nouvelle boîte pour pouvoir les gérer différemment du header.
Essaye de tracer tout ça à main levée sur un bout de papier, revois la vidéo du cours sur flex et tentes de faire les modifs de ton html/css
Désolé de ne pas pouvoir aller plus loin dans les explications, l'important est que tu visualises l'organisation des composants de ta page .
Avant d'attaquer et refaire mon html et css, je voudrais vous poser une ou deux questions:
"lamecarlate": * tu peux tout à fait rajouter des blocs conteneurs, tu sais. Par exemple, autour des trois blocs "expérience", "compétences", "formation", tu peux mettre une div. Et ainsi la cibler
R: Mais je l'ai deja fait , j'ai plusieurs conteneurs que j'ai nommé: <div class="header> ; <div class="experience"> ; <div class="formation> et ainsi de suite , jusqu'a "interets". Ce n'est pas cela ? je comprends pas ....
MichelBuono : merci de prends le temps de bien m'expliquer, mais je ne comprends pas. J'ai essayé de faire ceci:
dans conteneur, laisse ton liseré comme il est et crée une boite (si tu veux : un div avec une classe particulière) qui va regrouper tout le reste des éléments de ta page (header, experience, etc jusqu'à interet
tu te trouves donc avec 2 ensembles juxtaposés dans "conteneur" :
lisere
et ta nouvelle boîte "fourre-tout"(le meme probleme qu'avec l'instruction de lamecarlate)
<section div id="conteneur_2">
<div class="experience">
<h2>EXPÉRIENCE PROFESSIONNELLE</h2>
<dl>
<dt>01/2017 à 12/2017 → Hotel - (Palace) - Paris - 75016</dt>
<dd>Poste : coordinateur clientèle - PABX(responsable du standard téléphonique)<br/>
Missions: en charge de recevoir et d’orienter les appels au sein de l'entreprise; prendre des réservations pour les 3 restaurants de l'hôtel; prendre en charge, traiter, rapporter au responsable de service et effectuer le suivi des plaintes des clients.</dd>
<dt>06/2016 à 12/2016 → Hotel - (4 étoiles) - Paris - 75008</dt>
<dd>Poste : Réceptionniste<br/>
Missions: check-in, check-out, contrôler les arrivées et départs, facturation et encaissements, faire l'attribution les chambres, communiquer les consignes au personnel d'étages, prendre et saisir les réservations, standard téléphonique, e-mail, traiter et répondre aux plaintes des clients.</dd>
<dt>03/2016 à 05/2016 → Hotel - (4 étoiles) - Roissy - 95700</dt>
<dd>Poste : Réceptionniste(Stage pratique en tant que réceptionniste)</dd>
<dt>10/2015 à 12/2015 → Hotel - (5 étoiles) - Paris - 75008</dt>
<dd>Poste : Réceptionniste(Stage pratique en tant que réceptionniste)</dd>
<dt>09/2015 à 11/2015 → Hotel - (4 étoiles) - Roissy - 95700</dt>
<dd>Poste : Réceptionniste(Stage d'immersion et découverte du métier)</dd>
<dt>02/2005 à 01/2013 (8 ans) → Crevette's Aquaculture</dt>
<dd>Poste : Technicien de laboratoire</dd>
<dt>01/1991 à 01/2005 (14 ans) → Auto-entrepreneur</dt>
<dd> Poste: Vendeur /Représentant commercial dans l'industrie de la mode prêt-à-porter</dd>
</dl>
</div>
</section></div>
Mais le W3C me dit que je ne peux pas le faire , et creer des "boites" , des conteneurs supplementaires(qui pour moi ont deja été crées, comme j'ai dit dans la réponse à lamecarlate ci-dessus.
Error: Attribute div not allowed on element section at this point.
J'ai essayé en fait de creer des ID (car le class pour chaque bloc sont deja fait) pour chaque bloc, comme cela:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Cris Braga</title>
</head>
<body>
<div id="conteneur">
<div class="lisere">lisere</div>
<div class="header">
<h1>Cris Braga</h1><br/>
<p>Especialiste dans les métiers d'accueil</p>
<p><a href="image/braga.jpg" ><img src="image/braga_mini.jpg" class="photo" alt="Photo de Braga"></a></p>
</div>
</div>
<section div id="conteneur_2">
<div class="experience">
<h2>EXPÉRIENCE PROFESSIONNELLE</h2>
<dl>
<dt>01/2017 à 12/2017 → Hotel - (Palace) - Paris - 75016</dt>
<dd>Poste : coordinateur clientèle - PABX(responsable du standard téléphonique)<br/>
Missions: en charge de recevoir et d’orienter les appels au sein de l'entreprise; prendre des réservations pour les 3 restaurants de l'hôtel; prendre en charge, traiter, rapporter au responsable de service et effectuer le suivi des plaintes des clients.</dd>
<dt>06/2016 à 12/2016 → Hotel - (4 étoiles) - Paris - 75008</dt>
<dd>Poste : Réceptionniste<br/>
Missions: check-in, check-out, contrôler les arrivées et départs, facturation et encaissements, faire l'attribution les chambres, communiquer les consignes au personnel d'étages, prendre et saisir les réservations, standard téléphonique, e-mail, traiter et répondre aux plaintes des clients.</dd>
<dt>03/2016 à 05/2016 → Hotel - (4 étoiles) - Roissy - 95700</dt>
<dd>Poste : Réceptionniste(Stage pratique en tant que réceptionniste)</dd>
<dt>10/2015 à 12/2015 → Hotel - (5 étoiles) - Paris - 75008</dt>
<dd>Poste : Réceptionniste(Stage pratique en tant que réceptionniste)</dd>
<dt>09/2015 à 11/2015 → Hotel - (4 étoiles) - Roissy - 95700</dt>
<dd>Poste : Réceptionniste(Stage d'immersion et découverte du métier)</dd>
<dt>02/2005 à 01/2013 (8 ans) → Crevette's Aquaculture</dt>
<dd>Poste : Technicien de laboratoire</dd>
<dt>01/1991 à 01/2005 (14 ans) → Auto-entrepreneur</dt>
<dd> Poste: Vendeur /Représentant commercial dans l'industrie de la mode prêt-à-porter</dd>
</dl>
</div>
</section></div>
<section div id="conteneur_3">
<div class="formation">
<h2>FORMATION</h2>
<p>Avril 2016 - →Titre Professionnel de Réceptionniste →Centre de formation professionnelle - Paris</p><br/>
<p>Décembre 1991 →BAC "S" (biologie) → Lycée Voltaire</p>
</div>
</section></div>
<section div id="conteneur_4">
<div class="langues">
<h2>LANGUES</h2>
<ol>
<li><strong>Anglais</strong> → niveau expert ( lire, écrire, parler) - accueil, téléphone, frappe, traduction.</li>
<li><strong>Espagnol</strong> → niveau intermédiaire (lire, écrire, parler) - accueil, téléphone, frappe.</li>
<li><strong>Français</strong> → niveau expert (lire, écrire, parler) - accueil, téléphone, frappe, traduction.</li>
<li><strong>Portugais</strong> → langue maternelle</li>
</ol>
</div>
</section></div>
<section div id="conteneur_5>
<div class="logiciels">
<h2>LOGICIELS</h2>
<p>Logiciels de gestion hôteliere(PMS):</p>
<ul><li><strong>Fols</strong> → niveau intermédiaire</li>
<li><strong>Opera Fidelio</strong> → niveau intermédiaire</li>
<li><strong>Jazotel</strong> → niveau intermédiaire</li>
</ul>
<strong>Word, Excel, Power Point et l'Internet →niveau expert</strong>
</section></div>
</div>
<footer div id="conteneur_5">
<div class="interet">
<h2>CENTRES D'INTÉRÊT</h2>
<p>La pratique de sport, la littérature, la culture française.</p>
</footer></div>
</div>
</body>
</html>
Mais la; le W3C est devenu fou, je reçois plusieurs messages d'erreur:
Error: Attribute div not allowed on element section at this point.
En première remarque, la syntaxe <section div etc> est incorrecte, c'est
soit section
soit div
mais pas un mélange des deux !
Le choix de <section> est plutôt bon, mais il faut savoir que le w3c validator va tousser si la section ne contient pas de balise titre (du genre h1, h2,... h6) ; je pense qu'à ce stade, ça ne doit pas te traumatiser, ça marche quand même et c'est plus clair que tout un fatras de <div> avec des class ou des id
dans conteneur, laisse ton liseré comme il est et crée une boite (si tu veux : un div avec une classe particulière) qui va regrouper tout le reste des éléments de ta page (header, experience, etc jusqu'à interet
tu te trouves donc avec 2 ensembles juxtaposés dans "conteneur" :
lisere
et ta nouvelle boîte "fourre-tout"
et ils s'affichent côte à côte, par défaut ; pour le moment, ton site ne change pas d'apparence.
Maintenant, il te reste à organiser la nouvelle boîte "fourre-tout" dans laquelle tu voudrais avoir
le header et, juste en dessous les expérience/formation/langue côte à côte de gauche à droite "
J'ai suivi vos instructions, et voici le resultat:
Ce que je ne comprends vraiment pas, c'est pourquoi je dois creer des nouvelles box, comme vous m'avez dit:
"Normalement, tu devrais ressentir la nécessité de placer toutes ces expériences dans une nouvelle boîte pour pouvoir les gérer différemment du header."
Mais j'ai deja crée des <div>( "experience"; "formation"; "langues"; etc), qui, pour moi, chacun c'est une boite independent, dans le conteneur, donc, normalement, je devrais pouvoir la deplacer sans probleme. Est-ce que je me trompe ? Come dit "lamecralate": " tu peux tout à fait rajouter des blocs conteneurs, tu sais. Par exemple, autour des trois blocs "expérience", "compétences", "formation", tu peux mettre une div. Et ainsi la cibler." . Mais cela s'est deja fait, non ?
Comme vous pouvez voir, j'ai allegé ma page en me limitant uniquement à ce que demande l'exercice.
Un autre gros probleme, aprés toute la journée manipulant mon CSS, c'est de ne reussir à placer le header en haut de la page.
Pourriez-vous peut-etre m'aider, si vous voyez des problemes dans le code, ou son organisation, svp, ditez-le moi.
- Edité par @Arobase 20 janvier 2018 à 17:56:55
Merci beaucoup !
Utilisation FLEXBOX
× 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.
Pas d'aide concernant le code par MP, le forum est là pour ça :)