Je suis à l’exercice ou je dois inséré un liseré sur la gauche de la page, le soucis c'est pas que j'y arrive pas, parce qu'avec un aside et position je pourrais le faire, mais je préférais l'insérer avec la balise float.. Si je préfère cette balise que position par exemple, c'est que, quand je réduis la page, les textes/photos etc n'iront pas derrière le liseré alors qu'avec un position c’est le cas..
J'ai regardé je ne sais pas combien de poste à ce sujet..
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mon CV</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="bloc_page">
<header>
<div class="photo">
<a href="images/profil.jpg"><img src="images/profil_mini.jpg" class="imageflottante" alt="ma photo" title="Clique ici" /></a>
<h1>Thomas Bourdin</h1>
<p>Comme le dit souvent ma copine cocaïnomane : tire un trait, tu y verras plus clair.</p>
</div>
</header>
<div class="liseret">
</div>
<section>
<div class="conteneur">
<article>
<h3 class="exp">Experiences professionnelles</h3>
<ul>
<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
</ul>
</article>
<article>
<h3 class="qua">Qualifications et competences</h3>
<ul>
<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
<li>Aptitude a remplir les ordonnances des patients.</li>
</ul>
</article>
<article>
<h3 class="for">Formation et diplome</h3>
<ul>
<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
</ul>
</article>
</div>
</div>
</section>
</body>
</html>
J'ai reçu 2 sales notes car mes correcteurs ont utilisé Chrome au lieu de Mozilla (j'utilise Mozilla).
Salut,
Les notes ce n’est pas grave, après mathieu le dit bien dans le cours de vérifier avec les navigateurs principaux ^^Mais pourquoi tu me dis ça ? Flexbox n'a rien avoir avec le navigateur
Le premier conseil que je puisse te donner, c'est de faire un petit croquis de tes différents conteneurs, comme des "boîtes" contenant d'autres boîtes.
- Une petite boite à gauche (le liseré), que je te recommande de fixer avec un min-width fixe (en pixels) et un width relatif. quand tu resize, il se réduit mais reste visible car possédant une épaisseur mini.
- une grande boîte contenant deux plus petites: le header, et le contenu proprement dit (expériences, formation, compétences).
---------- le contenu contient les 3 petites boîtes que je cite à la ligne au dessus.
C'est le choix que j'ai retenu. Le CSS fait appel à Flexbox, qui est vraiment une révolution (et dont traite le cours) !
<section>
<div class="conteneur">
<article>
<h3 class="exp">Experiences professionnelles</h3>
<ul>
<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
</ul>
</article>
<article>
<h3 class="qua">Qualifications et competences</h3>
<ul>
<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
<li>Aptitude a remplir les ordonnances des patients.</li>
</ul>
</article>
<article>
<h3 class="for">Formation et diplome</h3>
<ul>
<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
</ul>
</article>
</div>
</div>
</section>
</body>
</html>
Au final, la balise section fait la même chose.. elle englobe aussi tout les articles..
FrançoisChesneau a écrit:
Le premier conseil que je puisse te donner, c'est de faire un petit croquis de tes différents conteneurs, comme des "boîtes" contenant d'autres boîtes.
- Une petite boite à gauche (le liseré), que je te recommande de fixer avec un min-width fixe (en pixels) et un width relatif. quand tu resize, il se réduit mais reste visible car possédant une épaisseur mini.
- une grande boîte contenant deux plus petites: le header, et le contenu proprement dit (expériences, formation, compétences).
---------- le contenu contient les 3 petites boîtes que je cite à la ligne au dessus.
C'est le choix que j'ai retenu. Le CSS fait appel à Flexbox, qui est vraiment une révolution (et dont traite le cours) !
Hey
Je mettais fais un shéma, mais je n'arrive pas à le reproduire mdr Enfin, une grande partit si.
Quand tu me dis min-widht fixe, donc il faut utilisé la position: fixed, mais on peut le faire sans ? Juste avec flexbox.. et je préférais si c'est possible
"Si je préfère cette balise que position par exemple, c'est que, quand je réduis la page, les textes/photos etc n'iront pas derrière le liseré alors qu'avec un position c’est le cas.."
Alors moi je dis : et le" z-index" CSS ça sert à quoi ?
J'échange des connaissances. Si je les donnais, je n'en aurais plus
"Si je préfère cette balise que position par exemple, c'est que, quand je réduis la page, les textes/photos etc n'iront pas derrière le liseré alors qu'avec un position c’est le cas.."
Alors moi je dis : et le" z-index" CSS ça sert à quoi ?
Hey
Le " Z index " ? Ou ça ? Je comprends pas
J'ai pas encore vu cette balise ( si sans est une ) dans les cours
- Edité par TylerTyler 16 novembre 2017 à 17:31:47
ça fonctionne Z-index, sauf que le texte va derrière le liseré si on réduit la page, et mon but est d'éviter ça. Flexbox serait plus adapté.. mais je bloque dessus.
L'exercice en lui même, je l'ai validé, mais j'ai utilisé la balise aside, et c’est le même problème que position, le texte va derrière et c'est pas mon but.
Merci
- Edité par TylerTyler 17 novembre 2017 à 11:37:51
Ma maquette ( pris sur ce site ) mais c'est ce que j'avais en tête exactement :
Par contre sur ce dessin, c'est de prendre le header avec la section ? Du moins d'englobé le tout ? Je ne trouve pas très pratique, mais sinon tout le reste c'est comme ça que je veux faire
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Mon CV</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylebis.css">
</head>
<body>
<div id="bloc_page">
<div class="liseret"></div>
<header>
<div class="photo">
<a href="images/profil.jpg"><img src="images/profil_mini.jpg" class="imageflottante" alt="ma photo" title="Clique ici" /></a>
<h1>Thomas Bourdin</h1>
<p>Comme le dit souvent ma copine cocaïnomane : tire un trait, tu y verras plus clair.</p>
</div>
</header>
<section>
<div class="conteneur">
<article>
<h3 class="exp">Experiences professionnelles</h3>
<ul>
<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
</ul>
</article>
<article>
<h3 class="qua">Qualifications et competences</h3>
<ul>
<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
<li>Aptitude a remplir les ordonnances des patients.</li>
</ul>
</article>
<article>
<h3 class="for">Formation et diplome</h3>
<ul>
<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
</ul>
</article>
</div>
</div>
</section>
</body>
</html>
Avec bootstrap c'est quand même plus facile. Surtout pour le responsive. Et en plus cela t'allège ton propre css de façon magistrale
Euh, c'est carrément l'inverse. Sauf si tu ne comptes pas faire de CSS ou très peu… Mais Bootstrap n'est vraiment pas optimal pour du design, et beaucoup trop lourd juste pour utiliser la grid. Si c'est juste ça, autant prendre une grid seule.
Bootstrap est bien plus efficient pour de l'interface applicative.
Sinon @TylerTyler, je me répète mais un bon gros border-left sur body fais très bien le taf.
Je me répète là aussi, mais float n'a pas à être utilisé pour ça, ce n'est pas son rôle…
Edit: Une autre version, toujours avec flex, mais sans div vide pour servir de liseret. c'est un peu plus technique (pas beaucoup) : https://jsfiddle.net/vdj7zwvc/1/
J'ai vu en survol ton profil tu m'a l'air calé en dev web et design.
Seulement je persiste qu'avec une bonne sémantique le starter/fw bootstrap reste simble d'emploi dès lors que l'on connait les classes adéquates pour avoir le rendu que l'on souhaite. (Et si c'est pas toujours le cas reste le W3S pour y retrouver de 'info)
Le flex est récent et tout n'est pas inclu demandant à plus forte raison si le browser est ancien.
Aussi puisque tu es un chevronné je te propose le challendge de nous monter la page en flex tel que présenté sur la maquette de tylertyler.
Ainsi tu pourras nous démontrer toute la force qu'offre la techno flex.
(En moins de 2 heures de temps, c'est grosso merdo le temps que j'ai mis à monter son screen)
J'échange des connaissances. Si je les donnais, je n'en aurais plus
Le module flexbox est largement supporté aujourd'hui et très souvent utilisé en production (sauf si, évidemment, on vise un marché très particulier — comme la chine ou l'inde, ou bien l'intranet de la poste). Mais au boulot, je l'utilise sur la plupart des sites clients. Même bootstrap 4 a une grid avec flexbox.
Et la maquette souhaitée est ultra basique, elle ne présente aucune difficulté, surtout avec flexbox.
Par contre, c'est quoi ce "challenge", exactement ? Présenté comme ça, ça fait vraiment concours de b*** pour savoir qui aura le plus raison… C'est pas vraiment comme ça que ça marche. Mais soit, jouons de l'orgueil.
Voici : https://codepen.io/EmmanuelBeziat/pen/QOaExg J'ai chronométré en même temps pour le lol, ça m'a pris 16 minutes 43, en prenant le temps de faire quelques essais cosmétiques. Le tout étant bien sûr tout à fait responsive ; on peut également simplement lui faire prendre toute la largeur de la page, ou changer la largeur qui le délimite. Tout en ayant des colonnes centrales de hauteur égales, ce qui est très pénible à faire sans flexbox. J'ai gagné quoi ?
Non, sérieusement, je maintiens : Bootstrap c'est bien pour de l'interface applicative (back office, administration, etc). Pas pour du design. Leurs déclarations sont trop lourdes, il y a des float partout (moins en v4 heureusement), et des !important partout. C'est une plaie à surcharger pour avoir un design propre.
Quant à flexbox, il ne faut pas avoir peur de l'utiliser. Il est parfaitement exploitable aujourd'hui (sauf les quelques cas précis évoqués plus tôt, mais ça nécessite de viser un segment professionnel particulier, ce qui n'est absolument pas le cas de la très grande majorité des sites), surtout avec un workflow front (task runner ou builder) qui utilisera autoprefixer.
- Edité par EmmanuelBeziat 18 novembre 2017 à 13:15:08
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
<!DOCTYPE html>
<html>
<head>
<title>Mon CV</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylebis.css">
</head>
<body>
<div id="bloc_page">
<div class="liseret"></div>
<header class="header">
<div class="profil">
<a href="images/profil.jpg"><img src="images/profil_mini.jpg" alt="ma photo" title="Clique ici" /></a>
</div>
<div class="titre">
<h1>Thomas Bourdin</h1>
<p>Comme le dit souvent ma copine cocaïnomane : tire un trait, tu y verras plus clair.</p>
</div>
</header>
<section>
<article>
<h3>Experiences professionnelles</h3>
<ul>
<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
</ul>
</article>
<article>
<h3>Qualifications et competences</h3>
<ul>
<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
<li>Aptitude a remplir les ordonnances des patients.</li>
</ul>
</article>
<article>
<h3>Formation et diplome</h3>
<ul>
<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
</ul>
</article>
</div>
</section>
</body>
</html>
utiliser une balise spécifique, même avec un nom, ne dispense pas de la cibler avec une classe. Tu n'auras peut-être pas toujours qu'une seule balise header dans ta page. Cibler un élément est trop générique, cibler une classe est beaucoup plus précis, tout en étant réutilisable, et suffisamment léger pour être surchargé.
J'ai mis un lien parce que je voulais que l'ensemble du titre soit cliquable, comme c'est usuellement le cas sur un site
La balise main a pour rôle de définir le contenu du document.
J'ai mis des classes sections pour les mêmes raisons que précédemment. Et j'ai bien utilisé des balises section et non des balises article, parce que c'est celles qui correspondent à ce contenu. Une balise article représente un contenu qui ne nécessite pas de contexte précis (par exemple, un article de blog peut être repris tel quel dans un magazine, un autre site ou n'importe quoi sans que la signification ou le sens n'en soit affecté. Or, tes compétences, ton expérience pro ou autre n'ont aucun sens en-dehors de ton CV. C'est là que section intervient : découper la page en plusieurs parties qui gardent un sens dans leur contexte.
Pour les éléments que tu ne connais pas, adopte le bon réflexe : fais une recherche Il y a des sites qui te serviront de référence, comme https://developer.mozilla.org/fr/
En vrac, calc() sert à effectuer une opération, rem est une unité relative à la font-size définie sur body (si on défini 16px sur body, alors 1rem = 16px, 2rem = 32px, etc.), ::before et ::after ajoutent un pseudo-élément avant ou après la balise concernée, et box-sizing permet de gérer le comportement des éléments par rapport à leurs marges.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Rien ne t'empêche de poser des questions après avoir fait une petite investigation mais ça te donneras de bonnes habitudes : parcourir les documentations est la fondation de tout métier de l'informatique. Ça t'aidera à progresser, et en plus c'est plus gratifiant pour toi. Et nous, on sera toujours ravi.e.s d'aider quelqu'un à clarifier certains points qui lui échappent.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Le premier conseil que je puisse te donner, c'est de faire un petit croquis de tes différents conteneurs, comme des "boîtes" contenant d'autres boîtes.
- Une petite boite à gauche (le liseré), que je te recommande de fixer avec un min-width fixe (en pixels) et un width relatif. quand tu resize, il se réduit mais reste visible car possédant une épaisseur mini.
- une grande boîte contenant deux plus petites: le header, et le contenu proprement dit (expériences, formation, compétences).
---------- le contenu contient les 3 petites boîtes que je cite à la ligne au dessus.
C'est le choix que j'ai retenu. Le CSS fait appel à Flexbox, qui est vraiment une révolution (et dont traite le cours) !
Justement, j'ai pris le choix de na pas utiliser flexbox (à chaque fois, le résultat est désastreux).
J'avais donc opté pour des sections. Le rendu sur Firefox est correct (voir ci dessous). Par contre, sur Chrome, c'est une catastrophe.
Justement, j'ai pris le choix de na pas utiliser flexbox (à chaque fois, le résultat est désastreux). J'avais donc opté pour des sections.
Euh, ça n'a aucun rapport ? C'est pas "flexbox ou sections". On utilise des sections de façon sémantique dans le html, indépendamment du CSS. Et on utilise flexbox en fonction du rendu qu'on veut obtenir, indépendamment du html.
Ensuite, si le résultat est désastreux, c'est juste parce que tu ne comprends pas bien comment ça marche et/ou ce que tu fais. C'est normal, le CSS prends du temps à être maitrisé ; c'est un métier. Mais n'empêche que c'est comme ça qu'on fait, et utiliser "autre chose" n'a pas vraiment de sens.
Prends le temps d'apprendre flexbox.
Et surtout, ça n'a rien à voir avec le navigateur. N'importe quel navigateur à jour, que ce soit Chrome, Firefox, Opera, Edge, Maxthon, Safari ou autre doit afficher le même rendu. Si ton site n'a pas le même rendu de l'un à l'autre, c'est que tu as mal codé.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Justement, j'ai pris le choix de na pas utiliser flexbox (à chaque fois, le résultat est désastreux). J'avais donc opté pour des sections.
Euh, ça n'a aucun rapport ? C'est pas "flexbox ou sections". On utilise des sections de façon sémantique dans le html, indépendamment du CSS. Et on utilise flexbox en fonction du rendu qu'on veut obtenir, indépendamment du html.
Ensuite, si le résultat est désastreux, c'est juste parce que tu ne comprends pas bien comment ça marche et/ou ce que tu fais. C'est normal, le CSS prends du temps à être maitrisé ; c'est un métier. Mais n'empêche que c'est comme ça qu'on fait, et utiliser "autre chose" n'a pas vraiment de sens.
Prends le temps d'apprendre flexbox.
Et surtout, ça n'a rien à voir avec le navigateur. N'importe quel navigateur à jour, que ce soit Chrome, Firefox, Opera, Edge, Maxthon, Safari ou autre doit afficher le même rendu. Si ton site n'a pas le même rendu de l'un à l'autre, c'est que tu as mal codé.
Effectivement, je m'étais planté dans l'utilisation de flexbox et de mes sections dans le conteneur 2. Maintenant, ça devrait marcher.
Merci !
exercice 3 : liseré
× 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.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !