Partage

Questions MOOC

30 octobre 2017 à 20:06:45

Hello je suis actuellement le cours sur html5 et css3. J'en suis au niveau des images flottantes et j'ai un petit soucis.

image sur ce lien >https://image.noelshack.com/fichiers/2017/44/1/1509389863-cfdfvxfvxvfvxvxcvx.png

Comme vous pouvez le voir mon texte ne borde pas l'image comme sur le sujet, alors que j'ai copié collé le code HTML et CSS de base.

mon code html et css >https://image.noelshack.com/fichiers/2017/44/1/1509390318-htmlcss.png

Est-ce normal ?

Cordialement.

Edit: Désolé je n'arrive pas à faire de lien pour mes captures :o

-
Edité par ChristianSaez 30 octobre 2017 à 20:10:11

30 octobre 2017 à 21:42:10

Salut! essayez de redimensionner votre image en utilisant  <img src="VOTRE IMAGE" width="50px" height="50px"/>
Watson
30 octobre 2017 à 21:55:15

Hello merci de ta réponse mais c'est toujours pareil :/
Staff 30 octobre 2017 à 22:04:58

@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 )

-
Edité par AbcAbc6 30 octobre 2017 à 22:10:48

Se démerder tout seul (par grafikart)
30 octobre 2017 à 22:25:10

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;
}

Cordialement

-
Edité par ChristianSaez 30 octobre 2017 à 22:47:30

Staff 30 octobre 2017 à 22:46:58

Christian pourriez vous poster votre code complet  html et css en utilisant le bouton code </> au dessus de la zone ou vous écrivez votre message.

Vérifier le chemin de la css.

Se démerder tout seul (par grafikart)
30 octobre 2017 à 23:02:58

Ok c'est bon j'ai compris. 

Le soucis est là > 

<link rel="stylesheet" href="css/style.css" />

J'ai enlevé le css juste après href ="et maintenant ça marche.

Merci beaucoup pour vos éclairements ;)

5 novembre 2017 à 1:03:37 - Message modéré pour le motif suivant : Message complètement hors sujet


7 novembre 2017 à 22:31:32

Bonjour à tous,

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

7 novembre 2017 à 23:07:21

Bonjour,

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é.

En vous remerciant.

Staff 8 novembre 2017 à 5:39:16

@dheryoleblanc Bonjour, je pense que vous avez fait l'erreur, on ne se base bas sur la résolution de l'écran mais du device-width. https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Voici l'énoncé de la semaine 4:

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 :

http://sdz-upload.s3.amazonaws.com/prod/upload/apercu9.png

Vous devrez :

  • 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.


Se démerder tout seul (par grafikart)
8 novembre 2017 à 8:15:11

Bonjour AbcAbc6,

Je vous remercie pour votre réponse matinale.

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 :

AbcAbc6 a écrit:

@dheryoleblanc Bonjour, je pense que vous avez fait l'erreur, on ne se base bas sur la résolution de l'écran mais du device-width. https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Voici l'énoncé de la semaine 4:

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 :

http://sdz-upload.s3.amazonaws.com/prod/upload/apercu9.png

Vous devrez :

  • 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

15 novembre 2017 à 9:24:35

Bonjour à tous,

Super cours pour apprendre, merci pour le boulot.

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 ? 

Merci à vous !

15 novembre 2017 à 10:10:15

Salut NicolasGéniteau2,

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.

15 novembre 2017 à 16:48:48

Bonjour Nicolas

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.
18 novembre 2017 à 17:35:09

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 ?

Merci, cordialement.

18 novembre 2017 à 21:25:36

tout le CSS doit être en valeurs relative, seule la hauteur du liseré peut être (éventuellement) en valeur fixe.
Compos sui.
20 novembre 2017 à 17:25:31

410

-
Edité par Polluks 20 novembre 2017 à 17:26:32

Questions MOOC

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown