Probleme au niveai des media queries

Fermé

dlna - 1 nov. 2014 à 19:49
hixo - 23 oct. 2015 à 12:38

Bonsoir
svp je rencontre un probleme au niveau des media queries, aucun changement apparent !!



div.banner{
	width:1055px; 
	height:260px; 
	margin:0 auto;
	clear:both
}
@media screen and (max-width:687px){
.banner { width:450px; 
	height:116px; 
	margin:0 auto;
	clear:both;
}

Merci pour votre aide

A voir également:

Media queries ne fonctionne pas
Media creation tool - Télécharger - Systèmes d'exploitation
Telecharger vlc media player - Télécharger - Lecture
Duplicate media finder free - Télécharger - Gestion de fichiers
Ps3 media server - Télécharger - Divers Réseau & Wi-Fi
Telecharger windows media player - Télécharger - Lecture

5 réponses

Réponse 1 / 5

dlna
Modifié par dlna le 1/11/2014 à 21:18

et ca aussi svp, merci infiniment


div.logo{
 float: left;
    height: 98px;
    margin-top: 21px;
    padding-bottom: 24px;
    padding-left: 23px;
    padding-top: 0;
    width: 170px;
 
}

@media screen and (max-width:687px){
#div.logo { display:no;}
}

hixo
23 oct. 2015 à 12:38

vous avez un probleme au niveau de css:
vous avez oublier un NE pour le mot none
@media screen and (max-width:687px){
#div.logo { display:none;}
}

Réponse 2 / 5

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
1 nov. 2014 à 21:49

bonjour
1 ) tu as oublié le } de fermeture du media screen
2) fait plutot display:none;

Réponse 3 / 5

dlna
Modifié par dlna le 1/11/2014 à 22:40

Merci pour votre réponse mais ca ne marche pas j'ai corriger les erreurs mais aucun résultat.


div.banner{
 width:1055px; 
 height:260px; 
 margin:0 auto;
 clear:both
}
div.logo{
 float: left;
    height: 98px;
    margin-top: 21px;
    padding-bottom: 24px;
    padding-left: 23px;
    padding-top: 0;
    width: 170px;
 
}
@media screen and (max-width:687px){
#div.logo { display:none;}
#banner { width:450px; 
 height:116px; 
 margin:0 auto;
 clear:both;
}
}

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 2/11/2014 à 05:54

essaie ca
.banner{
width:1055px;
height:260px;
margin:0 auto;
border:1px solid red;
clear:both
}
.logo{
float: left;
height: 98px;
margin-top: 21px;
padding-bottom: 24px;
padding-left: 23px;
padding-top: 0;
width: 170px;
border:1px solid red;

}
@media screen and (max-width:687px){
.logo { display:none;}
.banner { width:450px;
height:116px;
margin:0 auto;
border:1px solid red;
clear:both;
}
}

les div logo et banner doivent avoir une class ex <div class="logo">
tu melanges id et class apprend la différence en tre classet id
http://css.mammouthland.net/selecteurs-css-class-id.php
pense aussi que tu as un width de 1055px et un max-width de 687px donc je ne vois pas a quoi ca peut servir car entre 1054 et 687 px tu aura un débordement ou srollbar horizontale

dlna
Modifié par dlna le 2/11/2014 à 12:11

Bonjour Amine, merci c'st vrai parfois je confond un peu entre les class et id s'apprend encore :-(
j'ai essayer de corriger le code mais pour .banner rien en change, la taille ne change pas :-(

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
2 nov. 2014 à 14:08

Chez moi ca marche très bien
fait bien en html <div class="banner"></div>

dlna
Modifié par dlna le 3/11/2014 à 09:01

merci d'etre aussi patient avec moi,
j'ai deux petites questions ? pourquoi vous avez enlevé le div. de logo ?
2/actuellement quand je fais par exemple ce code il marche mais pour redimensionné (width et heigh) non ?!
j'ai aussi de faire le meme code que vous ca ne marche pas


div.logo{
 float: left;
    height: 98px;
    margin-top: 21px;
    padding-bottom: 24px;
    padding-left: 23px;
    padding-top: 0;
    width: 170px;
 }
@media screen and (max-width:500px){
div.logo {display:none; }
}

Réponse 4 / 5

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 3/11/2014 à 21:25

sans le code html difficile de vous aidez

j'ai enlevé le div. pour tester
si vous faites un code html comme celui ci le css que vous ai donné fonctionne
<div class="banner"></div>
<div class="logo"></div>
si vous avez la page en ligne donnez l'url car css sans html ne veux rien dire

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

dlna
Modifié par dlna le 20/11/2014 à 11:46

Bonjour,
Vous avez raison, ci-joint les le code de l'index et du reste et merci énormément pour votre coup de main.
j'aimerai par exemple pour la dimension d'une tablette et mobile reduire la taille du bloc contenant tout les élement du corps de la page et éliminer le menu du left
index:

<body>
<div class="page">
  <?php
  include('head.html');
  ?>
  <div class="banner"><?php
  include('banner.html');
  ?>
  </div>
  <div class="corps">
      <?php
  include('left_menu.html');
  ?>
    
    <div id="contenu">
      <div style="width:221px; float:left"> <img src="images/fr.png" width="221" height="142" />
      </div>
      <div style="float: left;margin-left: 10px;text-align: justify; width: 457px;">
        <h1>Cours d'anglais</h1>
<p> Les cours sont </p>

        <h2>Cours de français</h2>
        <p>Ci-joint les cours de français  </p>
               </div>
              </div>
      </div>
          </div>
  </body>

Head.html

   <div class="logo">
     <a href="index.php"><img src="images/logo.png" width="170" height="98" /> </a>
   </div>
  <div class="tel" align="right">
  <a href="http://www.monsite.fr/es"><img src="images/es.png"/></a>
  <a href="mailto: ***@***"><img src="images/contact.png" width="170" /></a> <br>
  <a href="https://www.facebook.com/pages/"><img src="images/facebook.jpg" width="24" height="25"  /></a>
  <a href="https://twitter.com/"><img src="images/twitter.jpg" width="24" height="25"/></a>
  <a href="https://plus.google.com/"><img src="images/google+.jpg" width="24" height="25"  /></a>
  <a href="http://www.monsite.fr/rss.xml"><img src="images/rss.jpg" width="24" height="25"  /></a>
  </div>
  <div class="menu-top">
    <ul>
    <li><a href="http://www.monsite.fr/blog/">Blog </a></li>
      <li class="last"><a href="http://www.monsite.fr.php">Francais</a></li>
      <li><a href="http://www.monsite.fr/">Anglais</a></li>
      <li><a href="http://www.monsite.fr/">Espagnol </a></li>
      <li><a href="http://www.monsite.fr">autres</a></li>
      <li><a href="http://www.monsite.fr">videos</a></li>
      <li><a href="http://www.monsite.fr">contact </a></li>
      <li><a href="http://www.monsite.fr">Accueil </a></li>
    </ul>
  </div>

Banner

   <link href="slider_themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="slider_themes/1/js-image-slider.js" type="text/javascript"></script>
    <link href="css/generic.css" rel="stylesheet" type="text/css" />

    
    <div id="sliderFrame">
        <div id="slider">
           
            <img src="images/banner3.jpg" alt="" />
            <img src="images/banner1.png" alt="" />
            <img src="images/banner.png" alt="" />
            <img src="images/banner2.png" alt="" />
                    
        </div>
    </div>

left menu

     <div id="left_menu">
    <ul>
              <li><span id="block_menu_left"> <a href="http://www.monsite.fr/index.php">Accueil</a></span></li>
              <li><span id="block_menu_left"> <a href="http://www.monsite/francais.php">francais</a></span></li>
              <li><span id="block_menu_left"> <a href="http://www.monsite/espagnol.php">espagnol</a></span></li>
            <li><span id="block_menu_left"> <a href="http://www.monsite/video.php">videos</a></span></li>
              <li><span id="block_menu_left"> <a href="http://www.monsite.fr/autres.php">autres</a></span></li>
              <li><span id="block_menu_left"> <a href="http://www.monsite.fr/contact.php">contact</a></span></li>
              <li><span id="block_menu_left"> <a href="http://www.monsite.fr/anglais.php">anglais</a></span></li>
            </ul>
    <div style="margin-top:26px">
        <center>
          <span class="title">GALERIE PHOTOS</span>
        </center>
        <a href="galerie-photos.php"><img src="images/galerie.png" /> </a></div>
    </div>

CSS

body{
	text-align:justify;
	line-height:19px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background:url(../images/bg-esthetique_01.png) repeat-x #FFF;
	font-size:12px;
	color:#828282;
	font-family:Arial, Helvetica, sans-serif;
}
div.logo{
	float: left;
    height: 98px;
    margin-top: 21px;
    padding-bottom: 24px;
    padding-left: 23px;
    padding-top: 0;
    width: 170px;
	
}
#contenu {width:688px; margin-left:20px; float:left}
div.page{
	width:1010px; 
	margin:0 auto; 
	background:#FFFFFF; 
	margin-top:29px;
	padding:0 20px 20px 20px;
	box-shadow: 1px 0 7px 0 #CECECE;}

div.content{
	width:1102px; 
	margin:0 auto; 
	background:#FFFFFF;
}
div.banner{
	width:1055px; 
	height:260px; 
	margin:0 auto;
	clear:both
}
div.corps{
	width:100%;
	padding-bottom:30px;
	margin-top:27px;
	display: inline-block;
}
div.menu-vertical{
	width:272px; 
	height:45px; 
	float:left; 
	margin-bottom:2px
}
#block_menu_left {
	display:block;
	height:18px;
	width:272px;
	margin-bottom:5px;
	background-color:#f7f7f7;
	font-size:15px;
	text-transform:uppercase;
	color:#737373;
	padding:15px 0 15px 30px ;
	background-image:url(../images/menu_left_color.png);
	background-repeat:no-repeat;
	
}

Discussions similaires

PXE-E61 : media test failure, check cable

affichage checking media

c'est quoi haali media splitter

Discussions similaires

Newsletters