Partage
  • Partager sur Facebook
  • Partager sur Twitter

Media queries

Sujet résolu
    18 mai 2017 à 14:08:18

    Bonjour à tous! 

    Je suis en train de faire le tp sur les média queries et je pense y être arrivé mais pas de la bonne manière. Quand j'essaie de modifier dans @media l'attribut "width" cela ne fonctionne pas. Peut être que c'est mon code qui bloque, j'en sais rien, je cherche depuis ce matin! Bref je suis arrivé à un résultat qui me plait, mais pas de la bonne manière car l'exemple que donne Matthieu Nebra ici , il modifie bien "width". Or moi impossible ! ça ne le prend pas en compte. Si quelqu'un peut me donner une explication :) Merci d'avance.

    Voici mon code :

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<link rel="stylesheet" href="style.css"/>
    		<title> Cv de Anthony Alvaro </title>
    	</head>
    		<body>
    			<div id="corp">
    				<div>
    					<img src="image/lisere.jpg" class="liseret" alt="lisere" />
    				</div>
    				<div id="secondframe">
    					<header>
    						<div class="title">
    							<h1>Anthony Alvaro</h1>
    							<h2>Recherche une entreprise pour effectuer une alternance en Bac+3 </h2>
    						</div>
    						<p>
    						<a href="image/photomoi.jpg" target="_blank"><img src="image/photomoi.jpg" class="picture" alt="picture" title="Photo d'Anthony"/></a>
    						</p>
    					</header>
    					
    					<section>
    						<div>
    							<h3>Mes expériences</h3>
    							<ul>
    								<li><strong>2016-2017</strong></br>
    									<em>Technicien de maintenance en informatique</em>
    								</li>
    								<li><strong>2014-2016</strong></br>
    									<em><a href="http://www.onisep.fr/Ressources/Univers-Metier/Metiers/technicien-technicienne-de-maintenance-industrielle" target="_blank">Technicien de maintenance </a></em>
    								</li>
    								<li><strong>2012-2014</strong></br>
    									<em><a href="http://www.onisep.fr/Ressources/Univers-Metier/Metiers/conducteur-conductrice-de-ligne-de-production-alimentaire" target="_blank">Conducteur de ligne automatisée </a></em>
    								</li>
    								<li><strong>2009-2011</strong></br>
    									<em><a href="http://www.onisep.fr/Ressources/Univers-Metier/Metiers/plombier-plombiere" target="_blank">Installateur thermique et sanitaire </a></em>
    								</li>
    							</ul>
    						</div>
    						
    						<div>
    							<h3>Mes compétence en informatique</h3>
    							<ul>
    								<li>
    									Excel, Word
    								</li>
    								<li>
    									HTML5, CSS3, C#
    								</li>
    							</ul>
    						</div>
    						
    						<div>
    							<h3>Mes formations</h3>
    							<ul>
    								<li><strong>2014-2016</strong></br>
    									<em>BTS Maintenance des Systèmes de production</em></br>
    									En alternance, formation sur l'électricité, l'automatisme, la mécanique
    									et la stratégie de maintenance.
    								</li>
    								<li>
    									<strong>2012-2014</strong></br>
    									<em>BAC pro Pilotage de Système de Production Automatisée</em></br>
    									En alternance, formation sur la conduite de ligne automatisée, 
    									et la maintenance 1er niveau.
    								</li>
    								<li>
    									<strong>2009-2012</strong></br>
    									<em>CAP Installateur Sanitaire et Thermique</em></br>
    									En alternance, formation sur les techniques de soudure du fer et matériaux galvanisés.
    									Formation sur l'installation des matériaux sanitaires et techniques de cintrage.
    								</li>
    							</ul>
    						</div>
    					</section>
    				</div>
    			</div>
    		</body>
    </html>
    
    

    et mon code css:

    @font-face {
        font-family: 'ambleregular';
        src: url('Police/Amble-Regular-webfont.eot');
        src: url('Police/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('Police/Amble-Regular-webfont.woff') format('woff'),
             url('Police/Amble-Regular-webfont.ttf') format('truetype'),
             url('Police/Amble-Regular-webfont.svg#ambleregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @media all and (max-width: 1024px)
    {
    	section
    	{
    		display: flex;
    		flex-direction: column;
    	}
    	section div
    	{
    		align-items: stretch;
    		text-align: center;
    	}
    	.liseret
    	{
    		display: none;
    	}
    	header
    	{
    		flex-direction: row-reverse;
    	}
    	
    	
    }
    
    body
    {
    	background-image: url("image/fond.jpg");
    	background-attachment:fixed;
    	background-size: 100%;
    	margin: 0;
    	width: auto;
    }
    #corp
    {
    	display: flex;
    }
    .liseret
    {
    	border-radius: 10px;
    	min-height: 100vh;
    	width: 100px;
    }
    #secondframe
    {
    
    	display: flex;
    	flex-direction: column;
    	flex: 1;
    	width: auto;
    	height: auto;
    }
    header
    {
    	display: flex;
    	width: auto;
    	height: auto;
    }
    .picture
    {
    	width: auto;
    	height: auto;
    	box-shadow: 6px 6px 6px black;
    	margin: 0px 20px 0px 20px;
    }
    .title
    {
    	display: flex;
    	flex-direction:column;
    	justify-content: center;
    	flex:1;
    }
    .title h1,h2
    {
    	text-align: center;
    }
    section
    {
    	display: flex;	
    	width: auto;
    	height: auto;
    }
    section div
    {
    	flex: 1;
    	margin: 0px 20px 0px 20px;
    }
    ul
    {
    	text-align: justify;
    }
    h1
    {
    	font-family: ambleregular, arial, serif;
    	font-size: 2em;
    }
    h2
    {
    	font-family: serif,arial;
    }
    h3
    {
    	font-family: Courier New, monospace;
    	color: red;
    }
    section div a
    {
    	color: black;
    	text-decoration: none;
    }
    section div a:hover
    {
    	color: red;
    	text-decoration: underline;
    }
    section div a:visited
    {
    	color: #9F60BF;
    }
    



    • Partager sur Facebook
    • Partager sur Twitter
      18 mai 2017 à 14:09:52

      ça fonctionne très bien mais il te manque une chose dans ton code html ^^ la meta viewport :)
      • Partager sur Facebook
      • Partager sur Twitter

      Le CSS ça peut craindre -->Conférence CSS3.CREATE

        18 mai 2017 à 14:12:45

        Merci de votre réponse. La meta viewport c'est pas uniquement si on cible les smartphone?
        • Partager sur Facebook
        • Partager sur Twitter
          18 mai 2017 à 14:14:18

          non. tu peux faire un media Queries à 2500px aussi et viewport reste nécessaire pour un affichage optimal :)

          Ajoute quand même un media="all" à ton <link href="style.css" />

          -
          Edité par stefde3 18 mai 2017 à 14:15:15

          • Partager sur Facebook
          • Partager sur Twitter

          Le CSS ça peut craindre -->Conférence CSS3.CREATE

            18 mai 2017 à 14:26:32

            bon j'ai rajouter ça <meta name="viewport" content="width=device-width" /> et ça <link rel="stylesheet" media="all" href="style.css"/>.

            Mais ça ne me dit pas pourquoi je n'arrive pas à modifier "width" dans @media. Du moins je le modifie, mais aucune répercutions en diminuant la page.

            • Partager sur Facebook
            • Partager sur Twitter
              18 mai 2017 à 15:02:24

              tu testes l'affichage sur un tablette ou autre ?

              • Partager sur Facebook
              • Partager sur Twitter

              Le CSS ça peut craindre -->Conférence CSS3.CREATE

                18 mai 2017 à 15:07:24

                C'est bon, je viens de trouver pourquoi je ne pouvais pas utiliser "width" . Il me faut appliquer la propriété display: inline-block sur mon groupe de balise . 8h à chercher pour ça! :'(
                • Partager sur Facebook
                • Partager sur Twitter
                  18 mai 2017 à 15:19:34

                  lol ^^ et ça arrivera encore ;)

                  bonne continuation. et oublies pas de marquer le sujet comme résolu

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Le CSS ça peut craindre -->Conférence CSS3.CREATE

                  Media queries

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur
                  • Markdown