Aides sur les thèmes PHPBoost [Réglé] thème lorem, adapter au mobile mais un souci
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Bonjour à toutes et à tous.
Je suis actuellement en train de créer un site pour mobile. J'ai donc refais les CSS de mon thème principal qui est "lorem".
J'ai utilisé la méthode via "Media Query".
J'ai donc essayer sous plusieurs résolutions.
-Sur mon ordinateur avec une résolution de 1280 par 800: Fonctionnement niquel
-Sur l'ordinateur de mon frère ayant une résolution supérieur a 1400(de large): Fonctionnement niquel
-Sur tablette "Acer Iconia Tab A210" 1280 x 800(en mode paysage) : Fonctionnement niquel
Toujours sur la tablette mais en mode portrait cette fois(résolution plus basse): Fonctionnement niquel
-Sur mon iPhone 4S: Fonctionnement a problème.
Je m'explique, j'ai créer un menu visible que avec une résolution inférieur à <859px, car le menu normal été bien trop gros pour être visible dans cette résolution. Mais le menue s'affiche trés mal. "Je vais joindre une screen shot avec mon iphone"
Voici le code de mon menu:
design.css
header.tpl
J'oublier, http://samghami.fr.nf/ le site est ca version "mobile" est en ligne pour que vous puissiez regarder.
Savez-vous comment régler le problème? Edité par samghami officielle Le 16/03/2013 à 12h09
Je suis actuellement en train de créer un site pour mobile. J'ai donc refais les CSS de mon thème principal qui est "lorem".
J'ai utilisé la méthode via "Media Query".
J'ai donc essayer sous plusieurs résolutions.
-Sur mon ordinateur avec une résolution de 1280 par 800: Fonctionnement niquel
-Sur l'ordinateur de mon frère ayant une résolution supérieur a 1400(de large): Fonctionnement niquel
-Sur tablette "Acer Iconia Tab A210" 1280 x 800(en mode paysage) : Fonctionnement niquel
Toujours sur la tablette mais en mode portrait cette fois(résolution plus basse): Fonctionnement niquel
-Sur mon iPhone 4S: Fonctionnement a problème.
Je m'explique, j'ai créer un menu visible que avec une résolution inférieur à <859px, car le menu normal été bien trop gros pour être visible dans cette résolution. Mais le menue s'affiche trés mal. "Je vais joindre une screen shot avec mon iphone"
Voici le code de mon menu:
design.css
Code CSS :
#memumobile{ display:inherit; width:99%; text-align:center; color:#FFFFFF; }
header.tpl
Code TPL :
<div id="memumobile" align="center" style="width:99%"> <p> <div align="center" style="background-color:#009900; width:50%; border-radius:5px; font-size:16px;"><img src="http://samghami.fr.nf/templates/lorem/images/admin/admin_mini.png" class="valign_middle" alt="" /> <a href="{PATH_TO_ROOT}/">Accueil</a> <img src="http://samghami.fr.nf/articles/articles_mini.png" class="valign_middle" alt="" /> <a href="{PATH_TO_ROOT}/articles/">Tutoriel</a> <img src="http://samghami.fr.nf/contact/contact_mini.png" class="valign_middle" alt="" /> <a href="{PATH_TO_ROOT}/contact">Contact</a> <img src="http://samghami.fr.nf/forum/forum_mini.png" class="valign_middle" alt="" /> <a href="{PATH_TO_ROOT}/forum/">Forum</a> </div><p> </div>
J'oublier, http://samghami.fr.nf/ le site est ca version "mobile" est en ligne pour que vous puissiez regarder.
Savez-vous comment régler le problème? Edité par samghami officielle Le 16/03/2013 à 12h09
Version Phpboost : V4
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Cela ne fonctionne pas, mon menue devrai faire une barre droite comme cela:
Ceci est un screen sur ma tablette tactile.
Comme vous pouvez le constater, sur la tablette cela fonctionne parfaitement, mais sur mon téléphone c'est l'inverse.
Sur mon téléphone, le haut de mon site ne s'affiche pas correctement.
Ceci est un screen sur ma tablette tactile.
Comme vous pouvez le constater, sur la tablette cela fonctionne parfaitement, mais sur mon téléphone c'est l'inverse.
Sur mon téléphone, le haut de mon site ne s'affiche pas correctement.
Version Phpboost : V4
C'est ton width qui est trop juste .. dans ton div tu le place en css à 99% et dans ton div à 50% .. enlève le 50 ^^
Bon il reste des Bin's .. mais je me sert de webdevelopper avec les tailles personnalisés 480x560, j'ai pas un Iphone ni une tablette
Bon il reste des Bin's .. mais je me sert de webdevelopper avec les tailles personnalisés 480x560, j'ai pas un Iphone ni une tablette
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Pour moi le problème viendrai au niveau du div header. car la taille du haut fais environ 75% de la taille de l'ecran alors que le reste non
Version Phpboost : V4
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Si tu veux obtenir le même rendu que sur le telephone, il faut mettre 320*480
Version Phpboost : V4
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Alors, tu peux regarder avec la résolution que je t'es donné déjà j'ai réussi a avoir un meilleur rendu 
Maintenant, j'ai toujours un problème. Je pense que ça proviens du header ou de quelques part par la. En fais la div ou il y a l'image top.png , on a l'impression qu'elle est configuré a 75% alors qu'il n'y a rien, tu vois?
Maintenant, j'ai toujours un problème. Je pense que ça proviens du header ou de quelques part par la. En fais la div ou il y a l'image top.png , on a l'impression qu'elle est configuré a 75% alors qu'il n'y a rien, tu vois?
Version Phpboost : V4
Div#header exact .. descend le height et essaie cela dans ton div menumobile
Code CSS :
background-color: #009900;
border-radius: 5px 5px 5px 5px;
font-size: 16px;
height: 52px; /* ça en plus ...*/
width: 99%;
Inscrit le : 22/02/2013 à 23h16
Messages: 36
toujours un problème de largeur avec l'image top.png
Version Phpboost : V4
Inscrit le : 22/02/2013 à 23h16
Messages: 36
J'ai trouvé la solution, je mettrai ici le tuto pour le faire dans les prochains jours
Version Phpboost : V4
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Bonjour à toutes et à tous,
j'ai fais le tutoriel pour l'adaptation du thème lorem aux périphériques mobiles.
Swan, si tu aimes mon tutoriel et que tu le souhaite, je peux faire le tuto sur ton site.
j'ai fais le tutoriel pour l'adaptation du thème lorem aux périphériques mobiles.
Swan, si tu aimes mon tutoriel et que tu le souhaite, je peux faire le tuto sur ton site.
Version Phpboost : V4
Bonsoir,
Ha pas mal du tout ! il peut encore être affiné avec les passages des variable css, dans le fichier design ^^
Ensuite remplacer ton url des mentions légales en footer par " #" car tout le monde n'aura pas forcément la page faites sur son site ^^
Et remplace "Adaptation mobile par Samghami" dans ta balise url par "AMS", et place plutôt "Adaptation mobile par Samghami" rajoute le en title. La curiosité fera le reste
Un peu comme ça :
Merci pour cette initiative et oui je veux bien que tu le place sur CsN ^^
Ha pas mal du tout ! il peut encore être affiné avec les passages des variable css, dans le fichier design ^^
Ensuite remplacer ton url des mentions légales en footer par " #" car tout le monde n'aura pas forcément la page faites sur son site ^^
Et remplace "Adaptation mobile par Samghami" dans ta balise url par "AMS", et place plutôt "Adaptation mobile par Samghami" rajoute le en title. La curiosité fera le reste
Un peu comme ça :
Code TPL :
<div id="footermob"> © 2013 {SITE_NAME} - Tout droits réservés | <a class="small_link" href="{PATH_TO_ROOT}/" title="Accueil">Accueil</a> | <a class="small_link" href="{PATH_TO_ROOT}/contact/index.php" title="Nous contacter">Contact</a> | # IF C_MENUS_FOOTER_CONTENT # {MENUS_FOOTER_CONTENT} # ENDIF # <span> {L_POWERED_BY} <a class="small_link" href="http://www.phpboost.com" title="PHPBoost">PHPBoost {PHPBOOST_VERSION}</a> {L_PHPBOOST_RIGHT} | <a href="http://samghami.fr.nf/" title="Adaptation mobile par Samghami">AM.S</a> </span> </div>
Merci pour cette initiative et oui je veux bien que tu le place sur CsN ^^
Inscrit le : 22/02/2013 à 23h16
Messages: 36
Salut à toute et à tous, j'ai mis a jour le thème lorem. Enfin, son adaptation aux périphériques mobiles. Un menu à été recréer.
Qu'en penser vous ? Que puis-je améliorer?
http://www.samghami.com/
MAJ:
V.1.1:
-Création d'un menu special pour mobile
-Correction de bugs pour le header et le footer
V.1.0:
-Adaptation au mobile Edité par samghami officielle Le 20/05/2013 à 21h17
Qu'en penser vous ? Que puis-je améliorer?
http://www.samghami.com/
MAJ:
V.1.1:
-Création d'un menu special pour mobile
-Correction de bugs pour le header et le footer
V.1.0:
-Adaptation au mobile Edité par samghami officielle Le 20/05/2013 à 21h17
Version Phpboost : V4
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie