Question sur la responsive des sites web
Résolu/Fermé
flexi2202
Messages postés
3782
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 mars 2024
-
Modifié le 10 janv. 2021 à 09:05
flexi2202 Messages postés 3782 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 13 mars 2024 - 11 janv. 2021 à 15:34
flexi2202 Messages postés 3782 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 13 mars 2024 - 11 janv. 2021 à 15:34
A voir également:
- Question sur la responsive des sites web
- Instagram web - Guide
- Traduire une page web - Guide
- Sites de vente d'occasion - Guide
- Les sites web peuvent garder la trace de votre navigation en déposant des sur votre ordinateur - Forum Réseaux sociaux
- Conserver traces des sites web visités - Forum Réseaux sociaux
8 réponses
Utilisateur anonyme
10 janv. 2021 à 10:31
10 janv. 2021 à 10:31
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
38111
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
10 janv. 2021 à 10:34
10 janv. 2021 à 10:34
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
3782
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 mars 2024
178
10 janv. 2021 à 18:11
10 janv. 2021 à 18:11
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
38111
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
10 janv. 2021 à 18:53
10 janv. 2021 à 18:53
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
3782
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 mars 2024
178
11 janv. 2021 à 09:44
11 janv. 2021 à 09:44
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
38111
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
11 janv. 2021 à 10:44
11 janv. 2021 à 10:44
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/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
flexi2202
Messages postés
3782
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 mars 2024
178
11 janv. 2021 à 12:04
11 janv. 2021 à 12:04
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
38111
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
11 janv. 2021 à 12:19
11 janv. 2021 à 12:19
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
3782
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 mars 2024
178
11 janv. 2021 à 12:50
11 janv. 2021 à 12:50
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
38111
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
11 janv. 2021 à 13:17
11 janv. 2021 à 13:17
ç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
3782
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 mars 2024
178
Modifié le 11 janv. 2021 à 13:22
Modifié le 11 janv. 2021 à 13:22
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
jordane45
Messages postés
38111
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
11 janv. 2021 à 13:23
11 janv. 2021 à 13:23
Il faut joueur (avec du css) sur le z-index des éléments je pense.
flexi2202
Messages postés
3782
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 mars 2024
178
11 janv. 2021 à 15:34
11 janv. 2021 à 15:34
merci
je vais regarder a cela
je vais regarder a cela