Question sur la responsive des sites web [Résolu]
Signaler
flexi2202
flexi2202
- Messages postés
- 2334
- Date d'inscription
- lundi 14 mars 2011
- Statut
- Membre
- Dernière intervention
- 14 janvier 2021
flexi2202
- Messages postés
- 2334
- Date d'inscription
- lundi 14 mars 2011
- Statut
- Membre
- Dernière intervention
- 14 janvier 2021
A voir également:
- Question sur la responsive des sites web
- Les sites web peuvent garder la trace de votre navigation en déposant des ✓ - Forum - Internet / Réseaux sociaux
- Comment créer un site web - Articles
- Le certificat de sécurité de ce site web présente un problème ✓ - Forum - Windows 8 / 8.1
- Les sites web peuvent garder la trace de votre navigation en déposant des sur votre ordinateur. en mode navigation , ces informa - Forum - Logiciels
- Certificat du site web révoqué ✓ - Forum - Google Chrome
8 réponses
RoMa_31
- Messages postés
- 254
- Date d'inscription
- samedi 7 novembre 2020
- Statut
- Membre
- Dernière intervention
- 14 janvier 2021
Bonjour,
Les différentes résolutions tentent de prendre en compte les tailles les plus répandues : smartphone, tablette, phablettes etc.
En indiquant plusieurs déclarations, le css choisi (@media) sera fonction des cacarctéristiques du matériel.
Les blocs les uns sous les autres, c'est pratique pour avoir une pleine largeur sur un smartphone tenu dans la position habituelle : il n'y a pas de norme imposée mais des habitudes, des conventions de présentation.
De nombreux tutos ou courts sont disponibles sur le net :
https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design
https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html
https://www.w3schools.com/html/html_responsive.asp
...
Pour tester, il suffit d'utiliser la vue adaptative associée aux outils de développement web intégré au navigateur : Ctrl+Shift+M et passer par le discret menu qui apparait en haute de fenêtre.
Ici, celui de Firefox :

Les différentes résolutions tentent de prendre en compte les tailles les plus répandues : smartphone, tablette, phablettes etc.
En indiquant plusieurs déclarations, le css choisi (@media) sera fonction des cacarctéristiques du matériel.
Les blocs les uns sous les autres, c'est pratique pour avoir une pleine largeur sur un smartphone tenu dans la position habituelle : il n'y a pas de norme imposée mais des habitudes, des conventions de présentation.
De nombreux tutos ou courts sont disponibles sur le net :
https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design
https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html
https://www.w3schools.com/html/html_responsive.asp
...
Pour tester, il suffit d'utiliser la vue adaptative associée aux outils de développement web intégré au navigateur : Ctrl+Shift+M et passer par le discret menu qui apparait en haute de fenêtre.
Ici, celui de Firefox :

