J'essaye depuis 2 jous de mettre en place mon code HTML et CSS de façon propre et correcte afin d'utiliser la proprieté Flexbox, tel quel nous a été expliqué dans l'exemple:
J'ai don crée un conteneur(div id="conteneur), qui englobe toute ma page, puis j'ai divisé le reste en "class"(div class) afin de les séparer individuellement, chacun dans une boite. Pour les tester(voir si j'ai réussi à placer chacun des éléments "class" dans une boite à part), j'ai mis des bordures doubles.
J'ai reussi à creer une boite independent comme je veux, c'est le div nommé "header", qui englobe tout le contenu du "header", du début à la fin.
Mais pour les autres elements "class" de ma page, la bordure encercle uniquement le <h2>qui est dedans, comme pour le "class" nommé: "expérience". Uniquement le mot "expérience" apparaît entouré par la bordure.
C'est le meme probleme pour les "class" qui suivent.
Pourquoi?
Veuillez noter que je n'ai pas utilisé des balises classiques (<header>, <section>, <nav>, etc) justement pour pouvoir appliquer la Flexbox, comme dans l'exemple du cours.(re-voir en haut).
Je comprends le principe d'un conteneur avec des elements(boites) dedans, mais je ne comprends pas pourquoi je n'arrive pas à isoler les boites individuellement, une par une.
Voici tout le code HTML de ma page:
<!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"element">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" 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><span class="form">Avril 2016 - →Titre Professionnel de Réceptionniste →Centre de formation professionnelle - Paris<br/>Décembre 1991 →BAC "S" (biologie) → Lycée Voltaire</span></p>
</div>
<div class="langues">
<h2>LANGUES</h2>
<ol>
<li><strong><span class="speak">Anglais</span></strong> → niveau expert ( lire, écrire, parler) - accueil, téléphone, frappe, traduction.</li>
<li><strong><span class="speak">Espagnol</span></strong> → niveau intermédiaire (lire, écrire, parler) - accueil, téléphone, frappe.</li>
<li><strong><span class="speak">Français</span></strong> → niveau expert (lire, écrire, parler) - accueil, téléphone, frappe, traduction.</li>
<li><strong><span class="speak">Portugais</span></strong> → langue maternelle</li>
</ol>
</div>
<div class="logiciels">
<h2>LOGICIELS</h2>
<p>Logiciels de gestion hôteliere(PMS):</p>
<ul><li><span class="pms">Fols</span> → niveau intermédiaire</li>
<li><span class="pms">Opera Fidelio</span> → niveau intermédiaire</li>
<li><span class="pms">Jazotel</span> → 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>
Et le code 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;
flex-wrap: wrap;
}
.element:
{
position:absolute;
left:100%;
top:100%;
width:200px;
margin-left:100px; /* Cette valeur doit être la moitié négative de la valeur du width */
margin-top:100px; /* Cette valeur doit être la moitié négative de la valeur du height */
background-color: black;
border: 10px black double;
}
.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 */
text-align: center;
padding: 12px;
border: 10px black double;
}
img
{
position: absolute;
right: 20px;
top: 20px;
}
.experience:
{
border: 10px black double;
}
h2
{
text-align: center;
text-decoration: underline;
border: 10px black double;
}
.hotel
{
color: black;
font-weight: bolder;
border: 10px black double;
}
.especialiste
{
color: black;
font-weight: bolder;
font-size: 32px;
border: 10px black double;
}
.formation:
{
color: black;
font-weight: bolder;
border: 10px black double;
}
.form
{
border: 10px black double;
}
.langues:
{
color: black
border: 10px black double;
}
.speak, .pms
{
color: black;
font-weight: bolder;
}
.logiciel:
{
border: 10px black double;
}
.interets
{
color: black;
border: 10px black double;
}
Et finalement , le résultat dans le browser(premiere moitié):
Et la seconde moitié de ma page:
Dans l'attente de vos réponses salvatrices, je vous remercie de votre precieuse aide!
enlève tous les position: absolute. C'est ça qui te fiche le désordre ici. C'est une propriété très puissante mais difficile à maîtriser. Laisse-la de côté pour l'instant, tu y reviendras.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Je te conseille également de vérifier tes codes sur les validateurs du W3C : https://validator.w3.org/#validate_by_input https://jigsaw.w3.org/css-validator/#validate_by_input pour le HTML et pour le CSS.
Cela t'aidera à éviter les erreurs d'inattention du style :
Il ne faut pas lâcher ... En réalité, tu peux corriger les premiers problèmes très vite, ce qui te permettra de te concentrer sur la suite :
Le gros défaut, dans ce premier jet, c'est le manque de rigueur (ou inattention)
la syntaxe du css n'est pas bien respectée, avec des noms de classe parfois suivis de ":" avant le début de bloc "{" - cela a déjà été mentionné par un intervenant précédent
il n'y a pas de cohérence entre les noms de classe (ou d'id) dans le html et dans le css ; par exemple ".interets" dans le css et "class=interet" (au singulier) dans le html ; cela arrive plusieurs fois ... et donc, ça ne peut pas marcher
une fois bien passés en revue ces deux points et après avoir aussi utilisé le validator w3c, tu devrais pouvoir redémarrer plus sereinement.
(pour bien voir tes blocs sans surcharger l'écran, tu devrais utiliser "border: 2px red solid;" au lieu de la double bordure noire épaisse ...)
Tout d'abord, permettez moi de vous montrer ce que nous est demandé dans l'exercice:
Merci mi
Lamecarlate : j'ai enlevé la position absolut de mon img , et maintenant je me retrouve avec le problème de la position de la photo du CV, qui doit être placé en haut, à droite. J'avais passé pas mal de temps de temps la dessus, j'avais même publié un sujet dans le forum, maintenant, comment faire pour placer la photo comme il faut ?
Je tourne en boucles ....
Cependant, maintenant le div class="experience" apparait entouré, il est devenu un bloc à part, comme il faut...
Mewen_bzh: j'ai enlevé complètement la balise "élément", j'ai verifié sur W3C, et je n'ai plus d'erreurs dans le code. Mais je dois placer un rectangle noir, vertical qui va du haut jusqu'au bas de page entière, à gauche, comme il nous est demandé dans l'exercice. Pourquoi je ne peux pas créer une balise : <div class"element">lisere</div> ? C'est parce qu'il est placé juste après le conteneur? Je ne comprends pas, en plus comment faire pour créer le lisere demandé?
Par rapport à la creation des blocs separés, j'ai enlevé tous les <span> que j'avais placé à l'interieur de chaque div ( blocs) afin de voir si le probleme vient de la, mais non, uniquement le div class "experience" est entouré.., le reste de la page n'a pas changé.
Pourquoi les autres "class" ne sont pas entourés ?
Je reposte mes codes et leur rendu dans le browser:
<!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="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" 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>
Le 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;
flex-wrap: wrap;
}
.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 */
text-align: center;
padding: 12px;
border: 10px black double;
}
img
{
right: 20px;
top: 20px;
}
.experience
{
border: 10px black double;
}
h2
{
text-align: center;
text-decoration: underline;
border: 10px black double;
}
.hotel
{
color: black;
font-weight: bolder;
border: 10px black double;
}
.formation:
{
color: black;
font-weight: bolder;
border: 10px black double;
}
.langues:
{
color: black
border: 10px black double;
}
.logiciel:
{
border: 10px black double;
}
.interets
{
color: black;
border: 10px black double;
}
> Mewen_bzh: j'ai enlevé complètement la balise "élément", j'ai verifié sur W3C, et je n'ai plus d'erreurs dans le code. Mais je dois placer un rectangle noir, vertical qui va du haut jusqu'au bas de page entière, à gauche, comme il nous est demandé dans l'exercice. Pourquoi je ne peux pas créer une balise : <div class"element">lisere</div> ? C'est parce qu'il est placé juste après le conteneur?
Non. C'est parce que tu as oublié le signe "=" entre l'attribut class et le nom de cette dernière.
honnêtement, je pourrais t'aider sans problème surtout que j'ai encore les fichiers de cette exercice sur mon ordi mais je ne pense pas que se serai te rendre service.
Je te donne à la place un bon conseil : relie bien le cours, teste les exemples en créant des pages de test, manipule les codes pour voir et comprendre comment cela réagit et tu t'apercevra vite que c'est très simple.
Bon, au début, c'est un peu galère mais si tu ne fais pas ça, tu ne progressera pas et le but de cette exercice est de vérifier que tu as bien tout compris, donc courage et patience ...
Mewen_bzh: merci , maintenant j'ai vu finalement ou est le problème : )
Lamecarlate: je vais essayer de suivre ton conseil, Question : "img" est consideré une element HTML "pur" ?
Dans ton nouveau code tu as mis border sur les <h2> directement, c'est voulu ?
Oui, je veux creer des blocs qui commencent par les titres(h2) et qui continuent jusqu'à la fin du bloc en question... pour la premier balise (h1 ) qui se trouve à l'interieur de class: header, cela n'a pas posé des problemes... croyez-vous que c'est cela la cause des problemes liés à la creation des blocs?
j'ai vérifié le code sur w3c est apparemment il n'y a plus de 'erreurs d’inattention...
florianboy01: si qqn pourrait m'expliquer ou est l'erreur ça m'aiderait enormement ... ça fait 2 jours que je me bats ... c'est la le limite (pour moi) de la formation en auto-didacte, sans accompagnement, ni tuteur. ... on perd des jours parfois pour trouver une réponse aux questions... c'est très frustrant avec des pertes enormes de temps ...
Mais pourquoi les autres balises ne sont pas entourés par le border ??? je ne vois pas ou est l'erreur...
If the document is an iframesrcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element.
Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.
Et sinon : oui, img, header, p, tous les éléments "nommés" de HTML, c'est ça que j'ai appelé "pur". C'est un abus de langage, pardon. C'était juste pour dire que dans ton site, tu vas en avoir plusieurs, des images, ou des paragraphes : ne les style pas si… violemment d'un coup.
Et pour le border des h2, je n'ai pas compris
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Comme je l'ai dit plus haut, je vois toujours dans le css ".langues:" ".logiciel:" ".formation:" ".interets":
Connaissez-vous l'utilisation des "class" et des "ID" dans HTML / CSS ? si vous voyez dans le css .langues, etc, c'est parce que sont des element "class" qui ont été crées justement pour pouvoir faire le lay-out dans CSS.
On va faire plus simple pour t'expliquer les propos de michelbuono :
.logiciel:
{
border: 10px black double;
}
Ce code n'est pas valide. à cause du ":" en trop. La bonne façon d'écrire est :
.logiciel
{
border: 10px black double;
}
Ou alors tu as oublié une partie après le ":", par exemple :
.logiciel:hover
{
border: 10px black double;
}
Autre problème, tu définis la classe "interet" dans ton HTML mais tu cibles la classe "interets" dans ton CSS => les deux classes n'ont pas le même nom => la propriété ne s'applique pas.
J'ai été en train de verifier CSS dans W3C dans la meme page que j'ai verifié le HTML !!
Merci , merci à tous, michel excuse-moi !
Lamecarlate : merci pour le bon lien W3C ! comment attribuer une "class" à un element "img", qui possede deja le HREF , le SRC et le ALT ? ou, et comment placer un "class" la dedans, s'il vous plait? Maintenant je crois avoir compris la definition des "purs" : ) // pour les H2, je voulais les centrer eu milieu, surlignés et aussi qu'ils fassent part , chacun, de son element respective , comme pour le ".header", ".experience", chacun de ses elements a un titre (H2) et je veux qu'ils fassent partie de chaque boite respective.
Mewen_bzh : si tu etais à mes cotes je te donnerais un bisou ! merci !
Et finalement, maintenant, avec les corrections de mes bêtises dans le code, j'ai réussi à créer mes blocs( après pour les faire bouger comme je veux , et avoir les dimensions qu'il faut, c'est une autre histoire, mais grâce à vous tous, les blocs sont crées:
florianboy01: si qqn pourrait m'expliquer ou est l'erreur ça m'aiderait enormement ... ça fait 2 jours que je me bats ... c'est la le limite (pour moi) de la formation en auto-didacte, sans accompagnement, ni tuteur. ... on perd des jours parfois pour trouver une réponse aux questions... c'est très usant, frustant, decevant avec des pertes enormes de temps ... je parle courament 4 langues , je suis technicien en biologie moleculaire et je n'ai jamais galeré comme ça dans toute ma vie pour apprendre quelque chose .. et j'ai 44 ans ! le temps est un luxe dont je ne dispose pas ! pas comme ça ....
Mais pourquoi les autres balises ne sont pas entourés par le border ??? je ne vois pas ou est l'erreur...
merci beaucoup à tous
Je suis plus âgé que toi et je sais que trop bien qu'à nos ages, on enregistre moins vite qu'à 20 ans. Perdre un ou deux jours à bidouiller les codes donner dans le cours nous fait gagner beaucoup de temps au final mais ce n'est qu'un conseil, libre à toi ... Et commence par corriger ce que t'a dit MichelBuono, on verra ensuite ce que ça donne.
> comment attribuer une "class" à un element "img", qui possede deja le HREF , le SRC et le ALT ? ou, et comment placer un "class" la dedans, s'il vous plait?
Exactement comme avec tous les autres éléments
Pas d'aide concernant le code par MP, le forum est là pour ça :)
comment attribuer une "class" à un element "img", qui possede deja le HREF , le SRC et le ALT ? ou, et comment placer un "class" la dedans, s'il vous plait?
comme ça:
<p><a href="image/braga.jpg" ><img src="image/braga_mini.jpg" class="photo" alt="Photo de Braga"></a></p>
j'ai essayé de le mettre un div avant l'ancre <a> et non, puis placer le class juste apres le "img" , non plus, et la j'ai trouvé, il faut le mettre au milieu, sans div, entre le SRC et le ALT . Avec le "float", j'arrive à la placer à droite. Ce n'est pas encore le graal, (je veux qu'elle reste fixe en haut à droite)mais aujourd'hui a été un jours productif , grâce à l'aide de vous tous.
Je recommence la bataille demain matin;
merci à tous infiniment avec tout mon coeur !
Merci beaucoup !
Utilisation flexbox/mise en place des éléments
× 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 :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)