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 :

 
CSS

 
 
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

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

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 !

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

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

Tu veux bien mettre ton fichier CSS ici ?

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.

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.

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

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

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 !