@ChristianSaez bonjour, on dirais que la css n'est pas liée, est ce bien le cas? si vous appliquer un couleur de fond au body, cette couleur est-elle bien prise en compte?
Et un petit mot par rapport à ce que je vois sur votre image: pas d'espace dans les noms de fichier (idem pour les noms de répertoire)
Pour les noms de class (vous apprendrez par la suite comment appeler vos class) si vous avez plusieurs mots qui constitue le nom d'une class (idem pour le nom des variables etc...) je vous recommande la convention d'écriture en camelCase, ce qui veux dire la première lettre de chaque mot en majuscule sauf la première du mot qui est en minuscule. exemple: .imageFlottante {} (ceci dit cela ne résout pas le problème)
édit votre document html ne contient qu'un seul ligne, le document minimum n'est pas respecter.
vous devriez avoir ce code au minimum
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> titre obligatoire</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- ici le contenu de la page -->
</body>
</html>
@WatsonMichel bonjour, pas besoin d'indiquer les unités pour les attributs width et height de la balise img. Le navigateur sait que c'est des pixels (et le validateur vous donneras une erreur ou un avertissement )
Bonsoir, vous avez raison, la couleur ne veut pas s'appliquer, comment faire du coup ?
Cordialement.
edit: J'ai bien remis la page html comme convenu.
Quelques détails:
Le dossier se nomme testflottante. Dans ce dossier il y a l'image en GIF qui se nomme diego.gif, la page HTML et la page CSS
HTML se nomme flottante.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p><img src="diego.gif" class="imageflottante" alt="marklanders" /> Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.</p>
</body>
</html>
Le CSS se nomme style.css
.imageflottante
{
float: left;
}
p
{
color: red;
}
J'ai un problème avec la bordure de ma barre de recherche qui se met moitié en foncé et je n'arrive pas à l'enlever même en mettant "border-color: black;" mais rien ne fait elle devient juste plus foncé mais reste déséquilibrée en couleur comment faire svp
Quelqu'un pourrait me recopier l'intitulé de l'activité 4 (celle sur le responsive design) ?
Car je viens de me prendre deux 0/4 (et un 4/4) par des personnes qui prétendent que la page doit être responsive à la taille de la fenêtre alors que je suis persuadé que l'exercice demandé est d'avoir une page responsive à la résolution de l'écran pour avoir une version mobile alors je souhaite savoir si j'ai une note pourrie à cause de deux personnes qui n'ont rien compris ou si c'est moi qui ai fait le boulet.
Hors, l'exercice étant terminé chez moi, je n'ai plus accès à l'intitulé.
Pour cet exercice, vous allez devoir adapter le CV que vous avez fait jusqu'ici pour qu'il s'affiche verticalement (et non horizontalement) sur les petites résolutions.
Le schéma ci-dessous décrit comment le site doit s'afficher. A gauche, la version "normale" écran large (disons 1024 pixels de large au moins) et à droite la version réduite, plus adaptée à une expérience mobile :
J'avais mal compris votre réponse, car vous me dites que j'ai fait une erreur puis me donnez raison (vous avez due mal me comprendre également) du coup j'argumente en ma faveur ci-dessous et je vais garder l'argumentation pour les autres personnes qui auraient un doute.
En fait, vous dites la même chose que moi mais différemment, la résolution de l'écran (en largeur) c'est le device-width.
Et l'énoncé demande bien de se baser sur la résolution d'écran comme mis en évidence en rouge ci-dessous :
Pour cet exercice, vous allez devoir adapter le CV que vous avez fait jusqu'ici pour qu'il s'affiche verticalement (et non horizontalement) sur les petites résolutions.
Le schéma ci-dessous décrit comment le site doit s'afficher. A gauche, la version "normale" écran large (disons 1024 pixels de large au moins) et à droite la version réduite, plus adaptée à une expérience mobile :
Faire disparaître le liseré dans la version mobile
Afficher verticalement les sections expérience, compétences et formation au lieu de les afficher côte à côte horizontalement.
Par ailleurs, Mathieu NEBRA dans son cours indique que max-width n'est pas très adapté pour cibler des mobiles à cause des résolutions des viewport et qu'il faut utiliser max-device-width.
De plus, il reprend dans le résumé :
On peut cibler les smartphones grâce à une règle basée sur le nombre réel de pixels affichés à l'écran : max-device-width.
Or, c'est précisément ce que j'ai fait avec @media all and (max-device-width: 1024px) et ma page fonctionne très bien soit en modifiant le nombre de pixels de la media query soit en modifiant la résolution de l'écran mais ne s'adapte pas à un changement de taille de fenêtre car ce n'est pas demandé dans l'énoncé.
C'est donc bien les 2 correcteurs qui m'ont mis 0 en s'attendant à ce que ma mise en page s'adapte à la taille du navigateur qui se sont plantés !
- Edité par DheryoLeblanc 8 novembre 2017 à 8:16:30
Mais est-ce qu'il y a que moi que ça dérange le fait que dans le chapitre 3 on nous vante l'utilisation de Flexbox mais que dans l'exercice sur le CV, la correction est faite avec 'display' ?
Quelqu'un à t-il réussi à utiliser Flexbox pour faire cet exercice ?
Effectivement, elle mériterai peut-être (à mon humble avis totalement subjectif) une mise à jour pour mieux s'accorder avec html5.
Il serait peut-être même intéressant d'avoir les deux versions afin que les plus curieux puissent comparer le fonctionnement des deux codes.
Pour ma part, j'ai réalisé l'exercice uniquement avec Flexbox et cette méthode me semble carrément plus simple que d'utiliser des float et des inline-block à condition de bien comprendre le principe de "conteneur"/"élément" voire de dessiner un schéma de ses blocs sur papier pour bien visualiser les blocs qui vont être nécessaires et comment ils devront se répartir sur la page.
J'ai fait ce tuto en juin, avec flexbox (c'est vraiment au poil). Par la suite, j'ai programmé plusieurs choses, toujours avec flex. C'est vraiment puissant. Par exemple, avec php, on peut aligner des éléments en nombre variable, en les plaçant dans une boucle.
Je peux essayer d'aider. Il faudrait que tu donnes ton code, pour voir ce qui éventuellement ne va pas. Si j'ai bonne mémoire, le CV est amélioré au fil du tuto ; tu en es à l'activité N° combien ?
S'il n'y a pas de solution, c'est qu'il n'y a pas de problème.
Bonjour, j'en suis à l'activité HTML5 - Semaine 3 et j'ai un soucis au niveau du sujet:
"Si la hauteur du liseré peut être définie en valeur absolue (en pixels), tout le reste de la mise en page doit être en valeur relative (pourcentages). Le contenu doit occuper tout l'espace en largeur, quelle que soit la largeur de la fenêtre."
Quand il parle de "tout le reste de la mise en page", il s'agit encore du liseré ou bien de tout notre code css ?
Je viens de commencer ce MOOC et j'en suis à la 1ère pratique où il faut cliquer sur l'éditeur pour avoir les consignes. J'ai donc cliqué sur 'je code maintenant' et là, rien ne se passe, je n'ai aucune consigne et je ne peux donc rien faire. J'obtiens une page blanche avec juste : </>Console de code
Quelqu'un pourrait-il m'aider svp ? Y a-t-il une manip à faire ou un truc à télécharger ? Un éditeur ?
Bonsoir, je viens de terminer le tout premier cours et le tout premier exercice je dois donc en corriger trois, et c'est la cata ! pour l'un je n'arrive pas à lire les fichiers envoyés, et un autre est de la pub pour un jeu... (le troisième est parfait, ouf !) je suis surtout embêtée pour le premier car ça doit juste être un souci de compression... que fais je ? merci !
Dans les corrections de l'exercice 2 du cours "apprenez-a-creer-votre-site-web-avec-html5-et-css3" j'ai eu un problème avec le téléchargement 12cd0ef211918153cfc7ccc6e4cec6690adb090b.zip :
visiblement, l'envoi concernait l'exercice 1 (CV en html, sans css), ce qui fait que le barème de l'exercice 2 (CV, html+css) m'a obligé à mettre 0 point ... c'est probablement injuste car il doit s'agir d'une erreur d'envoi de fichier zip.
On a vu au cours qu'il est possible d'indiquer la taille d'un texte en em
Si vous écrivez 1em, le texte a une taille normale.
Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em.
Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em.
Ma question quelle est la taille par défaut de em , et est ce qu'elle diffère d'un navigateur à un autre ?
Watson
S'il n'y a pas de solution, c'est qu'il n'y a pas de problème.
Compos sui.
Compos sui.
Compos sui.
Compos sui.