Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
560 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  probleme media queries

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

probleme media queries

n°2271461
louisgauti​er
Posté le 13-12-2015 à 13:52:13  profilanswer
 

Bonjour,
Je débute en HTML5/CSS3 donc mes erreurs sont des erreurs de débutant, je le sais, mais je n'arrive pas a trouver une solution a mon petit probleme.
J’intègre la possibilité que la page web change en fonction de la taille de l'écran.
HTML :

Code :
  1. <meta charset="utf-8" name="viewport" content="width=device-width"/>
  2. <title>Les grilles et les media queries</title>
  3. <link rel="stylesheet" href="grilles_media_queries.css"/>


 
CSS

Code :
  1. @media only screen and (max-width: 1024px){


 
 
Pour x raison tout ce qui est comprit dans @media n'est pas pris en compte,sur l'ordi la page est généré normalement, mais sur smartphone, c'est comme si il tout le contenu de @media n'était pas lu.
J'écris le code sous notepad++ et petite note, j'ai remarqué que le code couleur ne c'est pas appliqué sur ma ligne @media.
 
Merci

mood
Publicité
Posté le 13-12-2015 à 13:52:13  profilanswer
 

n°2271590
egege
Posté le 14-12-2015 à 22:12:51  profilanswer
 

Salut,
 
Je pense que ça vient de "only screen", réservée aux écrans. Essaye avec "all" à la place de "screen" ou encore "handheld" qui correspond au périphériques de petites tailles

n°2271641
louisgauti​er
Posté le 15-12-2015 à 15:11:30  profilanswer
 

Bonjour egege,
J'avais déjà essayer avec screen et handheld et meme résultat. Je suppose qu'avec all ca reviens au meme.
Merci en tous cas !

n°2271677
egege
Posté le 15-12-2015 à 21:23:59  profilanswer
 

Ton code css destiné aux grands écrans sont avant ou après celui pour les mobile ?

n°2271703
louisgauti​er
Posté le 16-12-2015 à 00:44:34  profilanswer
 

Il est avant. Et le problème viens peut être que je spécifie QUE pour les petits écran ?

n°2271708
egege
Posté le 16-12-2015 à 08:04:45  profilanswer
 

Tu veux bien mettre ton fichier CSS ici ?

n°2271951
louisgauti​er
Posté le 18-12-2015 à 23:34:42  profilanswer
 

Bonjour,
Désolé pour les quelques jours d'attente.
<code>
 
@media all and (min-width: 1024px){
header, footer {
 /* background-color:#00627F; */
 color:white;
 line-height:4em;
}  
head, body, h1, h2,a {
 margin:0;
 padding:0;
 
}
h1 {
 vertical-align:-20;
}
body{
 background-color:#f9f9f9;
 font-family:Calibri;
}
nav{
 background-color:#00627F;
}
 
 
            /*MENU*/
             
h1{
 float:left;
 margin-left:100px;
}            
#menu-rolling{
 /* float:right; */
 margin:0;
 margin-left:450px;
 margin-right:100px;
 padding:0px;
 font-size:16px;
 background-color:#00627F; /*couleur clair*/
}
#menu-rolling ul { /*sur tous les ul*/
 list-style:none; /*Enlève les ronds des sous menu*/
 margin-left: 0 0;
}
#menu-rolling a{ /*sur tout les a*/
 display:block;
 text-decoration:none;
 color:white;
 line-height:40px; /*épaisseur du bandeau*/
 padding:0 50px; /*ecartement entre section 1 et 2*/
 white-space: nowrap;
}
#menu-rolling > li{ /*li du menu principal*/
 display:inline-block;
 position:relative;
 border-radius: 8px 8px 0px 0px;
}
#menu-rolling>li:hover {
 background-color:#003b4c; /*couleur foncé*/
}
#menu-rolling  a:hover {
 background-color:#004e66;
 border-radius: 8px 8px 8px 8px;
}
#menu-rolling li ul {
    position: absolute;
 margin: 0 0;    
    padding: 0px 0px;
    max-height:0;            
    overflow:hidden;
}
#menu-rolling  li:hover ul {
 max-height:15em;
 background-color:#003b4c;
 border-radius: 0px 0px 8px 8px;
 width:100%;
}
 #search {
 width:60px;
 text-align:center;
 border-radius: 8px;
}
 #search:hover{
 width:60px;
 text-align:center;
 border-radius: 8px;
}
/*
#searchbar {
 display:inline;
 /* float:right;
 position:absolute;
 margin: 0 0;    
    padding: 0px 0px;
    max-height:0;            
    /* overflow:hidden;  
 background-color:#003b4c;
 border-radius: 8px 8px 8px 8px;
 width:100%;
}
#searchbar :hover {
 max-height:15em;
 background-color:#003b4c;
 border-radius: 8px 8px 8px 8px;
 width:150px;
}
.champ:hover {
 background-color:white;
} */
 
 
           /*BANDEAU*/
           
