Alors voilà, en fait, je suis coincé, et je viens ici parce que je ne comprends pas ce qui cloche ... c'est surement tout bête, mais je ne le vois pas.
L'intitulé de l'exercice me demande de faire passer mes sections "compétences, expérience et formation" en colonne et de faire disparaître le liseré décoratif pour les petites résolutions d'écrans.
Suite aux précédents exercices, j'arrive avec ce code html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Mon CV en ligne</title>
</head>
<body>
<div class="sidebar">
</div>
<header>
<a href="Mickey.png"><img src="mini_mickey.png" class="portrait" alt="mini_mickey" title="vers agrandissement"></a>
<h1><span class="note">Mickey Mouse</span></h1><br />
<p class="intro">
Comics Walt Disney depuis 1928
</p>
</header>
<div class="conteneur">
<section class="elements">
<h2>Mon expérience</h2><br />
<ul>
<li><strong>De 1928 à 1953 :</strong> C'est de la folie, cela n'arrête pas, toute une série de films et de courts métrages pour amuser petits et grands, et cela dès mes premiers jours. Puis j'ai fait de la B.D, des séries ... Dur dur la vie d'artiste.</li>
<li><strong>De 1983 à nos jours :</strong> Après une pause de quelques années, je me relance dans les films et les séries, même encore actuellement ! C'est que je ne suis plus tout jeune, il faudrait peut-être penser à me laisser prendre ma retraite maintenant ... s'il vous plait ... :-(</li>
<li><strong>Petits plus :</strong> J'ai eu l'occasion de faire des apparitions dans des films, des séries, des jeux-vidéos, il y en a même qui me sont entièrement consacrés, puis il y a les produits dérivés, les mascottes à mon effigie dans mes différents parcs d'attractions ... Nan franchement, je suis une vraie Star !</li>
</ul>
</section>
<section class="elements">
<h2>Mes compétences</h2><br />
<ul>
<li>Donner le sourire</li>
<li>Rester gravé dans les mémoires</li>
<li>Donner le sourire (oui encore, mais c'est important :p)</li>
</ul>
</section>
<section class="elements">
<h2>Ma formation</h2><br />
Et bien franchement, je ne sais pas quoi vous en dire, que voulez-vous, ça doit être inné. C'est comme pour beaucoup de choses, on l'a ou on ne l'a pas.<br />
</section>
</div>
</body>
</html>
Et après avoir fait mes premiers test en responsive, j'obtiens le CSS suivant :
Vous avez tout, si vous comprenez pourquoi quand je le test sous chrome en navigation privée, tout fonctionne, sauf ma partie responsive, je suis ouvert à toutes explications !
En vous souhaitant à tous une bonne soirée, ainsi qu'une belle et heureuse année 2018 !
edit: petite info, j'ai également essayé de faire passer mon @media sur mes ".elements", mais sans succès
- Edité par Loup-ErwanBetard 1 janvier 2018 à 21:10:54
Il te manque un élément important pour la gestion du design responsive. Je t'encourage à relire cette partie du cours. Petit indice : cela se passe à l'intérieur de ta balise <head>...
Je ne vais pas t'en dire plus pour l'instant car je trouve que ton code, même sans être irréprochable, est tout de même d'un bon niveau. Je pense donc que tu es capable de trouver par toi même et que cela sera plus gratifiant pour toi.
bonsoir Lucky13, et merci pour le temps que tu veux bien m'accorder
Alors pour ce qui est de la ligne citée, je vais t'expliquer pourquoi j'ai procédé comme ça. Je ne dis pas que c'est la meilleure solution (loin de là, mes premiers cours de code datant d'à peu près un mois et 1/2), c'est juste que d’après ce que je vois quand le test sur mon navigateur, c'est ce qui me donne, le plus simplement pour moi, le rendu esthétique souhaité.
donc, je me doute que ce qui te "dérange", c'est ma <span> je me trompes ? en fait, si je mets ma 'class' sur mon <h1>, la bordure que j'ajoute sur mon css prends toute la ligne, alors qu'avec mes <span>, la bordure s’arrête à la fin de mon texte. Après il est peut être possible possible de le modifier même en mettant ma 'class' sur mon <h1>, mais au moment ou j'ai écris ces lignes de codes, je n'ai pas du y arriver, et le résultat me plaisant, je n'y ai pas retouché.
Idem pour le <br />, esthétiquement, je voulais un espace assez important entre ma ligne <h1> et ma 'class='intro'', et c'est ce que j'avais trouvé de plus simple à ce moment là. En retirant ce <br />, je trouve l'inter-ligne trop petite.
Bein un <span> est un <div> mais de type inline (comme un lien).
Pas d'excuses , le HTML est le langage de description de ta page, on se fout de penser à l'esthétisme à ce moment la... les moteurs de recherche aussi...
Et donc le côté esthétique : c'est l'affaire du CSS, autre langage à maîtriser pour la mise en place des éléments et magnifier ta présentation.
Ex: tes <br /> seront des marges, tes h1 prendrons la largueur de leurs conteneurs parents, qui eux auront des propriétés (dont le width, padding, margin, etc..)
Et bien du coup je ne comprends plus. Dans le cours justement, il est dit que pour ajouter les media querries, soit je rajoute un css que je link avec le media dans mon html, soit je le mets directement dans mon css avec le @media. faudrait-il faire une modification dans mon html même en utilisant la 2ème méthode ?
edit: je me permet de faire un copier coller de la partie qui nous intéresse sur le responsive design, juste pour que tu vois sur quoi je me suis référé pour faire le code :
"Appliquer une media query
Les media queries sont donc des règles qui indiquent quand on doit appliquer des propriétés CSS. Il y a deux façons de les utiliser :
en chargeant une feuille de style.cssdifférente en fonction de la règle (ex : « Si la résolution est inférieure à 1280px de large, charge le fichierpetite_resolution.css») ;
en écrivant la règle directement dans le fichier.csshabituel (ex : « Si la résolution est inférieure à 1280px de large, charge les propriétés CSS ci-dessous »)."
@Lucky13 : oui je comprends, je modifierai cela avant de rendre l'exercice alors promis mon <br /> sera un margin-top pour ma bordure par contre, il va falloir que je me creuse un peu plus la tête
- Edité par Loup-ErwanBetard 1 janvier 2018 à 22:19:22
> Bein un <span> est un <div> mais de type inline (comme un lien). Pas d'excuses , le HTML est le langage de description de ta page, on se fout de penser à l'esthétisme à ce moment la... les moteurs de recherche aussi...
Je ne suis pas d'accord avec ça : oui, le HTML est un langage de balisage, mais oui, on a aussi le droit de rajouter des éléments neutres sémantiquement pour des raisons de facilitation d'esthétisme. Parce que tout ne peut pas se faire en CSS sur un HTML purement utilitaire.
Et pour ce cas précis, Lucky13, tu aurais fait comment ?
Loup-ErwanBetnard : c'est une balise meta que te suggère Mewen_bzh, "viewport" cherche dans le cours, de mémoire c'est sur la même page que la partie "media queries".
- Edité par Lamecarlate 1 janvier 2018 à 22:23:28
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Loup-ErwanBetnard : c'est une balise meta que te suggère Mewen_bzh, "viewport" cherche dans le cours, de mémoire c'est sur la même page que la partie "media queries".
<meta name="viewport" content="width=xxx" /> C'est de cette balise qu'il est question ? je viens d'essayer de l'ajouter avec la valeur 320 à la place des 'xxx', puis 1024, sans succès pour le moment. Edit [Dans le cours, on parle de cette balise pour cibler les smartphones et leurs écrans tout petit petit dans mon exo, on me demande de faire mon responsive à partir de 1024px, cela à-t'il une importance ?] J'en profite également pour décortiquer le code source du TP avec Zozor (https://course.oc-static.com/ftp-tutos/cours/html-css/p4/ch5/tp_media_queries/index.html), je ne vois pas de balise meta viewport, mais ses media queries sont dans son css Je suis perdu
Je reprendrai tout ça demain, sur ce je vous souhaite une bonne soirée/nuit, et encore merci
- Edité par Loup-ErwanBetard 2 janvier 2018 à 7:41:43
Et bien mettre une image dans h1 ne me pose aucun souci, je l'ai déjà fait.
Pour un <pan>, balise neutre juste pour cela semble pas forcément pertinent. J'ai jeté un oeil sur l'activité 4, ok, mais en général on met ces titres dans un conteneur parent qui possède des propriétés...
Pour la meta viewport : j'ignore pourquoi dans le cours on mentionne une largeur en pixels sans préciser que c'est une mauvaise idée. La valeur à conserver c'est "width=device-width", pour indiquer au navigateur que la largeur de la page doit correspondre à celle du device, de l'appareil.
On écrit souvent "width=device-width, initial-scale=1", pour forcer le zoom au chargement à "1", c'est-à-dire 100%, pour empêcher notamment les iPhones de passer en 66% de zoom automatiquement.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
La balise meta, c'est bon, mon display en colonne s'effectue bien quand je réduis la taille de ma fenêtre. Merci
Mais maintenant, un autre problème apparaît ... : mon liseré (ma div '.sidebar') a disparu, complètement, pas juste quand je réduis la taille de la page, même en plein écran Pourquoi lui ne respecte pas la condition des 1024px que j'ai instauré dans mon css ? Et ce même si je réduis la taille (j'ai essayé en changeant mon 1024px par 800px, sans changement).
Désolé, je ne m'attendais pas à cette complication ^^.
- Edité par Loup-ErwanBetard 2 janvier 2018 à 9:01:47
Eh bien, à relire le code, j'en viens à me demander comment elle avait bien pu apparaître de prime abord. Elle n'a aucun contenu qui puisse lui donner de la hauteur ; en CSS tu lui donnes une hauteur de 100%, mais 100% de quoi ? Une hauteur en pourcentage se fait par rapport à la hauteur du parent, et si cette hauteur n'est pas explicitement définie elle vaut 0. Et 100% de 0, ben ça fait pas beaucoup.
Plutôt qu'un float left et des bidouilles, je t'encourage à utiliser flex - normalement tu l'as déjà vu dans le cours.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Me revoilà, toujours sur le même tp, et de nouveau avec un soucis sur mes media querries je comprends pas, ça fonctionnait très bien sans le liseré, maintenant que j'ai changé mon code pour que le liseré ne soit pas "buggé", le responsive agit assez étrangement. je m'explique : je demande donc a ce que mes trois parties du bas passe en colonne, et que mon liseré disparaisse.
Le liseré : checked.
Le passage en colonne : euh ... pas trop checked ... en fait j'ai un peu de tout, le premier élément est en haut, très bien, par contre les deux derniers éléments sont en dessous du premier, mais l'un a côté de l'autre en se chevauchant partiellement (?!?!?).
Voici le html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Mon CV en ligne</title>
</head>
<body>
<div id="liseret"></div>
<div id="contenu">
<p><a href="Mickey.png"><img src="mini_mickey.png" alt="mini_mickey" title="vers agrandissement"></a></p>
<h1> <span id="titre">Mickey Mousse</span></h1>
<p>Comics Walt Disney depuis 1928</p>
<section>
<h2>Mon expérience</h2>
<ul>
<li><strong>De 1928 à 1953 :</strong> C'est de la folie, cela n'arrête pas, toute une série de films et de courts métrages pour amuser petits et grands, et cela dès mes premiers jours. Puis j'ai fait de la B.D, des séries ... Dur dur la vie d'artiste.</li>
<li><strong>De 1983 à nos jours :</strong> Après une pause de quelques années, je me relance dans les films et les séries, même encore actuellement ! C'est que je ne suis plus tout jeune, il faudrait peut-être penser à me laisser prendre ma retraite maintenant ... s'il vous plait ... :-(</li>
<li><strong>Petits plus :</strong> J'ai eu l'occasion de faire des apparitions dans des films, des séries, des jeux-vidéos, il y en a même qui me sont entièrement consacrés, puis il y a les produits dérivés, les mascottes à mon effigie dans mes différents parcs d'attractions ... Nan franchement, je suis une vraie Star !</li>
</ul>
</section>
<section>
<h2>Mes compétences</h2>
<ul>
<li>Donner le sourire</li>
<li>Rester gravé dans les mémoires</li>
<li>Donner le sourire (oui encore, mais c'est important :p)</li>
</ul>
</section>
<section>
<h2>Ma formation</h2>
<p>Et bien franchement, je ne sais pas quoi vous en dire, que voulez-vous, ça doit être inné. C'est comme pour beaucoup de choses, on l'a ou on ne l'a pas.</p>
</section>
</div>
</body>
</html>
Juste une petite note, hors sujet mais qui m'a été souligné, j'ai essayé de modifier mon h1 pour retirer mes balises et le mettre en forme uniquement sous css, mais sans succès, d'où le fait que ma <span> soit encore présente
Merci encore du temps que vous m'accorderez, désolé de relancer le sujet comme ça, je l'ai un peu délaissé, mais je m'y remet gentiement.
Je suis en train de faire cet exercice, et en relisant le cours, je ne vois pas d'ou sort cette balise <meta viewport>. Quelqu'un peut-il me ré-expliquer?
ok pas de soucis, mais vu que l'on en parlait juste au dessus, je me disais que c'était le bon endroit.
Désolée.
Activité HTML5 - Semaine 4
× 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 :)