Partage

Activité HTML5 - Semaine 4

mes media queries ne fonctionnent pas :'(

1 janvier 2018 à 21:06:48

Bonsoir à tous.

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 :

@font-face 
{
    font-family: 'riffic-bold';
    src: url('riffic-bold-webfont.woff2') format('woff2'),
         url('riffic-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body
{
	background-color: silver;
}

.sidebar 
{
    background-color: grey;
     width: 10%;
     height: 100%;
    float: left;
    margin-left: 1%;
}   

.portrait
{
	float: right;
	border: 3px black outset;
	box-shadow: grey 3px 3px 5px;
	margin: 1%;
}

h1, .intro
{
 font-family: 'riffic-bold', Arial, serif;
 text-align: center;
}

.intro
{	
	color: grey;
} 

.note 
{
 border-bottom: 5px ridge maroon;
 border-right: 5px ridge maroon;
 padding:1%;
 box-shadow: 5px 5px 6px grey;
}

.conteneur
{
	display: flex;
	justify-content: space-around;
	padding-left: 1%;	
	clear: right;
}

.elements
{
	width: 30%;
	text-align: justify;
	padding-right: 2%;
}

@media all and (max-width: 1024px)
{
    .conteneur
    {
        flex-direction: column;
    }

    .sidebar
    {
    	display: none;
    }
}


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

1 janvier 2018 à 21:20:46

Hello,

Commencer par le début;

Peux-tu nous décrire l'intérêt cette ligne :

<h1><span class="note">Mickey Mouse</span></h1><br />

Ah et aussi à quoi servent tes <br /> , que dit le cours sur ce point ? 

-
Edité par Lucky13 1 janvier 2018 à 21:22:41

1 janvier 2018 à 21:39:19

Salut,

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. 

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
1 janvier 2018 à 21:52:50

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. 

1 janvier 2018 à 21:59:01

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


-
Edité par Lucky13 1 janvier 2018 à 22:03:49

1 janvier 2018 à 22:03:17

@Mewen_bzh : bonsoir :)

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 :p pour ma bordure par contre, il va falloir que je me creuse un peu plus la tête :pirate:

-
Edité par Loup-ErwanBetard 1 janvier 2018 à 22:19:22

Staff 1 janvier 2018 à 22:23:11

> 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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
1 janvier 2018 à 22:42:49

Lamecarlate a écrit:

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

1 janvier 2018 à 22:43:03

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

Staff 2 janvier 2018 à 8:34:32

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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
2 janvier 2018 à 8:59:42

La balise meta, c'est bon, mon display en colonne s'effectue bien quand je réduis la taille de ma fenêtre. Merci :p

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

Staff 2 janvier 2018 à 9:04:10

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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

Activité HTML5 - Semaine 4

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