Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu du forum :

Accueil du forum

Derniers messages

S'inscrire au forum

Se connecter au forum

Mot de passe oublié

Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Design vierge à créer > Quel code pour le responsive

Connectez-vous au forum     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite

Quel code pour le responsive

La question
Posté le 23 Février 2015 à 19:57
on dort chez toi


1982 messages
Inscrit le 10/12/2009
Mon site
Hello,

Je suis entrain de refaire tout mon site de manière à ce qu'il soit correctement visible sur les smarphones donc résponsive.

J'ai adopté le menu wifeo pour être tranquille et pour que ce soit parfaitement adapté sur les mobiles. Le logo me semble pas trop mal aussi.

Pour ma page d'accueil

j'aurai aimé avoir mon image en plein écran (sur mobile) et le texte en-dessous.
http://www.maetzcedric.com/


Pour les galerie photo, j'aimerai avoir une image en-dessous de l'autre en plein écran
http://www.maetzcedric.com/galerie-photo-paysage.php

Pour le blog, j'aurai aimé voir la partir {zone_publicites} et directement en-dessous l'article du blog
http://www.maetzcedric.com/article-97 [...] tion.html

Comment faire ? Quel est le bon code à mettre en place ?

 
Navigateur utilisé : Firefox
 
Dernière modification du message le 23/2/2015 à 19:57:50.

La réponse qui règle le problème
Posté le 25 Février 2015
jonathan-support

1742 messages
Inscrit le 22/1/2013
Bonjour Cédric,

Oui c'est un tréééééés gros projet

Alors, je ne peux pas te le faire, beaucoup de boulot justement sur le responsive, mais je vais te livrer un de mes secret et je suis sûr que tu y arriveras.

Alors, prenons le cas d'une mise en page simple, avec une entete qui n'est pas fixé et qui a un fond blanc, elle fait 1000px de large, mais sur mobile nous voulons qu'elle fasse 100% de la largeur, qu'elle soit fixé en haut et surtout qu'elle ai un fond noir. Je vais te donner le code source de ce petit tout de magie ici même, je t'invite à l'essayer dans une de tes pages et de modifier à tâton pour comprendre. Je ferai un récapitulatif général à la fin.

Nous allons d'abord définir la largeur à laquelle nous voulons que la page fasse le changement. Pour cela nous utilisons la balise "viewport", ici "700" correspond à la largeur souhaitée : <meta name="viewport" content="width=700">

Ensuite, nous allons définir les paramètres de l'entete. Pour cela nous allons diviser le CSS en deux parties, la partie "Mobile" et la partie "Ordinateur", pour cela il faut les encadrés avec une balise spécifique qui se nomme "@media" http://www.alsacreations.com/article/ [...] ries.html).

Ici la partie "mobile":

   SCRIPT
@media (max-width :700px){

.entete
{
width:100%;
height:80px;
background-color:#000000;
position:fixed;
top:0px;
}

}


Ici la partie "Ordinateur":

   SCRIPT
@media (min-width :701px){

.entete
{
width:1000px;
height:80px;
background-color:#ffffff;
}

}


Et maintenant le HTML (qui est commun au deux cas de figure):

   SCRIPT
<div align="center">
<div style="width:1000px;">
<div class="entete">&nbsp;</div>
</div>
</div>



Le tout donnera exactement ce que l'on veut, je te fait un petit récapitulatif générale, ton code devrait ressemble à cela :

   SCRIPT
<html lang="fr">
<head>
<meta name="viewport" content="width=700">
</head>
<body>
<style>
@media (max-width :700px){

.entete
{
width:100%;
height:80px;
background-color:#000000;
position:fixed;
top:0px;
}
}
@media (min-width :701px){

.entete
{
width:1000px;
height:80px;
background-color:#ffffff;
}

}
</style>
<div align="center">
<div style="width:1000px;">
<div class="entete">&nbsp;</div>
</div>
</div>
</body>
</html>


Conclusion, voilà comment les éléments se transforme, chaque élément donné plus haut à son importance. Maintenant tu peux jouer par toi-même en attendant et maintenant que tu sais comment cela est fait imagine avec la multitude de cas présent sur wifeo, la dose de travail pour byby

--
Jonathan
 
Navigateur utilisé : Chrome


 
Posté le 23 Février 2015 à 21:01
fanfan88