jordane45
- Messages postés
- 31018
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 14 janvier 2021
Bonjour,
Si tu veux voir comment doit se comporter un site en responsive, regarde comment fonctionne le framework bootstrap.
Tu verras que le contenu s'adapte en largeur... mais aussi en déplaçant, si besoin, les blocks les uns en dessous des autres.. voir .. en en masquant certains...
Et pour voir le rendu.. sache que :
Ton navigateur ( enfin presque tous...) disposent des "outils de développeur" ( accessibles, le plus souvent, par la touche F12 ) et que dedans, tu peux émuler une vue smartphone ou tablette.
Tu peux aussi, tout simplement, t'amuser à réduire la largeur de ton navigateur pour voir ce que ça donne....
Si tu veux voir comment doit se comporter un site en responsive, regarde comment fonctionne le framework bootstrap.
Tu verras que le contenu s'adapte en largeur... mais aussi en déplaçant, si besoin, les blocks les uns en dessous des autres.. voir .. en en masquant certains...
Et pour voir le rendu.. sache que :
Ton navigateur ( enfin presque tous...) disposent des "outils de développeur" ( accessibles, le plus souvent, par la touche F12 ) et que dedans, tu peux émuler une vue smartphone ou tablette.
Tu peux aussi, tout simplement, t'amuser à réduire la largeur de ton navigateur pour voir ce que ça donne....
flexi2202
- Messages postés
- 2334
- Date d'inscription
- lundi 14 mars 2011
- Statut
- Membre
- Dernière intervention
- 14 janvier 2021
bonjour
Merci pour les réponses , l aide et c est rai que bootstrap fais des miracles
je viens de tomber sur un code dans codepen
mais je n arrive pas a agrandir le container
https://codepen.io/digitalhen/pen/zexqPx
le code est en partie hébergé a l extérieur de la page apparemment
merci de l aide
Merci pour les réponses , l aide et c est rai que bootstrap fais des miracles
je viens de tomber sur un code dans codepen
mais je n arrive pas a agrandir le container
https://codepen.io/digitalhen/pen/zexqPx
le code est en partie hébergé a l extérieur de la page apparemment
merci de l aide
jordane45
- Messages postés
- 31018
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 14 janvier 2021
Faut regarder la doc bootstrap... Inclure les lib ne essaires
Puis jouer avec les class de bootstrap
Comme je ne sais pas ce que tu veux faire ni ce que tu as essayé.. impossible de t'en dire plus...
Puis jouer avec les class de bootstrap
Comme je ne sais pas ce que tu veux faire ni ce que tu as essayé.. impossible de t'en dire plus...
flexi2202
- Messages postés
- 2334
- Date d'inscription
- lundi 14 mars 2011
- Statut
- Membre
- Dernière intervention
- 14 janvier 2021
Merci Jordane
voila j ai fini par trouver la solution
il fallait juste que je crée une class container
a présent je suis confronte a un autre soucis et je cherche la solution depuis hier matin
je suis parvenu a intégrer un menu de navigation a un bootstrap
voici le lien
https://jsfiddle.net/flexi2202/dq2gtubc/4/
mais je ne parviens pas a rétablir le sous menu dans le menu
sauf si j enlève cette ligne
mais du coup c est l effet boostrap qui ne fonctionne plus
donc je pense que cela est une incompatibilité des librairies
j ai beau chercher je ne trouve aucun exemple de barre de navigation avec sous menu qui fonctionne dans mon exemple
merci de l aide
voila j ai fini par trouver la solution
il fallait juste que je crée une class container
a présent je suis confronte a un autre soucis et je cherche la solution depuis hier matin
je suis parvenu a intégrer un menu de navigation a un bootstrap
voici le lien
https://jsfiddle.net/flexi2202/dq2gtubc/4/
mais je ne parviens pas a rétablir le sous menu dans le menu
sauf si j enlève cette ligne
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
mais du coup c est l effet boostrap qui ne fonctionne plus
donc je pense que cela est une incompatibilité des librairies
j ai beau chercher je ne trouve aucun exemple de barre de navigation avec sous menu qui fonctionne dans mon exemple
merci de l aide
jordane45
- Messages postés
- 31018
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 14 janvier 2021
Commence par charger les bons css et JS liés à bootstrap 4.5
et profites en pour regarder la doc :
https://getbootstrap.com/docs/4.5/getting-started/introduction/
et profites en pour regarder la doc :
https://getbootstrap.com/docs/4.5/getting-started/introduction/
flexi2202
- Messages postés
- 2334
- Date d'inscription
- lundi 14 mars 2011
- Statut
- Membre
- Dernière intervention
- 14 janvier 2021
Merci pour la reponse
donc dans mon head pour l instant j ai ceci
donc d après la réponse j ai change ceci mais rien ne bouge au niveau du menu
et apparemment je n ai pas besoin de js de bootstrap
donc dans mon head pour l instant j ai ceci
<title>CodePen - Bootstrap 4 card deck responsive</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'> <link rel="stylesheet" href="./style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
donc d après la réponse j ai change ceci mais rien ne bouge au niveau du menu
et apparemment je n ai pas besoin de js de bootstrap
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
jordane45
- Messages postés
- 31018
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 14 janvier 2021
Le JS de bootstrap amène pas mal de fonctionnalités bien pratiques...
Je t'invite à l'inclure dans ton code.
Ensuite, il est préférable de charger tes CSS à la fin de ton head .... (histoire que le code soit propre et lisibile.. )
Je t'invite également à regarder dans la doc bootstrap, comment faire un menu
https://getbootstrap.com/docs/4.5/components/navbar/
par ce que là.. tu essais de réinventer la roue et tu ne respectes pas la doc de bootstrap...
Pour finir, si tu rencontres encore des soucis, pense à nous poster ( ICI ) le code COMPLET de ta page sans oublier les html, JS , CSS que tu as créés.
(bien qu'au niveau css .. tu n'as, normalement, rien de particulier à créer, tout (ou quasiment..) pouvant se gérer via le css de bootstrap... )
Je t'invite à l'inclure dans ton code.
Ensuite, il est préférable de charger tes CSS à la fin de ton head .... (histoire que le code soit propre et lisibile.. )
Je t'invite également à regarder dans la doc bootstrap, comment faire un menu
https://getbootstrap.com/docs/4.5/components/navbar/
par ce que là.. tu essais de réinventer la roue et tu ne respectes pas la doc de bootstrap...
Pour finir, si tu rencontres encore des soucis, pense à nous poster ( ICI ) le code COMPLET de ta page sans oublier les html, JS , CSS que tu as créés.
(bien qu'au niveau css .. tu n'as, normalement, rien de particulier à créer, tout (ou quasiment..) pouvant se gérer via le css de bootstrap... )
flexi2202
- Messages postés
- 2334
- Date d'inscription
- lundi 14 mars 2011
- Statut
- Membre
- Dernière intervention
- 14 janvier 2021
Merci Jordane45
cela semble fonctionner
voila ce que j ai fait en vitesse juste pour tester
mais je dois encore centrer , changer les couleurs ect...
mais d apres ce que je lis tout peux ce faire sans utiliser de css a cote
en 1 er lieu
au apres
j ai insérer directement après
puis dans le fond du code ceci
et pour finir ceci la ou je veux faire apparaître le menu
je ne sais pas si cela est correct mais cela semble fonctionner
cela semble fonctionner
voila ce que j ai fait en vitesse juste pour tester
mais je dois encore centrer , changer les couleurs ect...
mais d apres ce que je lis tout peux ce faire sans utiliser de css a cote
en 1 er lieu
au apres
<meta charset="UTF-8">
j ai insérer directement après
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
puis dans le fond du code ceci
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
et pour finir ceci la ou je veux faire apparaître le menu
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
je ne sais pas si cela est correct mais cela semble fonctionner
jordane45
- Messages postés
- 31018
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 14 janvier 2021
ça semble pas mal.
Quand tu dis le " fond du code " .. tu veux dire à la fin de ton body, juste avant le </body> ?
Si c'est ça, oui, c'est bien ce qu'il faut faire.
PS: Pour les balises de code, pense à y indiquer le lange ( html, php ou css selon les besoin)
Explications ( à lire ENTIEREMENT ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Quand tu dis le " fond du code " .. tu veux dire à la fin de ton body, juste avant le </body> ?
Si c'est ça, oui, c'est bien ce qu'il faut faire.
PS: Pour les balises de code, pense à y indiquer le lange ( html, php ou css selon les besoin)
Explications ( à lire ENTIEREMENT ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
flexi2202
- Messages postés
- 2334
- Date d'inscription
- lundi 14 mars 2011
- Statut
- Membre
- Dernière intervention
- 14 janvier 2021
Merci jordane
voila comme ca pour ceux qui auront cherche comme moi durant des heures
voila c es t solutionner
oui je sais pour l emploi des codes , je le fais toujours , sauf cette fois j ai oublie
oui voila juste avant </body>
par contre j ai une dernière question
j ai essaye de fixer le menu de navigation avec un style cela fonctionne
avec
position: fixed
mais lorsque je fais défiler, le contenu vient couvrir la barre de navigation
y a t il un moyen pour que la barre de navigation du menu soit fixe et en plus ne soit pas couverte lorsque le contenu remonte
merci
voila comme ca pour ceux qui auront cherche comme moi durant des heures
voila c es t solutionner
oui je sais pour l emploi des codes , je le fais toujours , sauf cette fois j ai oublie
oui voila juste avant </body>
par contre j ai une dernière question
j ai essaye de fixer le menu de navigation avec un style cela fonctionne
avec
position: fixed
mais lorsque je fais défiler, le contenu vient couvrir la barre de navigation
y a t il un moyen pour que la barre de navigation du menu soit fixe et en plus ne soit pas couverte lorsque le contenu remonte
merci