/*          
#slideshow {
 position: relative;
}
#slideshow:before,:after {
 position:absolute;
 bottom:16px;
 width:100%;
 z-index:-10;
}
#slideshow:before {
 left:0;
}
#slideshow:after {
 right:0;
}
.img {
 width:"100%";
 height:"100%";
}
#slideshow .slider {
 position: absolute;
 top:0; left:0;
 width: 640px;
 height: 284px;
}
 
#slideshow .container {
 position:relative;
 width: 640px;
 height: 284px;
 overflow: hidden;
}
#slideshow figure {
 position:relative;
 display:inline-block;
 padding:0; margin:0;
}  
*/
 
#bandeau {
 width:100%;
 margin:0; padding:0;
}
         /*BLOC*/
         
#someof {
 border:1px solid #d8d8d8;
 border-radius: 8px 8px 8px 8px;
 margin: 25 100;
 background-color:#d8d8d8;
}
#someof h2 {
 font-size:32px;
}
#someof p {
 display:inline-block;
}
#view_more {
 background-color:red;
 border:1px solid red;
 border-radius: 8px 8px 8px 8px;
 line-height: 3em;
 width: 100px;
 float:right;
 margin:-20px 25px; padding:0;
 list-style:none;
 text-align:center;
 box-shadow:0px 3px 0px #cc0000;
 line-height:2.2em;
}
#view_more a{
 text-decoration:none;
 color:white;
}
#block {
 margin: 70px 80px;
 padding: 0;
 float:center;
}
#block > li {
 display:inline-block;
 border: 1px solid white;
 border-radius: 8px 8px 8px 8px;
 background-color:white;
 text-align:center;
 width:337px;
 height:400px;
 word-wrap:break-word;
 margin:0 20;
}
#block i {
 padding-top:35;
 color:#31bfa7;
}
#block a {
 font-weight:blod;
 font-size:22px;
 color:#a5abaa;
 line-height:5em;
 text-align:center
}
.text {
 font-size: 18;
 margin: 0 20;
 width: 10%;
}
#read_more {
 line-height: 3em;
 float:left;
 list-style:none;
 text-align:center;
 text-decoration:none;
 line-height:2.2em;
}
#read_more li{
 margin:80px 6px; padding:0;
 display:inline-block;
 background-color:#31bfa7;
 border: 1px solid #31bfa7;
 border-radius: 8px 8px 8px 8px;
 text-align:center;
 font-size:12px;
 height:70px;
 width: 250px;
 box-shadow: 0px 3px 0px #279684;
}
#read_more li:active {
 background-color:#bf3149;
 box-shadow: 0px 3px 0px #bf3149;
 border: 1px solid #bf3149;
 border-radius: 8px 8px 8px 8px #bf3149;
}
#read_more a {
 margin-top:9;
 display:block;
 white-space: nowrap;
 line-height:50px;
 color:white;
 vertical-align:-10;
 text-decoration:none;
}
#WHYMODUS {
 background-color:#ececec;
 background-position:center;
 font-size:22px;
 text-align:center;
 margin-top:70px;
 padding-top:70px;
 padding-bottom:380px;
 width:100%;
 /* overflow:hidden; */
 position:absolute;
}
#title {
 color:red;
 font-size:42;
 line-height:2em;
 font-weight:bold;
}
#scene {
 width:88%;
 display:inline-block;
 padding:0px 100px;
 box-shadow: 8px black;
 position:relative;
 margin-top:350px;
}
           /*PARAGRAPHE*/
           
