[RÉGLÉ] Rendre des éléments responsive

[blopee]

Bonjour à tous,

Je crée un nouveau topic concernant mon site Web http://www.blopee.fr :

- Grâce à l'aide d'entre vous, j'ai réussi à faire en sorte que ma bannière, ma carte et mon menu de régions soient alignés dans ma page d'accueil.

- Maintenant, je réfléchi au responsive....pour la carte tout est ok. Maintenant je cherche à faire en sorte que le menu et la bannière le soient. Par quoi dois-je commencer selon vous ?. J'attends parler souvent de media queries.....c'est quoi?.

Merci d'avance pour le coup de main.

[toffffe]

Re : Rendre des éléments responsive

Les medias queries te permettent de gérer l'affichage en fonction d'une largeur d'écran.
Par exemple du décide lorsque tu es sur un écran supérieur à 980px d'afficher 2 div l'une à côté de l'autre. Donc tu leur donne une largeur de 48% par exemple
et tu défini un autre médias queries pour les largeur inférieur à 980px pour que ces div fassent 100% et donc se retrouve l'une en dessous de l'autre.
Cela te permet de redistribuer l'information suivant la largeur d’écran de l'internaute.

[toffffe]

Re : Rendre des éléments responsive

Pour le menu c'est plus compliqué, J'ai tendance à conseiller maximenuck et son plugin mobile pour cela http://www.joomlack.fr/extensions-joomla/maximenu-ck
Cela te transforme ton menu déroulant en menu mobile à partir du largeur d'écran indiquée dans le paramétrage

[blopee]

Re : Rendre des éléments responsive

Ok très bien merci, du coup concernant la bannière, peux-tu me donner un exemple que je puisse l'appliquer chez moi ?..
Désolé, je suis un véritable diesel....je comprends vite mais faut m'expliquer longtemps

[manu93fr]

Re : Rendre des éléments responsive

Bonjour,
concernant ton site ... il est deja responsive
Par contre va falloir eviter les bannières en flash ... elles ne passent pas sur les devices apple

[blopee]

Re : Rendre des éléments responsive

Oui je sais que le site est responsive.....sauf la bannière justement....
Quel type de bannière dois-je utiliser selon toi?....je suis preneur de toutes remarques

[toffffe]

Re : Rendre des éléments responsive

Pour ta bannière tout dépend des focntionnalités que tu recherches : dois tu comptabiliser le nombre de clic, nombre d'affichage Sinon si c'est juste un slider, tu peux prendre une extension du style de Unite révolution slider

[blopee]

Re : Rendre des éléments responsive

Merci je vais jeter un oeil à l'extension. Pour le cas où je souhaite mettre en place bannière de rémunération, il existe bien des régies de pubs responsive ?...ou dois-je traficoter le code afin de faire en sorte que la pub le soit ?.

[lefabdu51]

Re : Rendre des éléments responsive

Merci je vais jeter un oeil à l'extension. Pour le cas où je souhaite mettre en place bannière de rémunération, il existe bien des régies de pubs responsive ?...ou dois-je traficoter le code afin de faire en sorte que la pub le soit ?.

un test de base à faire. tu met ton site dans un onglet de firefox et ensuite shift + ctrl + M . comme ca tu utilise la vue adaptative de firefox.
Et tu regardes comment cela se comportes....

Le gros probleme des iframes est que tu n as pas la main sur les styles CSS appliqués. D'ou une grosse difficulté pour personnaliser selon les besoins.

le principe d'une reqête média:
/* on vise un media : @media seulement les écrans (only screen) d'une largeur maxi de 480px (max-width:480px) et en orientation portrait (and orientation(portrait) */

/* regardes a la fin du fichier personal.css du template Beez 3 pour d autres exemples) */
/* l'orientation est optionnelle mais utile pour les resolutions intermediaires qui sont associées aux tablettes) */

@media only screen and (max-width:480px) and (orientation(portrait)) 
{
#mon_id {mes propriétés}
.maclasse {mes propriétés}
}

le net fourmilles d'exemples d'utilisation a toi de voir comment tu veut gerer cela.

[blopee]

Re : Rendre des éléments responsive

Merci beaucoup, j'ai commencé à me pencher sur les medias queries et c'est vrai que c'est plutôt pas mal pour isoler les types de supports.

Je passe le topic en réglé Merci Merciiiiiiiiiii