1741 messages
Inscrit le 22/2/2010
Mon site
Bonsoir Cédric,

Nous avions eu une conversation à ce sujet, tu disais que ce n'était pas trop compliqué et tu avais raison, wifeo nous donne la solution ici :

http://www.wifeo.com/code/54-responsi [...] yout.html

C'est pourquoi j'ai renoncé à te le faire comme convenu contre une rémunération, il est toujours préférable de maîtriser les codes qui constituent nos sites pour se dépanner soi-même en cas de souci .

Bonne soirée.

 
Navigateur utilisé : Firefox

Dernières actualités de mon site :
• Nouvel article sur le blog : Avec Leclerc, nettoyons la nature ?
• La carte de France des observations de l'anthurus d'Archer par les visiteurs de Nature et décoration vient d'être mise à jour !
(Plus de news au sujet de mon site...)


 
Posté le 24 Février 2015 à 0:45
on dort chez toi


1982 messages
Inscrit le 10/12/2009
Mon site
Hello Stéphane,

Oui en effet je me souviens bien de notre conversation. On m'avait déconseillé de la faire faire par quelqu'un dans la mesure ou dans la temps à venir le responsiv devait être appliqué " automatiquement " sur tout les sites. Donc je reste en attente merci pour le liens qui en effet peut être intéressant en attendant

Bonne soirée à toi et à bientôt

 
Navigateur utilisé : Firefox

 
Posté le 24 Février 2015 à 8:14
robin

Bonjour Cédric,

Jonathan le spécialiste du responsive chez nous passera peut-etre par là, j'interviens juste pour confirmer qu'un gros projet est en cours avec des conséquences sur le responsive.

Ce projet à pour objectif de :
- proposer un nouveau mode de mise en page qui sera automatiquement responsive.
- proposer des "outils" pour que les pages actuels puissent passer en responsve.
- rendre l'ensemble des pages de l'ensemble des modules totalement responsives.

Voila on avance sur le sujet avec des réunions régulières. On espère être opérationnels sur le sujet avant l'été.

 
Navigateur utilisé : Chrome

- Réagissez à l'actu de Wifeo : Les nouveautés du staff
- Suivez l'actu de Wifeo : twitter.com/wifeo_news


 
Posté le 24 Février 2015 à 8:14
jonathan-support

1742 messages
Inscrit le 22/1/2013
Bonjour,

Oui je vous confirme que le passage en responsive des sites wifeo est en travaille. Par contre, c'est un énorme travail avec une multitude de cas à prendre en compte, pour des choses très spécifiques un peu comme notre ami Cédric le souhaite, cela ne sera peut-être pas comme il le souhaite.

N'hésitez pas si vous avez des questions ou des bouts de code à partager, je vous répondrais et vous orienterais.

--
Jonathan

 
Navigateur utilisé : Chrome

 
Posté le 24 Février 2015 à 22:07
on dort chez toi


1982 messages
Inscrit le 10/12/2009
Mon site
Bonjour Robin et Jonathan,

Merci pour ce retour ( ce magnifique retour ) je me sent soulagé

Comme déjà indiqué dans un autre post, j'ai maintenant trouvé la vrai vocation et donc je sais comment seront mes sites. D'ailleurs ils auront tous la même structure (sauf le blog pour le moment)

Jonathan en attendant que tout soit automatisé, est-ce que je pourrais à nouveau abuser de ta patience juste pour un petit détail ?

J'aimerai pouvoir mettre la zone de gauche ( noir ) fixe.

Logo en haut
menu

et un pied de page en bas de cette zone et fixe
exactement comme sur ce site