article {
 position:absolute;
 float:left;
 font-size:18px;
 margin-top: 50px;
}          
#left {
 float:left;
 display: inline-block;
 list-style:none;
 padding: 0; margin:0;
 width:15%;
 margin-left:100px;
}
#left ul>li{
 list-style:none;
 line-height:2em;
}
#left ul {
 padding:0;
}
#left h3 {
 font-weight:bold;
}
#left i {
 color:red;
}
#right {
 margin-right:100;
 float:right;
 max-width:15%;
}
#right p {
 background-color:white;
 font-style:italic;
 margin-left:0; padding:0;
}
#middle {
 
 /* width:70%; */
 padding:0px 400px;
 margin-top:15px;
}
#middle p {
 /* margin:0; padding:0; */
 text-align:center;
}
#middle a {
 color:red;
 text-decoration:underline;  
}
#loadingbar {
 text-align:center;
 width:100%;
 /* margin-left:25%; */
}
 
 
 
 
 
 
 
 
          /*FOOTER*/
/*          
#text-footer{
 text-align:left;
 display:block;
 color:red;
}
#menu-static {
 margin: 0 15%;
 font-size:16px;
 background-color:#00627F;
}          
 */        
         
         
}          
         
</code>        
         
 J'ai tous mis dans le doute mais je pense que c'était pas utile.

n°2271953
louisgauti​er
Posté le 19-12-2015 à 01:24:10  profilanswer
 

En faite, après plusieurs essaie, je me rends compte que je fait peut être fausse route. Un peu de contexte: Je suis en formation en web (pour faire simple). J'ai un tp a faire, réaliser d'après une image une page web. Tout se déroule bien, mais le hic c'est que dès que je change d'écran, tout bascule, rien n'est en place. Je me demande si l'utilisation des margin/padding et autres en px est une utilisation judicieuse.
Tout ce que je souhaite (et c'est la que je me trompe peut etre avec ces medias queries) c'est que d'une ecran a l'autre (sans parler forcément de tablettes ou de smartphone) mon contenu reste en place, présentable.
Voilà, n'hésitez pas à me demander quoi que ce sois, ma date buttoirs est mardi à minuit.
 
Merci encore du temps que vous me consacrez.

n°2272050
egege
Posté le 21-12-2015 à 11:46:09  profilanswer
 

Si c'est l'ensemble de ton fichier CSS c'est normal que tu ne voies pas de changement, car ton accolade après @media all and (min-width: 1024px) se ferme à la fin de ton fichier.

 

Tu devrais faire ton CSS pour ta page en version classique. Puis en dessous (ou dans un autre fichier appelé après) tu mets ton code pour les autres versions.

 

Exemple (code à la con):

 
Code :
  1. body{
  2. font-size : 1rem;
  3. color: #555;
  4. }
  5. table{
  6. width : 50%;
  7. border: 1px solid #eee;
  8. }
  9. @media all and (max-width: 1024px){
  10. body{
  11. color: #000;
  12. }
  13. table{
  14. width : 100%;
  15. }
  16. }
 

Dans mon exemple, en version supérieure à 1024px, le texte est gris et le tableau fait 50% de largeur. En version inférieure à 1024px, le texte passe en noir et le tableau en 100%.


Message édité par egege le 21-12-2015 à 11:46:32
n°2272052
louisgauti​er
Posté le 21-12-2015 à 12:56:41  profilanswer
 

Bonjour,
D'accords, merci. ca règle le probleme de affichage tablette/smartphone. Mais pas le probleme d'écran pc. Quand je change de pc tout est chamboulé. Je n'arrive pas à garder ma mise en page (qui a été faite sur mon ecran). Ma fois ceci mérite peut etre un autre sujet dédier.
Merci de ton aide !


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  probleme media queries

 

Sujets relatifs
probleme au niveau de mes conditions[C] Problème d'affichage dans le résultat de ma fonction C
Powershell - Problème script création d'utilisateur dans l'ADprobleme de décimal -Java
Problème intent.putExtraproblème while
Problème d'impression de fichier html contenant un saut de pageProblème bouton menu mobile
[JAVA]probleme de bouton personnaliser.[JQUERY]Problème requête ajax en GET via PHP
Plus de sujets relatifs à : probleme media queries


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR