Partage

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



18 mai 2017 à 14:09:52

ça fonctionne très bien mais il te manque une chose dans ton code html ^^ la meta viewport :)
Mon portfolio / Nouveau projet -->Expedition wars/  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?
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

Mon portfolio / Nouveau projet -->Expedition wars/  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.

18 mai 2017 à 15:02:24

tu testes l'affichage sur un tablette ou autre ?

Mon portfolio / Nouveau projet -->Expedition wars/  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! :'(
18 mai 2017 à 15:19:34

lol ^^ et ça arrivera encore ;)

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

Mon portfolio / Nouveau projet -->Expedition wars/  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é.
  • Editeur
  • Markdown