http://themes.mediacreed.com/html/syn [...] olio.html
je vais quand même bosser dessus cette nuit peut-être que je vais y arriver (mais j'y crois pas)
en cas de besoin n'hésite pas à directement allez sur mon site.

http://www.maetzcedric.com/

Merci d'avance et vivement les beau jour

 
Navigateur utilisé : Firefox
 
Dernière modification du message le 24/2/2015 à 22:07:53.

 
Posté le 25 Février 2015 à 8:51
jonathan-support

1742 messages
Inscrit le 22/1/2013
Bonjour Cédric,

Oui c'est un tréééééés gros projet

Alors, je ne peux pas te le faire, beaucoup de boulot justement sur le responsive, mais je vais te livrer un de mes secret et je suis sûr que tu y arriveras.

Alors, prenons le cas d'une mise en page simple, avec une entete qui n'est pas fixé et qui a un fond blanc, elle fait 1000px de large, mais sur mobile nous voulons qu'elle fasse 100% de la largeur, qu'elle soit fixé en haut et surtout qu'elle ai un fond noir. Je vais te donner le code source de ce petit tout de magie ici même, je t'invite à l'essayer dans une de tes pages et de modifier à tâton pour comprendre. Je ferai un récapitulatif général à la fin.

Nous allons d'abord définir la largeur à laquelle nous voulons que la page fasse le changement. Pour cela nous utilisons la balise "viewport", ici "700" correspond à la largeur souhaitée : <meta name="viewport" content="width=700">

Ensuite, nous allons définir les paramètres de l'entete. Pour cela nous allons diviser le CSS en deux parties, la partie "Mobile" et la partie "Ordinateur", pour cela il faut les encadrés avec une balise spécifique qui se nomme "@media" http://www.alsacreations.com/article/ [...] ries.html).

Ici la partie "mobile":

   SCRIPT
@media (max-width :700px){

.entete
{
width:100%;
height:80px;
background-color:#000000;
position:fixed;
top:0px;
}

}


Ici la partie "Ordinateur":

   SCRIPT
@media (min-width :701px){

.entete
{
width:1000px;
height:80px;
background-color:#ffffff;
}

}


Et maintenant le HTML (qui est commun au deux cas de figure):

   SCRIPT
<div align="center">
<div style="width:1000px;">
<div class="entete">&nbsp;</div>
</div>
</div>



Le tout donnera exactement ce que l'on veut, je te fait un petit récapitulatif générale, ton code devrait ressemble à cela :

   SCRIPT
<html lang="fr">
<head>
<meta name="viewport" content="width=700">
</head>
<body>
<style>
@media (max-width :700px){

.entete
{
width:100%;
height:80px;
background-color:#000000;
position:fixed;
top:0px;
}
}
@media (min-width :701px){

.entete
{
width:1000px;
height:80px;
background-color:#ffffff;
}

}
</style>
<div align="center">
<div style="width:1000px;">
<div class="entete">&nbsp;</div>
</div>
</div>
</body>
</html>


Conclusion, voilà comment les éléments se transforme, chaque élément donné plus haut à son importance. Maintenant tu peux jouer par toi-même en attendant et maintenant que tu sais comment cela est fait imagine avec la multitude de cas présent sur wifeo, la dose de travail pour byby

--
Jonathan

 
Navigateur utilisé : Chrome

 
Posté le 25 Février 2015 à 15:37
on dort chez toi


1982 messages
Inscrit le 10/12/2009
Mon site
Hello Jonathan,

    CITATION :
maintenant que tu sais comment cela est fait imagine avec la multitude de cas présent sur wifeo, la dose de travail pour byby


Maintenant que tu m a livré tes secrets, je te propose de t'aider dans ce travail général pour wifeo heummm quand j'aurai compris et que j'aurai fini mes sites

Plus sérieusement merci pour m'avoir expliquer ce petit truc (long je voulais dire)
en effet si tu ma l'avais fait se serai cool et plus rapide, mais j'aurai jamais rien compris, alors que maintenant, ... bin j'ai toujours pas bien compris

Mais je vais bosser dessus.

Par contre 2 petites choses :

- La balise " viewport " javais vu que c'était bas bon de l'utilisé
- Pourquoi dans ton exemple tu parle de 700 de large alors que plus haut tu dit vouloir 1000 de haut ? une erreur ?

je test, merci d'avance et bon courage pour ta mission qui serai impossible pour moi

 
Navigateur utilisé : Firefox
 
Posté le 25 Février 2015 à 15:57
Alors je viens de faire le test et y a rien qui change entre mobile ou ordinateur
le blanc reste blanc et j'ai mis les codes comme tu ma indiqué

et sur mobile j'ai une version couper ( comme si ct trop grand ) et impossible d'aller sur les cotés
j'ai donc donné 800 dans viewport et c'est bon sur mobile même 900

 
Navigateur utilisé : Firefox
 
Dernière modification du message le 25/2/2015 à 16:04:48.

 
Poster une nouvelle réponse
Connectez-vous au forum pour pouvoir répondre     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES