Probleme au niveai des media queries

dlna -

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

Afficher la suite

A voir également

Media queries ne fonctionne pas
Vlc media player - Télécharger - Lecture
Duplicate media finder - Télécharger - Gestion de fichiers
Media converter - Télécharger - Conversion & Codecs
Lecteur windows media - Télécharger - Lecture
Lecteur windows media ne reconnait pas les albums - Forum Lecteurs et supports vidéo

5 réponses

Réponse 1 / 5
dlna
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;}
}
```
0
1. hixo
  
  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;}
  }
  
  0
Réponse 2 / 5
animostab
bonjour
1 ) tu as oublié le } de fermeture du media screen
2) fait plutot display:none;
0
Réponse 3 / 5
dlna
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;
}
}
```
0
1. animostab
  
  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
  
  0
2. dlna
  
  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 :-(
  
  0
3. animostab
  
  Chez moi ca marche très bien
  fait bien en html <div class="banner"></div>
  
  0
4. dlna
  
  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; }
  }
  
  0
Réponse 4 / 5
animostab
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.
0
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question

dlna

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

Probleme au niveai des media queries

5 réponses

Discussions similaires

Newsletters