Problémes avec les Medias Queries

23 avril 2018 à 17:06:02

Salut!

J'ai bientot fini mon apprentisage du html et du css du coup je dois fair eune exercice final nécessitant cette commande:

@media all and (max-device-width: 1024px)

Mais ce que je mets en bas n'est pas affiché en bleu,comme si la commande était incorrecte(Alors que je l'ai prise du cours!)Des réponses?

Mewen_bzh

23 avril 2018 à 17:09:15

Bonjour,

Impossible de te répondre sans voir ton code, nous ne sommes malheureusement pas devins.

Tu dois nous aider à t'aider.

Je ne réponds pas aux messages privés.

RomainBarbason

23 avril 2018 à 17:10:01

Html:

<!DOCTYPE html>

<html>

<head>

<title>CV Jean luc Mélenchon</title>

</head>

<body>

<h1>Jean Luc Mélenchon</h1>

<h3>Créateur de la france insoumise,Anti-Tartuffes,N'aiment pas être que avec des gens avec des cheveux blonds et des yeux bleus</h3>

<h2 class="titre1" >Mon Expérience</h2>

<li class="li4">Leader de la France Insoumise depuis 2016</li>

<li class="li5">Posséde un chaine youtube de 317000 Abonnés</li>

</ul>

</div>

</section>

<h2 class="texte2">Mes Compétences</h2>

<li class="li1" >Titulaire d'une license de philosophie</li>

<li class="li2">Surveillant et professeur auxilliaire</li>

<li class="li3">Journaliste à <em>La Dépêche du Jura</em></li>

</ul>

</div>

</section>

<h2 style="display: inline;">Ma Formation</h2>

<p>License de philosophie obtenu a la faculté de lettres et sciences humaines de <em>L'unniversité de Besançon en 1972</em></p>

</div>

</section>

</div>

</body>

</html>

CSS:

img

{

float: right;

box-shadow: 6px 6px 6px black;

}

h1 , h3

{

text-align: center;

}

.texte

{

clear: both;

}

h2 ,

{

display: inline;

justify-content: center;

padding-left: 200px;

}

.titre

{

margin-right: 100px;

}

#global

{

overflow: auto;

}

#Liste1

{

float: left;

padding-right: 50px;

padding-left: 150px;

}

#Liste2

{

padding-top: 1px;

float: left;

padding-right: 150px;

padding-left: 150px;

}

#Liste3

{

padding-left: 150px;

padding-top: 22px;

}

.sidebar

{

float: left;

width: 150px;

height: 700px;

background: grey;

border-radius: 6px;

}

.titre1

{

padding-left: 90px;

}

.texte2

{

padding-left: 50px;

}

@media all and (max-device-width: 1024px)

{

.sidebar

{

display: none;

}

Mewen_bzh

23 avril 2018 à 17:11:20

Merci d'utiliser les balises de code (le bouton "</>" du forum) pour plus de lisibilité.

Je ne réponds pas aux messages privés.

RomainBarbason

23 avril 2018 à 17:11:55

Ah désolé je suis pas habitué a ce forum ^^' je fais ca tous de suite

<!DOCTYPE html>

<html>

<head>

<title>CV Jean luc Mélenchon</title>

<link rel="stylesheet" type="text/css" href="Jeanluc.css">

</head>

<body>

<div id="global">

<a href="082611.jpg"><img src="Minijeanluc.png"></a>

<div class="sidebar"></div>

<h1>Jean Luc Mélenchon</h1>

<h3>Créateur de la france insoumise,Anti-Tartuffes,N'aiment pas être que avec des gens avec des cheveux blonds et des yeux bleus</h3>

<section>

<div id="Liste1" style="display: block;">

<h2 class="titre1" >Mon Expérience</h2>

<ul class="ul1">

<li class="li4">Leader de la France Insoumise depuis 2016</li>

<li class="li5">Posséde un chaine youtube de 317000 Abonnés</li>

</ul>

</div>

</section>

<section>

<div id="Liste2" style="display: block;">

<h2 class="texte2">Mes Compétences</h2>

<ul class="ul2">

<li class="li1"  >Titulaire d'une license de philosophie</li>

<li class="li2">Surveillant et professeur auxilliaire</li>

<li class="li3">Journaliste à <em>La Dépêche du Jura</em></li>

</ul>

</div>

</section>

<section>

<div id="Liste3" style="display: block;">

<h2 style="display: inline;">Ma Formation</h2>

<p>License de philosophie obtenu a la faculté de lettres et sciences humaines de <em>L'unniversité de Besançon en 1972</em></p>

</div>

</section>

</div>

</body>

</html>

CSS:

img
{
float: right;
box-shadow: 6px 6px 6px black;
}
h1 , h3
{
text-align: center;
}
.texte
{
clear: both;
}
h2 , 
{
display: inline;
justify-content: center;
padding-left: 200px;
}
.titre
{
margin-right: 100px;
}
#global
{
 overflow: auto;
}
#Liste1
{
float: left;
padding-right: 50px;
padding-left: 150px;
}
#Liste2
{
padding-top: 1px;
float: left;
padding-right: 150px;
padding-left: 150px;
}
#Liste3
{
padding-left: 150px;
padding-top: 22px;
}
.sidebar
{
float: left;
width: 150px;
height: 700px;
background: grey;
border-radius: 6px;
}
.titre1
{
padding-left: 90px;
}
.texte2
{
padding-left: 50px;
}
@media all and (max-device-width: 1024px)
{
.sidebar
{
display: none;
}
}

-
Edité par RomainBarbason 23 avril 2018 à 17:15:11

DarkKun9

23 avril 2018 à 17:29:24

Salut !

Et si tu essaye simplement avec @media all and(max-width: 1024px), ça donne quoi?

"Les inconscients ignorent la complexité. Les génies la suppriment."

RomainBarbason

23 avril 2018 à 17:36:31

Ca ne change rien!

Et puis je dois aussi faire en sorte que le liséré a gauche de mon CV disparait (avec display: none;)donc je dois mettre quelque chose aprés

Mais merci pour la réponse!;D

Zoki_Marciano

23 avril 2018 à 18:16:37

Enmême temps tu met un display:none sur une div qui ne contient rien et pour le css faut faire un choix soit dans le html soit dans une fichier.css à part sinon c'est ingérable.

Edit: autant pour moi j'avais pas vu les parametres css.

Pour ton probleme de queries il faut que remplace cette ligne :

@media all and (max-device-width: 1024px)

par celle ci :

@media all and (max-width: 1024px)

-
Edité par Zoki_Marciano 23 avril 2018 à 18:27:38

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

RomainBarbason

23 avril 2018 à 18:53:39

Ca a marché Merci beaucoup!!!;D