Codage avec media query
geiffy
Messages postés
15
Date d'inscription
Statut
Membre
Dernière intervention
-
geiffy Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
geiffy Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Je sollicite une aide sur le bon codage en media query en vue de rendre mon site responsive. Voici donc la structure de mon site:
- une page index qui contient:
1) un logo;
2) une image (ma photo);
3) une barre-menu (déroulant);
4) une colonne gauche dans laquelle se trouve une fb-page, c'est-à-dire la page facebook déroulante et un petit logo au-dessus pour le "suivez-moi sur Facebook";
5) un titre h1;
6) un contenu;
7) un footer.
Cette strucuture se répète sur les autres pages, sauf celle qui présente mes livres et celle où se trouve un formulaire de contact.
Celle qui présente mes livres contient, outre les éléments de la page index (hormis ma photo), une image pour l'ebook (avec à l'intérieur un liens qui renvoie vers Amazon ), une image pour le format papier (avec à l'intérieur un lien qui renvoie vers un le site qui imprime mon format papier) et un lien pour un extrait du livre.
Concernant la page du formulaire, elle contient deux labels prénom et email, un textarea pour le message et un button pour l'envoi.
Je vous remercie d'avance de m'aider à construire le codage via le media query.
Bien cordialement.
Geiffy
Je sollicite une aide sur le bon codage en media query en vue de rendre mon site responsive. Voici donc la structure de mon site:
- une page index qui contient:
1) un logo;
2) une image (ma photo);
3) une barre-menu (déroulant);
4) une colonne gauche dans laquelle se trouve une fb-page, c'est-à-dire la page facebook déroulante et un petit logo au-dessus pour le "suivez-moi sur Facebook";
5) un titre h1;
6) un contenu;
7) un footer.
Cette strucuture se répète sur les autres pages, sauf celle qui présente mes livres et celle où se trouve un formulaire de contact.
Celle qui présente mes livres contient, outre les éléments de la page index (hormis ma photo), une image pour l'ebook (avec à l'intérieur un liens qui renvoie vers Amazon ), une image pour le format papier (avec à l'intérieur un lien qui renvoie vers un le site qui imprime mon format papier) et un lien pour un extrait du livre.
Concernant la page du formulaire, elle contient deux labels prénom et email, un textarea pour le message et un button pour l'envoi.
Je vous remercie d'avance de m'aider à construire le codage via le media query.
Bien cordialement.
Geiffy
Configuration: Windows / Chrome 97.0.4692.99
A voir également:
- Codage avec media query
- Codage ascii - Guide
- Windows media player - Télécharger - Lecture
- Power query download - Télécharger - Tableur
- Media creation tool - Télécharger - Systèmes d'exploitation
- Media coder - Télécharger - Montage & Édition
2 réponses
Bonjour,
Commence par écrire le code html et css pour la version mobile de ton site.
C'est souvent la version la plus simple car il y a généralement une seule colonne et juste assez de place pour aller à l'essentiel.
Une fois la version mobile intégrée, ajoute des média query pour surcharger le css de ton site afin de gérer l'affichage pour les autres résolutions, de la plus petite à la plus grande résolution.
Quelques exemples :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_page
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s
Plus d'infos : https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Responsive_Design
Bonne journée,
Commence par écrire le code html et css pour la version mobile de ton site.
C'est souvent la version la plus simple car il y a généralement une seule colonne et juste assez de place pour aller à l'essentiel.
Une fois la version mobile intégrée, ajoute des média query pour surcharger le css de ton site afin de gérer l'affichage pour les autres résolutions, de la plus petite à la plus grande résolution.
Quelques exemples :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_page
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s
Plus d'infos : https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Responsive_Design
Bonne journée,
Bonjour Pitet,
Merci pour ta réponse et les infos jointes. Effectivement, cela n'est pas simple pour un néophyte. Voici ci-après ma page index. Consentirais-tu à me faire un exemple de l'écriture Html, css et media query pour la version mobile de celle-ci. Je pourrais ainsi tenter de m'en servir pour les autres pages. Quoique la page contact et de présentation de mes livres sont différentes.
Bonne journée à toi.
La page index:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Accueil</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="fichier-css/page-menu.css">
<link rel="stylesheet" href="fichier-css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="auteur" content="François de Calielli">
<meta name="description" content="page de bienvenue du site"/>
<meta name="reply-to" content="decalielli@gmail.com">
<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="fichier-medias-queries.css">
</head>
<div id="logo">
<img src="fichier-images/logo_atypic.jpg" alt= Le logo de mon site d'auteur class=”full-width-img”/>
<img src="fichier-images/Atypical_autoedition.jpg" alt= L'entête du site class=”full-width-img”/>
</div>
<body>
<div id="barre-menu">
<nav>
<label for="menu-mobile" class="menu-mobile">Menu</label>
<input type="checkbox" id="menu-mobile" role="button">
<ul>
<li class="menu-index"><a href="index.html">Accueil</a></li>
<li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
<li class="menu-livres"><a href="livres.html">Mes livres</a>
<ul class="submenu">
<li><a href="romans.html">Les romans</a></li>
<li><a href="essais.html">Les essais</a></li>
<li><a href="poesies.html">Les poésies</a></li>
<li><a href="theatre.html">Les pièces de théâtre</a></li>
</ul>
</li>
<li class="menu-contact"><a href="contact.html">Contact</a></li>
<li class="menu-merci"><a href="merci.html">Merci!</a></li>
</ul>
</li>
</nav>
</div>
</body>
</html>
<html>
<body>
<div id="colonne-gauche">
<ul>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
<div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d'auteurs</a></blockquote></div>
<div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
<a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>
</div>
</ul>
</div>
<h1 style="color: #875c1a; text-shadow: 1.5px 1.5px 1.5px black">Bienvenue sur le site Atypical Autoédition</h1>
<p><img src="fichier-images/photo_color.jpg" style="margin-left:-25px" alt="ma photo"><h3><em>François de Calielli</em></h3></p>
<div id="contenu">
<p style="font-size: 20px">Il s'agit de mon site d'auteur</p>
<p>J'ai choisi de créer une marque, en l'occurrence <em><span style="color: #634009">Atypical Autoédition</em></span> pour mes livres./p>
<p>J'espère que vous poursuivrez la visite de ce site avec le désir de découvrir mes oeuvres.</p>
</div>
<div id="footer">
</div>
</body>
</html>
Merci pour ta réponse et les infos jointes. Effectivement, cela n'est pas simple pour un néophyte. Voici ci-après ma page index. Consentirais-tu à me faire un exemple de l'écriture Html, css et media query pour la version mobile de celle-ci. Je pourrais ainsi tenter de m'en servir pour les autres pages. Quoique la page contact et de présentation de mes livres sont différentes.
Bonne journée à toi.
La page index:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Accueil</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="fichier-css/page-menu.css">
<link rel="stylesheet" href="fichier-css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="auteur" content="François de Calielli">
<meta name="description" content="page de bienvenue du site"/>
<meta name="reply-to" content="decalielli@gmail.com">
<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="fichier-medias-queries.css">
</head>
<div id="logo">
<img src="fichier-images/logo_atypic.jpg" alt= Le logo de mon site d'auteur class=”full-width-img”/>
<img src="fichier-images/Atypical_autoedition.jpg" alt= L'entête du site class=”full-width-img”/>
</div>
<body>
<div id="barre-menu">
<nav>
<label for="menu-mobile" class="menu-mobile">Menu</label>
<input type="checkbox" id="menu-mobile" role="button">
<ul>
<li class="menu-index"><a href="index.html">Accueil</a></li>
<li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
<li class="menu-livres"><a href="livres.html">Mes livres</a>
<ul class="submenu">
<li><a href="romans.html">Les romans</a></li>
<li><a href="essais.html">Les essais</a></li>
<li><a href="poesies.html">Les poésies</a></li>
<li><a href="theatre.html">Les pièces de théâtre</a></li>
</ul>
</li>
<li class="menu-contact"><a href="contact.html">Contact</a></li>
<li class="menu-merci"><a href="merci.html">Merci!</a></li>
</ul>
</li>
</nav>
</div>
</body>
</html>
<html>
<body>
<div id="colonne-gauche">
<ul>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
<div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d'auteurs</a></blockquote></div>
<div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
<a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>
</div>
</ul>
</div>
<h1 style="color: #875c1a; text-shadow: 1.5px 1.5px 1.5px black">Bienvenue sur le site Atypical Autoédition</h1>
<p><img src="fichier-images/photo_color.jpg" style="margin-left:-25px" alt="ma photo"><h3><em>François de Calielli</em></h3></p>
<div id="contenu">
<p style="font-size: 20px">Il s'agit de mon site d'auteur</p>
<p>J'ai choisi de créer une marque, en l'occurrence <em><span style="color: #634009">Atypical Autoédition</em></span> pour mes livres./p>
<p>J'espère que vous poursuivrez la visite de ce site avec le désir de découvrir mes oeuvres.</p>
</div>
<div id="footer">
</div>
</body>
</html>